/* /status - rides on backtest.css (wrap, cards, method). */

.st-overall { display: flex; align-items: center; gap: 12px; padding: 16px 20px; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-panel);
  font-size: 15px; font-weight: 600; color: var(--txt); }
.st-overall.up { border-color: rgba(0, 229, 160, 0.35); }
.st-overall.degraded { border-color: rgba(255, 194, 75, 0.4); }
.st-overall.down { border-color: rgba(255, 77, 109, 0.4); }

.st-dot { width: 11px; height: 11px; border-radius: 999px; flex: 0 0 auto; background: var(--txt-4); }
.st-dot.up { background: var(--accent); box-shadow: 0 0 0 4px rgba(0, 229, 160, 0.14); }
.st-dot.degraded { background: var(--gold); box-shadow: 0 0 0 4px rgba(255, 194, 75, 0.14); }
.st-dot.down { background: var(--short); box-shadow: 0 0 0 4px rgba(255, 77, 109, 0.14); }
.st-dot.pending { background: var(--txt-4); animation: st-pulse 1.1s ease-in-out infinite; }
@keyframes st-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.st-list { display: flex; flex-direction: column; }
.st-item { display: flex; align-items: center; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.st-item:last-child { border-bottom: 0; }
.st-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.st-name { font-size: 14.5px; font-weight: 600; color: var(--txt); }
.st-desc { font-size: 12px; color: var(--txt-3); }
.st-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: end; flex: 0 0 auto; }
.st-state { font-size: 12.5px; font-weight: 700; }
.st-state.up { color: var(--accent); }
.st-state.degraded { color: var(--gold); }
.st-state.down { color: var(--short); }
.st-state.pending { color: var(--txt-3); }
.st-detail { font-size: 11px; color: var(--txt-3); }

@media (max-width: 560px) {
  .st-desc { display: none; }
}