.balance-control{margin:20px 0 28px;padding:24px 28px;border:1px solid var(--brand);border-radius:22px;background:var(--card);box-shadow:0 8px 28px #001c3815}
.balance-heading,.balance-ends{display:flex;justify-content:space-between;align-items:center;gap:16px}
.balance-heading label{font-size:1.2rem;font-weight:750;color:var(--ink);margin:0}
.balance-heading output{padding:8px 14px;border-radius:30px;background:var(--sunken);color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.balance-control input[type=range]{appearance:none;width:100%;height:12px;min-height:12px;margin:30px 0 22px;padding:0;border:0;border-radius:20px;background:linear-gradient(90deg,#087f8c 0%,#087f8c var(--balance,50%),var(--sunken) var(--balance,50%),var(--sunken) 100%);cursor:pointer;touch-action:pan-y}
.balance-control input::-webkit-slider-thumb{appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:4px solid #087f8c;box-shadow:0 2px 8px #001c3850}
.balance-control input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid #087f8c;box-shadow:0 2px 8px #001c3850}
.balance-control input:focus-visible{outline:3px solid var(--brand);outline-offset:10px}
.balance-control input:disabled{cursor:progress;opacity:.6}
.balance-ends{font-size:.9rem;font-weight:650;color:var(--ink)}
.balance-control p{font-size:.85rem;color:var(--muted);margin:12px 0 0}
#balanceStatus{min-height:1.4em;color:var(--ink);font-weight:600}
@media(max-width:600px){.balance-control{padding:20px}.balance-heading{align-items:flex-start;flex-direction:column}}