/* MTC Neon Energy Live v4 PRO - Neon tiles + sparklines + details (SVG only) */
.mtc-energy-wrap{ width:100%; }
.mtc-energy{ width:100%; color:#fff; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }

.mtc-energy__title{
  text-align:center; margin:0 0 10px; font-weight:900; letter-spacing:.12em;
  text-transform:uppercase; font-size:12px; opacity:.92;
  text-shadow:0 0 14px rgba(0,217,255,.50);
}
.mtc-energy__note{ text-align:center; margin:0 0 10px; font-size:11px; opacity:.72; }
.mtc-energy__meta{ text-align:center; margin:0 0 14px; font-size:11px; opacity:.70; }

.mtc-energy__grid{
  display:grid; grid-template-columns:repeat(var(--mtc-cols,4), minmax(0,1fr)); gap:16px;
}
@media (max-width:980px){ .mtc-energy__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .mtc-energy__grid{ grid-template-columns:1fr; } }

.mtc-energy__tile{
  position:relative; border-radius:18px; padding:18px 16px; text-align:center;
  background:rgba(10,6,34,.22);
  border:2px solid rgba(255,255,255,.16);
  overflow:hidden; min-height:132px;
  display:flex; flex-direction:column; justify-content:center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset, 0 0 22px rgba(0,217,255,.18), 0 0 28px rgba(255,43,214,.10);
  backdrop-filter: blur(10px);
}
.mtc-energy__tile::before{
  content:""; position:absolute; inset:-3px;
  background:linear-gradient(110deg, rgba(0,217,255,0) 0%, rgba(0,217,255,.45) 18%, rgba(255,43,214,.35) 34%, rgba(255,176,32,.25) 48%, rgba(0,217,255,0) 66%);
  opacity:.45; filter: blur(12px) saturate(1.8);
  transform: translateX(-55%); animation: mtcEnergySweep 4.2s linear infinite;
  pointer-events:none;
}
@keyframes mtcEnergySweep{ 0%{transform:translateX(-65%)} 100%{transform:translateX(65%)} }
.mtc-energy--lowpower .mtc-energy__tile::before{ animation:none; opacity:.20; }
.mtc-energy--lowpower .mtc-energy__tile{ backdrop-filter:none; }

.mtc-energy__k{ position:relative; z-index:1; font-weight:900; letter-spacing:.20em; text-transform:uppercase; font-size:11px; opacity:.92; }
.mtc-energy__v{ position:relative; z-index:1; margin-top:10px; font-size:18px; font-weight:900;
  text-shadow:0 0 18px rgba(0,217,255,.18), 0 0 18px rgba(255,43,214,.10);
}
.mtc-energy__sub{ position:relative; z-index:1; margin-top:6px; font-size:12px; opacity:.78; }
.mtc-energy__peak{ position:relative; z-index:1; margin-top:6px; font-size:11px; opacity:.72; }

.mtc-energy__spark{ position:relative; z-index:1; margin-top:10px; height:26px; width:100%; opacity:.95; }
.mtc-energy__spark svg{ width:100%; height:100%; display:block; }
.mtc-energy__spark polyline{ fill:none; stroke:rgba(0,217,255,.95); stroke-width:2; filter: drop-shadow(0 0 10px rgba(0,217,255,.30)); }
.mtc-energy__spark .alt polyline{ stroke:rgba(255,43,214,.85); filter: drop-shadow(0 0 10px rgba(255,43,214,.22)); }

.mtc-energy__details{
  margin-top:16px; padding:14px 14px; border-radius:18px;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 18px rgba(0,217,255,.12);
}
.mtc-energy__detailsHeader{
  display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  margin-bottom:10px;
}
.mtc-energy__pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(10,6,34,.18);
  font-size:11px; opacity:.9;
}
.mtc-energy__btn{
  cursor:pointer; user-select:none;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(10,6,34,.18);
  color:#fff; border-radius:14px;
  padding:8px 12px; font-weight:900; letter-spacing:.08em;
}
.mtc-energy__btn:hover{ filter: brightness(1.08); }
.mtc-energy__big{
  width:100%; height:180px; margin-top:10px;
}
.mtc-energy__big svg{ width:100%; height:100%; display:block; }
.mtc-energy__big polyline{ fill:none; stroke-width:2.2; }
.mtc-energy__big .l1{ stroke:rgba(0,217,255,.95); filter: drop-shadow(0 0 10px rgba(0,217,255,.22)); }
.mtc-energy__big .l2{ stroke:rgba(255,43,214,.85); filter: drop-shadow(0 0 10px rgba(255,43,214,.18)); }
.mtc-energy__big .l3{ stroke:rgba(255,176,32,.85); filter: drop-shadow(0 0 10px rgba(255,176,32,.16)); }
.mtc-energy__big .l4{ stroke:rgba(120,255,90,.80); filter: drop-shadow(0 0 10px rgba(120,255,90,.14)); }

.mtc-energy__debug{
  margin-top:12px; padding:10px 12px; border-radius:14px;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.14);
  font-size:11px; line-height:1.35; overflow:auto; max-height:220px;
}

/* MIX section */
.mtc-energy__mix{
  margin-top:16px; padding:14px; border-radius:18px;
  background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 18px rgba(255,43,214,.10);
}
.mtc-energy__mixBody{
  display:grid; grid-template-columns: 180px 1fr; gap:14px; align-items:center;
}
@media (max-width:720px){ .mtc-energy__mixBody{ grid-template-columns:1fr; } }
.mtc-energy__donut{ width:180px; height:180px; margin:0 auto; }
.mtc-energy__donut svg{ width:100%; height:100%; display:block; }
.mtc-energy__donut .bg{ stroke:rgba(255,255,255,.10); stroke-width:14; fill:none; }
.mtc-energy__donut .seg{ stroke-width:14; fill:none; filter: drop-shadow(0 0 10px rgba(0,217,255,.16)); }
.mtc-energy__mixList{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns: 1fr 1fr; gap:10px 12px;
}
@media (max-width:720px){ .mtc-energy__mixList{ grid-template-columns:1fr; } }
.mtc-energy__mixItem{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,6,34,.14);
  border-radius:14px; padding:10px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.mtc-energy__swatch{
  width:12px; height:12px; border-radius:99px; flex:0 0 auto;
  box-shadow: 0 0 14px rgba(0,217,255,.20);
}
.mtc-energy__mixName{ font-weight:900; font-size:12px; letter-spacing:.06em; opacity:.92; }
.mtc-energy__mixVal{ font-size:12px; opacity:.80; white-space:nowrap; }

.mtc-energy__mixNote{color:rgba(255,255,255,.85);}

.mtc-energy__mixToggle{
  border:1px solid rgba(255,255,255,.20);
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.92);
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow: 0 0 18px rgba(0,217,255,.10);
}
.mtc-energy__mixToggle:hover{
  box-shadow: 0 0 22px rgba(255,43,214,.12), 0 0 22px rgba(0,217,255,.12);
}


.mtc-energy__tilesWrap{ width:100%; }
.mtc-energy__tilesCtl{ text-align:center; margin:10px 0; }