.attral-sim{
  --bg:#0b1020; --panel:#121a33; --line:#2a6b5f; --active:#00ff9a; --accent:#69f0ae;
  --warn:#ffb74d; --text:#e6f3ee; --muted:#95a3b2;
  color: var(--text);
  background: transparent;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
}
.attral-sim .wrap{
  max-width:1100px; margin:24px auto; padding:16px;
  background: radial-gradient(1200px 600px at 70% -10%, #16203f 0%, var(--bg) 50%);
  border-radius: 16px; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.attral-sim h1{font-weight:700; letter-spacing:.3px; font-size:clamp(20px,3.3vw,32px); margin:12px 4px 20px; color:var(--text);}
.attral-sim .grid{display:grid; grid-template-columns: 360px 1fr; gap:16px; align-items:stretch}
.attral-sim .card{background:linear-gradient(180deg, #151d3a, var(--panel)); border:1px solid #1e2950; border-radius:16px; box-shadow:0 10px 30px #0006; padding:16px; color:var(--text)}
.attral-sim .card h2{font-size:16px; margin:0 0 10px; font-weight:700; color:var(--accent)}
.attral-sim .controls label{display:block; margin:14px 0 6px; font-size:13px; color:var(--muted)}
.attral-sim .row{display:flex; gap:8px; align-items:center; justify-content:space-between}
.attral-sim input[type="range"]{width:100%}
.attral-sim .value{min-width:56px; text-align:right; font-variant-numeric:tabular-nums}
.attral-sim .chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid #224; background:#0e1630}
.attral-sim .led{width:10px; height:10px; border-radius:50%; background:#2b3a55; box-shadow:0 0 0 2px #0c1023 inset}
.attral-sim .led.on{background:var(--active); box-shadow:0 0 0 2px #00ff9a inset, 0 0 16px var(--active)}
.attral-sim button{all:unset; padding:10px 14px; background:#0e1630; border:1px solid #204; border-radius:10px; cursor:pointer; color:var(--text)}
.attral-sim button:hover{background:#122150}
.attral-sim .schema{position:relative; aspect-ratio: 16/9; background: radial-gradient(1000px 500px at 40% 20%, #0f1834 0%, #0b1020 55%); border-radius:14px; overflow:hidden;}
.attral-sim .legend{position:absolute; right:14px; top:10px; display:flex; gap:8px; align-items:center; font-size:12px; color:var(--muted)}
.attral-sim .legend .arrow{width:24px; height:10px; background:repeating-linear-gradient(90deg, var(--active) 0 6px, transparent 6px 12px); mask:linear-gradient(90deg, #000, transparent 80%);}
.attral-sim .display{margin-top:8px; display:grid; grid-template-columns: repeat(3,1fr); gap:8px}
.attral-sim .seven{background:#061022; border:1px solid #1a2755; border-radius:10px; padding:10px 12px; text-align:center}
.attral-sim .seven .label{font-size:11px; color:var(--muted); letter-spacing:.5px}
.attral-sim .seven .num{font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:22px; color:#d6ffe9; text-shadow:0 0 12px #00ff9540}
/* wires & dynamic current visuals */
.attral-sim .wire{stroke:var(--line); stroke-width:4; fill:none}
.attral-sim .wire.hot{stroke:var(--active); filter: drop-shadow(0 0 8px #00ff9a88)}
.attral-sim .flow{stroke-dasharray:14 14; animation:flow 1.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-28}}
.attral-sim .module{fill:#122046; stroke:#2a3c7a; stroke-width:2}
.attral-sim .module-title{font-size:12px; letter-spacing:.3px; fill:#a6ffec}
.attral-sim .cell{fill:#0f2a2f; stroke:#0b4d3e; stroke-width:2}
.attral-sim .cell.charge{fill:#0a3b31}
.attral-sim .note{fill:#9ad6c3; font-size:11px}
.attral-sim .badge{position:absolute; left:12px; top:10px; padding:6px 10px; background:#071225; border:1px solid #1a2d66; border-radius:999px; color:#a1f3da; font-size:12px}
.attral-sim .footer{opacity:.8; margin-top:8px; font-size:12px; color:#9fb3c1}
.attral-sim .inline{display:inline-flex; gap:10px; align-items:center}
.attral-sim .bar{height:9px; width:140px; border-radius:999px; background:#09132a; border:1px solid #1a2d66; overflow:hidden}
.attral-sim .fill{height:100%; width:0%; background:linear-gradient(90deg, #0aff9e, #32ffc1); box-shadow:0 0 16px #00ff9a66}

/* 📈 Chart styles */
.attral-sim .chart-wrap{
  position:relative; width:100%; height:320px; 
  background:#0b142d; border:1px solid #1c2b60; border-radius:12px; overflow:hidden;
}
.attral-sim canvas[data-id="currentChart"]{width:100%; height:100%; display:block;}
.attral-sim .chart-legend{
  position:absolute; left:10px; top:8px; display:flex; gap:10px; align-items:center;
  font-size:12px; color:#bfeede; background:#09132a80; padding:6px 10px; border-radius:999px; border:1px solid #18305f;
}
.attral-sim .chart-legend .dot{width:10px; height:10px; border-radius:50%; background:#00ff9a; box-shadow:0 0 10px #00ff9a;}
.attral-sim .chart-legend .right{margin-left:auto; color:#9bbad1}