* { box-sizing: border-box; }
body { margin: 0; background: #0f1117; color: #e8e8e8; font-family: Inter, system-ui, Arial, sans-serif; }
main { padding: 18px; max-width: 1400px; margin: 0 auto; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
h1 { margin: 0; font-size: 24px; }
.badge {
  padding: 6px 12px; border-radius: 12px; background: #20242f; color: #a8b3cf;
  font-weight: 600; font-size: 13px; border: 1px solid #292d3e;
}
.badge-disconnected { opacity: 0.45; }
.badge-disconnected::after { content: ' · переподключение…'; font-weight: 600; font-size: 12px; }
.tool-disclaimer {
  margin: -6px 0 14px; font-size: 12.5px; color: #6b7390; line-height: 1.4;
}
.grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.card { background: #161a24; border: 1px solid #292d3e; border-radius: 16px; padding: 14px; min-height: 260px; }
.card.wide { min-height: 340px; }
h2 { margin-top: 0; font-size: 16px; color: #a8b3cf; }
.window-badge { font-size: 11px; font-weight: 700; color: #6b7390; background: rgba(138, 144, 166, 0.14); padding: 2px 7px; border-radius: 6px; vertical-align: middle; margin-left: 4px; }
#priceChart, #deltaChart { height: 280px; }
pre { white-space: pre-wrap; line-height: 1.45; font-size: 14px; }

/* --- Панель Metrics: компактные строки label/value + инфо-иконка с тултипом --- */
.metrics-list { font-size: 14px; }
.metric-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; }
.metric-row + .metric-row { border-top: 1px solid #1d2130; }
.metric-label { color: #8a90a6; }
.metric-value { color: #e8e8e8; font-weight: 600; margin-left: auto; }
.metric-reason { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #292d3e; color: #a8b3cf; font-size: 13px; line-height: 1.45; }

.metric-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: rgba(168, 179, 207, 0.14);
  color: rgba(209, 212, 220, 0.55);
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  cursor: help;
  user-select: none;
}
.metric-icon:hover,
.metric-icon:focus { background: rgba(168, 179, 207, 0.28); color: rgba(209, 212, 220, 0.95); }

.metric-icon::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: 130%;
  width: max-content;
  max-width: 240px;
  background: #1c2130;
  border: 1px solid #2a2f42;
  color: #d1d4dc;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  padding: 7px 9px;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  z-index: 20;
}
.metric-icon:hover::after,
.metric-icon:focus::after { opacity: 1; transform: translateY(0); }
.signal { border-bottom: 1px solid #292d3e; padding: 8px 0; font-size: 14px; }
.signal b { color: #fff; }
.manip-hit { color: #ffb300; }
.manip-quiet { color: #8a90a6; font-weight: 400; }
.badge-alert { background: #3a2a12 !important; color: #ffb300 !important; border-color: #5a3f14 !important; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }