/* Free tools (tools/server-status.html): result card for assets/js/status-tool.js. Uses ss.css tokens when present. */
.stool-card {
  background: var(--card, #121826);
  border: 1px solid var(--line-2, rgba(255, 255, 255, .08));
  border-radius: 14px;
  padding: 20px 22px;
  max-width: 560px;
  color: var(--text, #eef0f5);
}
.stool-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; margin-bottom: 14px;
}
.stool-status::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-3, #6b7285);
}
.stool-status.on { color: var(--acc, #22ccf2); }
.stool-status.on::before { background: var(--acc, #22ccf2); box-shadow: 0 0 0 4px var(--acc-soft, rgba(34, 204, 242, .12)); }
.stool-status.off { color: var(--text-2, #9aa1b2); }
.stool-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-top: 1px solid var(--line, rgba(255, 255, 255, .08));
  font-size: 14px;
}
.stool-k { color: var(--text-2, #9aa1b2); flex: none; }
.stool-v { text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.stool-note { margin: 12px 0 0; font-size: 13px; color: var(--text-2, #9aa1b2); }
.stool-card > .stool-note:first-child { margin-top: 0; }
.stool-note a { color: var(--acc, #22ccf2); }
@media (max-width: 480px) { .stool-card { padding: 16px; } .stool-row { flex-direction: column; gap: 2px; } .stool-v { text-align: left; } }