/* ==========================================
   ULTRAKIT LIVE STATS DASHBOARD
   ========================================== */
.ultrakit-lsd-wrapper { --lsd-a: #6c5ce7; --lsd-up: #16c784; --lsd-dn: #ea3943; --lsd-r: 22px; --lsd-cols: 4; --lsd-bg: #12122a; --lsd-cd: #1c1c3a; --lsd-tx: #ffffff; --lsd-mu: #9c9cc0; --lsd-bd: rgba(255,255,255,0.08); width: 100%; box-sizing: border-box; font-family: inherit; color: var(--lsd-tx); background: var(--lsd-bg); border-radius: calc(var(--lsd-r) + 8px); padding: 28px; }
.ultrakit-lsd-wrapper *, .ultrakit-lsd-wrapper *::before, .ultrakit-lsd-wrapper *::after { box-sizing: border-box; }
.lsd-skin-light { --lsd-bg: #f5f4fc; --lsd-cd: #ffffff; --lsd-tx: #1a1a2e; --lsd-mu: #6b6b85; --lsd-bd: #e8e8f2; }
.lsd-skin-glass { --lsd-bg: linear-gradient(135deg, #2b1f6b, #0f4c81 60%, #0b6b6b); --lsd-cd: rgba(255,255,255,0.1); --lsd-bd: rgba(255,255,255,0.2); }
.ultrakit-lsd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.ultrakit-lsd-title { margin: 0; font-size: 22px; font-weight: 800; color: var(--lsd-tx); }
.ultrakit-lsd-live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 30px; background: color-mix(in srgb, var(--lsd-up) 16%, transparent); color: var(--lsd-up); font-size: 11.5px; font-weight: 900; letter-spacing: 1px; }
.ultrakit-lsd-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--lsd-up); animation: ukLsdPulse 1.6s infinite; }
@keyframes ukLsdPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lsd-up) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
.ultrakit-lsd-kpis { display: grid; grid-template-columns: repeat(var(--lsd-cols), minmax(0, 1fr)); gap: 16px; }
.ultrakit-lsd-kpi { position: relative; padding: 22px 22px 16px; background: var(--lsd-cd); border: 1px solid var(--lsd-bd); border-radius: var(--lsd-r); overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease; }
.ultrakit-lsd-kpi:hover { transform: translateY(-4px); border-color: var(--kc); }
.lsd-skin-light .ultrakit-lsd-kpi { box-shadow: 0 8px 26px rgba(20,20,50,0.05); }
.ultrakit-lsd-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ultrakit-lsd-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--kc) 16%, transparent); color: var(--kc); }
.ultrakit-lsd-ico svg { width: 22px; height: 22px; flex-shrink: 0; }
.ultrakit-lsd-trend { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 30px; font-size: 12.5px; font-weight: 800; }
.ultrakit-lsd-trend i { font-style: normal; font-size: 8px; } .ultrakit-lsd-trend em { font-style: normal; }
.ultrakit-lsd-trend.is-up { background: color-mix(in srgb, var(--lsd-up) 16%, transparent); color: var(--lsd-up); }
.ultrakit-lsd-trend.is-down { background: color-mix(in srgb, var(--lsd-dn) 16%, transparent); color: var(--lsd-dn); }
.ultrakit-lsd-val { font-size: 34px; font-weight: 900; line-height: 1.1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.ultrakit-lsd-label { margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--lsd-mu); }
.ultrakit-lsd-spark { display: block; width: calc(100% + 44px); height: 46px; margin: 12px -22px -16px; color: var(--kc); }
.ultrakit-lsd-spark .sl { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ultrakit-lsd-spark .sf { fill: currentColor; opacity: 0.14; stroke: none; }

.ultrakit-lsd-chart { margin-top: 16px; padding: 24px; background: var(--lsd-cd); border: 1px solid var(--lsd-bd); border-radius: var(--lsd-r); }
.ultrakit-lsd-chead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ultrakit-lsd-chead h4 { margin: 0; font-size: 17px; font-weight: 800; color: var(--lsd-tx); }
.ultrakit-lsd-legend { display: flex; gap: 18px; font-size: 12.5px; font-weight: 700; color: var(--lsd-mu); }
.ultrakit-lsd-legend span { display: inline-flex; align-items: center; gap: 7px; } .ultrakit-lsd-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--lsd-a); }
.ultrakit-lsd-legend .lb i { background: #00cec9; }
.ultrakit-lsd-plot { position: relative; height: 260px; }
.ultrakit-lsd-svg { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 26px); overflow: visible; cursor: crosshair; }
.ultrakit-lsd-svg .grid { stroke: var(--lsd-bd); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ultrakit-lsd-svg .line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-drawn .ultrakit-lsd-svg .line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1); }
.ultrakit-lsd-svg .area { opacity: 0; transition: opacity 1s ease 0.8s; } .is-drawn .ultrakit-lsd-svg .area { opacity: 1; }
.ultrakit-lsd-svg .guide { stroke: var(--lsd-mu); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: 0; }
.ultrakit-lsd-axis { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--lsd-mu); }
.ultrakit-lsd-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 3px solid var(--lsd-cd); background: var(--lsd-a); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.ultrakit-lsd-dot.b { background: #00cec9; }
.ultrakit-lsd-tip { position: absolute; top: 0; z-index: 5; min-width: 120px; padding: 10px 14px; border-radius: 12px; background: #0d0d20; color: #ffffff; font-size: 12.5px; line-height: 1.6; opacity: 0; pointer-events: none; transform: translateX(-50%); transition: opacity 0.15s ease; box-shadow: 0 12px 30px rgba(0,0,0,0.35); white-space: nowrap; }
.ultrakit-lsd-tip b { display: block; margin-bottom: 2px; font-size: 12px; opacity: 0.7; } .ultrakit-lsd-tip span { display: flex; align-items: center; gap: 7px; font-weight: 800; }
.ultrakit-lsd-tip i { width: 8px; height: 8px; border-radius: 50%; }
@media (max-width: 767px) { .ultrakit-lsd-wrapper { padding: 16px; } .ultrakit-lsd-val { font-size: 28px; } .ultrakit-lsd-plot { height: 210px; } }