/* Atelier batterie : compléments au design system de ../vesc/css/app.css */
.soc-hero { display: flex; align-items: center; gap: 16px; position: relative; overflow: hidden; background: linear-gradient(135deg, #ffffff, #f0fbfb); }
.soc-hero::after { content: ""; position: absolute; right: -50px; top: -50px; width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 205, 209, .22), transparent 70%); pointer-events: none; }
.ring.big { width: 150px; height: 150px; margin: 0; flex: none; }
.soc-side { flex: 1; min-width: 0; position: relative; z-index: 1; }
.soc-side .hm-value { font-size: 52px; }

.chip.state.on { background: #e6f6ec; border-color: transparent; color: var(--ok); }
.chip.state.on .dot { background: var(--ok); }
.chip.state.off { color: var(--muted); }
.chip.state.off .dot { background: var(--muted-2); }

.mini-cells { display: flex; align-items: flex-end; gap: 3px; height: 48px; margin-top: 14px; }
.mini-cells i { flex: 1; min-height: 3px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #5acdd1, #148a90); transition: height .5s ease; }
.mini-cells i.hi { background: var(--ok); }
.mini-cells i.lo { background: var(--warn); }

#cellStats { margin-bottom: 12px; }
.cell-bars { margin-top: 10px; }
.cell-row { display: grid; grid-template-columns: 34px 1fr 76px; gap: 10px; align-items: center; padding: 5px 0; }
.cell-n { font-size: 12px; font-weight: 700; color: var(--muted); }
.cell-bar { height: 12px; border-radius: 99px; background: var(--tile); border: 1px solid var(--line-soft); overflow: hidden; }
.cell-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #5acdd1, #148a90); transition: width .5s ease; }
.cell-row.hi .cell-bar i { background: var(--ok); }
.cell-row.lo .cell-bar i { background: var(--warn); }
.cell-v { font-family: var(--serif); font-size: 18px; text-align: right; font-variant-numeric: tabular-nums; }
#diffChart { width: 100%; height: 130px; display: block; }

.big-switch { align-items: center; padding: 12px 0; margin: 0; border-top: 1px solid var(--line-soft); }
.big-switch:first-of-type { border-top: 0; margin-top: 6px; }
.big-switch b { display: block; font-size: 16px; }
.big-switch small { display: block; font-size: 13px; color: var(--muted); }
.row-input { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.row-input .input-unit { flex: 1; }
.lock-card { text-align: center; }
.lock-card input { margin: 8px 0 12px; text-align: center; font-size: 20px; letter-spacing: .3em; }