/* Readable, light telemetry chart; all assets and data remain same-origin. */
#liveTelemetryTrend[hidden], #liveTelemetryBody[hidden] { display: none !important; }
.live-trend [hidden] { display: none !important; }
#view-telemetry [data-live-metric-key] { cursor: pointer; }
#view-telemetry [data-live-metric-key]:focus-visible { outline: 3px solid #4b94d4; outline-offset: 3px; }
#view-telemetry .industrial-metric-card:hover { border-color: #82b5dd; box-shadow: 0 7px 22px #2f6f9c15; }
.live-trend { min-width: 0; padding: 20px; border-top: 1px solid #e8eef4; background: #fff; }
.live-trend-head, .live-trend-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.live-trend-head h3 { margin: 0 0 8px; color: #243e58; font-size: 21px; }
.live-trend-head span, .live-trend-foot { color: #64788d; font-size: 14px; }
.live-trend-toolbar { justify-content: flex-start; margin: 20px 0 8px; }
.live-trend-toolbar label { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #4c637b; }
.live-trend-toolbar select { min-height: 40px; padding: 8px 30px 8px 12px; border: 1px solid #d4e0e9; border-radius: 8px; background: #f8fbfd; color: #244a6e; font: inherit; }
.live-trend-toolbar .secondary-button { min-width: 42px; }
.live-trend-summary { margin: 14px 0 4px; color: #2b688f; font-size: 15px; overflow-wrap: anywhere; }
.live-trend-message { min-height: 23px; margin: 4px 0; font-size: 14px; color: #6b7d8c; }
.live-trend-message.error { color: #b4513e; }
.live-trend-plot { min-height: 260px; border-radius: 10px; background: linear-gradient(#fbfdff, #fff); overscroll-behavior: contain; }
.live-trend-plot:empty { display: grid; place-items: center; }
.live-trend-plot:empty::after { content: '暂无曲线'; color: #8d9aab; font-size: 18px; }
.live-trend-plot svg { display: block; width: 100%; height: auto; min-height: 260px; }
.live-trend-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; line-height: 1.7; }
.live-trend-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 650px) {
  .live-trend { padding: 14px 10px; }
  .live-trend-head h3 { font-size: 18px; }
  .live-trend-plot svg { min-height: 210px; }
  .live-trend-plot { min-height: 210px; }
}