/* eq.css — Equation Balancer specifics (theme + controls from chem.css) */
.eq-pick{margin-top:8px;}
.eq-pick-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ch-dim);margin-bottom:6px;}
.eq-chips{display:flex;flex-wrap:wrap;gap:6px;}
.eq-chips .chem-chip{font-size:12.5px;}

/* equation row */
.eq-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 4px;margin:18px 0 8px;
  background:linear-gradient(180deg,rgba(20,30,64,.5),rgba(11,18,38,.5));border:1px solid var(--ch-line);
  border-radius:16px;padding:16px;justify-content:center;}
.eq-species{display:flex;flex-direction:column;align-items:center;gap:6px;}
.eq-stepper{display:flex;align-items:center;gap:4px;}
.eq-cbtn{width:26px;height:26px;border-radius:7px;border:1px solid var(--ch-line);background:#111a38;color:#fff;
  font-size:16px;line-height:1;cursor:pointer;transition:.12s;}
.eq-cbtn:hover{background:#1a2650;border-color:rgba(140,180,255,.6);}
.eq-coef{min-width:26px;text-align:center;font-size:20px;font-weight:800;color:#ffd43b;font-variant-numeric:tabular-nums;}
.eq-coef.one{color:var(--ch-faint);font-weight:600;}
.eq-formula{font-size:26px;font-weight:600;letter-spacing:.5px;color:var(--ch-ink);}
.eq-formula sub{font-size:.62em;font-weight:600;}
.eq-plus,.eq-arrow{font-size:24px;color:var(--ch-dim);padding:0 4px 6px;align-self:flex-end;}
.eq-arrow{color:#8fe0ff;font-size:28px;}

/* status banner */
.eq-banner{background:var(--ch-bg2);border:1px solid var(--ch-line);border-radius:14px;padding:14px 16px;margin:8px 0;}
.eq-banner.ok{border-color:rgba(160,240,96,.4);background:linear-gradient(100deg,rgba(20,40,25,.6),rgba(15,30,20,.5));}
.eq-bhead{font-size:16px;font-weight:700;display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.eq-banner.ok .eq-bhead{color:#b6f08a;}
.eq-type{font-size:13px;font-weight:400;color:var(--ch-dim);}
.eq-type b{color:#8fe0ff;font-weight:700;}
.eq-bsub{font-size:13.5px;color:#d7e0fb;margin-top:5px;line-height:1.5;}
.eq-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}

/* molecule view */
.eq-molview{margin:14px 0;}
.eq-molhead{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ch-dim);margin-bottom:8px;}
.eq-molstage{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:radial-gradient(120% 120% at 50% 0,#0c1734,#070c1c);
  border:1px solid var(--ch-line);border-radius:16px;padding:16px;}
.eq-molside{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0;justify-content:center;align-content:center;}
.eq-molarrow{font-size:26px;color:#8fe0ff;flex:0 0 auto;}
.eq-mol{display:inline-flex;gap:2px;padding:5px;border-radius:12px;background:rgba(255,255,255,.04);
  border:1px solid var(--ch-line);animation:eqfloat 4s ease-in-out infinite;}
.eq-molstage.balanced .eq-mol{border-color:rgba(160,240,96,.3);}
@keyframes eqfloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@media (prefers-reduced-motion:reduce){.eq-mol{animation:none;}}
.eq-atom{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;box-shadow:0 0 8px -2px currentColor,inset 0 2px 4px rgba(255,255,255,.25);}

/* tally table */
.eq-tally{background:var(--ch-bg2);border:1px solid var(--ch-line);border-radius:14px;overflow:hidden;margin-top:8px;}
.eq-tally-head,.eq-tally-row{display:grid;grid-template-columns:2fr 1fr 1fr .6fr;align-items:center;padding:8px 14px;}
.eq-tally-head{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ch-dim);border-bottom:1px solid var(--ch-line);}
.eq-tally-row{border-top:1px solid rgba(120,150,220,.08);font-size:15px;font-variant-numeric:tabular-nums;}
.eq-tally-row span:nth-child(2),.eq-tally-row span:nth-child(3){text-align:center;}
.eq-elem{display:flex;align-items:center;gap:8px;font-weight:600;}
.eq-elem i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 6px currentColor;}
.eq-check{text-align:center;font-weight:800;}
.eq-tally-row.ok .eq-check{color:#a0f060;}
.eq-tally-row.bad .eq-check{color:#ff6b6b;}
.eq-tally-row.bad{background:rgba(255,80,80,.05);}

@media (max-width:520px){
  .eq-formula{font-size:22px;} .eq-coef{font-size:18px;}
  .eq-atom{width:22px;height:22px;font-size:9px;}
}