/* Maitronics Cell Balancing Explorer. All rules are scoped to .mtcb. */
.mtcb{
	--b:#1f77c4; --bb:#17aff9; --navy:#001328; --panel:#04203f; --line:#123a66;
	--ink:#fff; --ink2:#b9c6dc; --mute:#8ea3c4; --warn:#ff6b6b;
	container-type:inline-size;
	box-sizing:border-box;
	background:linear-gradient(135deg,var(--navy),#062a55);
	color:var(--ink);
	border-radius:16px;
	padding:24px;
	margin:24px 0;
	font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
	font-size:15px;
	line-height:1.5;
	letter-spacing:normal;
	text-align:left;
}
.mtcb *,.mtcb *::before,.mtcb *::after{box-sizing:border-box}
.mtcb p{margin:0}
.mtcb b{font-weight:600}

.mtcb .mtcb-title{font-size:22px;font-weight:800;letter-spacing:-.01em;margin-bottom:14px}

/* buttons: every property set, so theme button styles cannot leak in */
.mtcb button{font-family:inherit;letter-spacing:normal;text-transform:none;box-shadow:none;margin:0;cursor:pointer;line-height:1.3;min-height:0;width:auto}
.mtcb .mtcb-exps{display:flex;flex-wrap:wrap;gap:8px}
.mtcb button.mtcb-exp{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);color:var(--ink2);border:1px solid var(--line);border-radius:99px;padding:7px 14px 7px 7px;font-size:13.5px;font-weight:500}
.mtcb button.mtcb-exp b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--line);color:#fff;font-size:12px}
.mtcb button.mtcb-exp:hover{border-color:var(--bb);color:#fff;background:rgba(255,255,255,.05)}
.mtcb button.mtcb-exp.is-on{background:var(--b);border-color:var(--b);color:#fff}
.mtcb button.mtcb-exp.is-on b{background:#fff;color:var(--b)}
.mtcb .mtcb-hint{margin-top:14px;color:var(--ink2);font-size:15px;max-width:900px}

.mtcb .mtcb-main{display:grid;grid-template-columns:1fr;gap:16px;margin-top:18px}
@container (min-width:860px){.mtcb .mtcb-main{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.mtcb .mtcb-panel,.mtcb .mtcb-runs{background:rgba(0,13,28,.72);border:1px solid var(--line);border-radius:12px;padding:14px 16px 16px;min-width:0}
.mtcb .mtcb-panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--mute);margin-bottom:12px;min-height:30px}
.mtcb .mtcb-panel__head > span:first-child{color:#fff;font-weight:600}

/* cells */
.mtcb .mtcb-cells{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.mtcb .mtcb-cell{text-align:center;min-width:0}
.mtcb .mtcb-cell__v{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.mtcb .mtcb-cell__bar{position:relative;height:190px;margin:6px auto;max-width:54px;border:1.5px solid #2a5a94;border-radius:8px;background:#00101f;overflow:hidden}
.mtcb .mtcb-cell__bar::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to top,transparent 0 18px,rgba(143,163,196,.14) 18px 19px);z-index:1;pointer-events:none}
.mtcb .mtcb-cell__fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(to top,#1f77c4,#17aff9)}
.mtcb .mtcb-cell.is-bal .mtcb-cell__bar{border-color:#fff;box-shadow:0 0 0 2px rgba(23,175,249,.45)}
.mtcb .mtcb-cell.is-bal .mtcb-cell__fill{background:repeating-linear-gradient(-45deg,#17aff9 0 7px,#8fd6fd 7px 14px);background-size:200% 200%;animation:mtcb-move 1.2s linear infinite}
@keyframes mtcb-move{to{background-position:28px 0}}
.mtcb .mtcb-cell.is-limit .mtcb-cell__bar{border-color:var(--warn)}
.mtcb .mtcb-cell__flag{position:absolute;left:0;right:0;top:6px;z-index:2;font-size:10px;font-weight:700;letter-spacing:.06em;color:#fff}
.mtcb .mtcb-cell.is-limit .mtcb-cell__flag{background:var(--warn);color:#2a0000;margin:0 5px;border-radius:4px;padding:1px 0}
.mtcb .mtcb-cell__name{font-size:12.5px;color:var(--ink2)}
.mtcb .mtcb-cell.is-hi .mtcb-cell__name,.mtcb .mtcb-cell.is-lo .mtcb-cell__name{color:#fff;font-weight:600}
.mtcb .mtcb-cell__soc{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.mtcb .mtcb-cell__note{font-size:11px;color:var(--bb);min-height:16px;white-space:nowrap}

/* chart */
.mtcb .mtcb-chart{position:relative;height:238px}
.mtcb .mtcb-chart canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mtcb .mtcb-tip{position:absolute;z-index:3;background:#fff;color:#14213a;border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.45;box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:none;min-width:128px}
.mtcb .mtcb-tip strong{display:block;margin-bottom:2px}
.mtcb .mtcb-tip div{display:flex;justify-content:space-between;gap:14px;font-variant-numeric:tabular-nums}
.mtcb .mtcb-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:12px;color:var(--ink2)}
.mtcb .mtcb-legend span{display:inline-flex;align-items:center;gap:6px}
.mtcb .mtcb-k{display:inline-block;width:18px;height:0;border-top:2px solid rgba(143,163,196,.7)}
.mtcb .mtcb-k--hi{border-top:3px solid var(--bb)}
.mtcb .mtcb-k--lo{border-top:2px solid #fff}
.mtcb .mtcb-k--lim{border-top:2px dashed var(--warn)}

/* numbers */
.mtcb .mtcb-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
@container (min-width:560px){.mtcb .mtcb-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:860px){.mtcb .mtcb-stats{grid-template-columns:repeat(6,minmax(0,1fr))}}
.mtcb .mtcb-stat{background:rgba(0,13,28,.72);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.mtcb .mtcb-stat span{display:block;font-size:12px;color:var(--mute)}
.mtcb .mtcb-stat b{display:block;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

.mtcb .mtcb-status{margin-top:14px;padding:12px 14px;border-left:3px solid var(--bb);background:rgba(23,175,249,.10);border-radius:0 8px 8px 0;font-size:15px;min-height:46px}

/* controls */
.mtcb .mtcb-controls{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;margin-top:16px}
.mtcb .mtcb-ctl label{display:block;font-size:12px;color:var(--mute);margin:0 0 6px;font-weight:400}
.mtcb .mtcb-ctl label b{color:#fff;margin-left:6px}
.mtcb .mtcb-ctl--grow{flex:1 1 180px;min-width:160px}
.mtcb .mtcb-ctl--btns{display:flex;gap:8px;margin-left:auto}
.mtcb .mtcb-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:rgba(0,13,28,.6)}
.mtcb button.mtcb-seg__b{background:transparent;color:var(--ink2);border:0;border-radius:0;padding:8px 12px;font-size:13.5px;font-weight:500}
.mtcb button.mtcb-seg__b + .mtcb-seg__b{border-left:1px solid var(--line)}
.mtcb button.mtcb-seg__b:hover{background:rgba(255,255,255,.06);color:#fff}
.mtcb button.mtcb-seg__b.is-on{background:var(--b);color:#fff}
.mtcb button.mtcb-btn{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35);border-radius:8px;padding:9px 20px;font-size:14.5px;font-weight:600}
.mtcb button.mtcb-btn:hover{border-color:#fff;background:transparent;color:#fff}
.mtcb button.mtcb-btn--main{background:var(--bb);border-color:var(--bb);color:#001328;min-width:104px}
.mtcb button.mtcb-btn--main:hover{background:#4cc2fb;border-color:#4cc2fb;color:#001328}
.mtcb button:focus-visible,.mtcb input:focus-visible{outline:2px solid #fff;outline-offset:2px}

.mtcb input.mtcb-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:4px;margin:13px 0 12px;padding:0;border:0;border-radius:4px;background:#1e3559;cursor:pointer}
.mtcb input.mtcb-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--bb)}
.mtcb input.mtcb-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--bb)}
.mtcb input.mtcb-range:disabled{opacity:.4;cursor:default}

/* finished runs */
.mtcb .mtcb-runs{margin-top:16px}
.mtcb button.mtcb-link{background:none;border:0;padding:0;color:var(--bb);font-size:13px;font-weight:500}
.mtcb button.mtcb-link:hover{background:none;color:#fff}
.mtcb .mtcb-tablewrap{overflow-x:auto}
.mtcb .mtcb-runs table{width:100%;border-collapse:collapse;margin:0;border:0;font-size:13.5px;font-variant-numeric:tabular-nums;background:none}
.mtcb .mtcb-runs table th,.mtcb .mtcb-runs table td{border:0;border-bottom:1px solid var(--line);padding:7px 14px 7px 0;text-align:left;white-space:nowrap;background:none;color:#fff;font-size:13.5px}
.mtcb .mtcb-runs table th{color:var(--mute);font-weight:500;font-size:12px}
.mtcb .mtcb-runs table tr:last-child td{border-bottom:0}

.mtcb .mtcb-foot{margin-top:14px;font-size:12px;color:var(--mute)}

@container (max-width:520px){
	.mtcb .mtcb-cells{gap:5px}
	.mtcb .mtcb-cell__v{font-size:11px}
	.mtcb .mtcb-cell__soc{font-size:12px}
	.mtcb .mtcb-cell__name{font-size:11px}
	.mtcb .mtcb-cell__note{font-size:9.5px}
	.mtcb .mtcb-u{display:none}
	.mtcb .mtcb-cell__bar{height:150px}
	.mtcb .mtcb-ctl--btns{margin-left:0;width:100%}
	.mtcb .mtcb-ctl--btns button{flex:1}
}
@media (max-width:600px){.mtcb{padding:16px;border-radius:12px}}
@media (prefers-reduced-motion:reduce){.mtcb .mtcb-cell.is-bal .mtcb-cell__fill{animation:none}}