.live-intro { align-items: center; }
.live-connection-button.is-active { background: #e7f7f1; border-color: #c8eadf; color: var(--green); cursor: default; }
.live-connection-button.is-active::before { content: '●'; font-size: 9px; margin-right: 7px; }
.live-chart-card { min-height: 440px; }
.live-chart-placeholder { position: relative; height: 315px; margin-top: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(180deg, #fbfcff, #f7f9fd); }
.live-chart-placeholder svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .48; }
.live-grid line { stroke: #dfe6f1; stroke-width: 1; }
.live-area { fill: url(#liveArea); }
.live-line { fill: none; stroke: #8ca2ed; stroke-width: 3; stroke-dasharray: 7 8; }
.live-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 25px; background: rgba(250, 252, 255, .68); backdrop-filter: blur(2px); }
.live-empty span { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); font-size: 25px; }
.live-empty strong { font: 700 17px 'Space Grotesk'; }
.live-empty p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.connection.is-active .status-dot { box-shadow: 0 0 0 4px rgba(75, 208, 154, .15); }
.live-toolbar { display:grid; grid-template-columns:minmax(170px,1.35fr) repeat(2,minmax(140px,1fr)) minmax(210px,auto) auto; gap:12px; align-items:end; margin:20px 0 14px; }
.live-toolbar label { display:grid; gap:6px; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.45px; }
.live-toolbar select { min-width:0; height:40px; padding:0 34px 0 11px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font:700 12px inherit; }
.live-chart-mode { display:grid; gap:6px; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.45px; }
.live-chart-mode > div { display:grid; grid-template-columns:1fr 1.25fr; height:40px; padding:3px; border:1px solid var(--line); border-radius:9px; background:#f5f7fb; }
.live-chart-mode button { min-width:0; padding:0 9px; border:0; border-radius:6px; background:transparent; color:var(--muted); font:800 11px Manrope,sans-serif; cursor:pointer; }
.live-chart-mode button.is-active { background:#fff; color:var(--blue); box-shadow:0 1px 5px rgba(24,44,91,.13); }
.live-selected-metrics { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.live-selected-metrics button { display:flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); font:700 11px inherit; cursor:pointer; }
.live-selected-metrics i { width:8px; height:8px; border-radius:50%; }
.live-chart { min-height:350px; }
.live-combined-chart { position:relative; padding:10px 12px 2px; overflow:hidden; border:1px solid var(--line); border-radius:11px; background:linear-gradient(180deg,#fff,#fbfcff); }
.live-combined-chart svg { display:block; width:100%; height:330px; overflow:visible; touch-action:none; }
.live-combined-chart svg text { fill:var(--muted); font:9px Manrope,sans-serif; text-anchor:middle; }
.live-svg-grid line { stroke:#e6ebf3; stroke-width:1; vector-effect:non-scaling-stroke; }
.live-combined-chart path,.live-hover-line,.live-hover-dot { vector-effect:non-scaling-stroke; }
.live-hover-line { stroke:#69778d; stroke-width:1; stroke-dasharray:4 4; }
.live-hover-tooltip { position:absolute; z-index:3; top:18px; width:215px; padding:11px 12px; border:1px solid #dce3ee; border-radius:10px; background:rgba(255,255,255,.97); box-shadow:0 10px 28px rgba(24,44,91,.16); pointer-events:none; }
.live-hover-tooltip b { display:block; margin-bottom:7px; color:var(--ink); font:700 15px 'Space Grotesk'; }
.live-hover-tooltip div { display:grid; grid-template-columns:8px 1fr auto; gap:7px; align-items:center; padding:4px 0; font-size:10px; }
.live-hover-tooltip i { width:8px; height:8px; border-radius:50%; }
.live-hover-tooltip span { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
.live-hover-tooltip strong { color:var(--ink); font-size:11px; }
.live-hover-tooltip small { grid-column:2 / 4; color:var(--muted); font-size:9px; text-align:right; }
.live-legend-note { margin-top:12px; color:var(--muted); font-size:11px; }
.live-empty-state { display:grid; place-items:center; min-height:250px; border:1px dashed var(--line); border-radius:11px; color:var(--muted); text-align:center; }
.live-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:16px; }
.live-kpis article { padding:17px; }
.live-kpis span { display:block; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.live-kpis strong { display:block; margin-top:7px; font:700 20px 'Space Grotesk'; }
.live-metrics-modal { width:min(760px,calc(100vw - 32px)); }
#live-metric-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-height:55vh; margin:18px 0; overflow:auto; }
#live-metric-options fieldset { min-width:0; padding:12px; border:1px solid var(--line); border-radius:10px; }
#live-metric-options legend { padding:0 6px; color:var(--muted); font-size:11px; font-weight:800; }
#live-metric-options label { display:flex; align-items:center; gap:9px; padding:7px 5px; color:var(--ink); font-size:12px; font-weight:700; }
#live-metric-options input { accent-color:var(--blue); }
#live-metric-options label span { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; }
#live-metric-options small { color:var(--muted); font-size:10px; }
@media(max-width:1050px){.live-toolbar{grid-template-columns:1fr 1fr}.live-kpis{grid-template-columns:1fr 1fr}#live-metric-options{grid-template-columns:1fr}}
@media(max-width:560px){.live-toolbar,.live-kpis{grid-template-columns:1fr}.live-combined-chart{overflow-x:auto}.live-combined-chart svg{min-width:720px}}