/* =============================================================
   PEPTIDE DOSE CALCULATOR  ·  "kc-" namespace, scoped to #vCalc
   Re-skinned to the Voltage theme (cobalt + lime, near-black).
   Loaded AFTER voltage.css.
   ============================================================= */

#vCalc .wrap{max-width:560px}
#vCalc .kc-hidden{display:none !important}

/* step section headers (① ② ③) */
.kc-stl{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--lime2,var(--gold2));margin:24px 2px 13px;display:flex;align-items:center;gap:10px}
.kc-stl .kc-no{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;
  background:rgba(185,242,58,.12);color:var(--lime2,var(--gold2));font-size:11px;flex-shrink:0}
.kc-stl::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
#vCalc .hello{margin-bottom:6px}

/* ---- objectives ---- */
.kc-og{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.kc-ob{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line2);
  color:var(--txt2);padding:9px 14px;border-radius:12px;font-size:13px;font-weight:600;font-family:var(--sans);
  transition:border-color .15s,background .15s,color .15s,transform .12s}
.kc-ob:hover{border-color:var(--blue);color:var(--txt)}
.kc-ob:active{transform:scale(.96)}
.kc-ob.on{background:rgba(74,118,255,.13);border-color:var(--blue);color:var(--blue2);box-shadow:0 0 0 3px var(--blueglow)}
.kc-ob .kc-emo{font-size:15px;line-height:1}

/* ---- peptide list ---- */
.kc-ps{display:flex;flex-direction:column;gap:16px}
.kc-pgt{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.kc-pl{display:flex;flex-direction:column;gap:8px}
.kc-pi{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line2);border-radius:14px;
  padding:13px 16px;transition:border-color .15s,background .15s,transform .12s,box-shadow .15s}
.kc-pi:hover{border-color:var(--blue)}
.kc-pi:active{transform:scale(.99)}
.kc-pi.on{border-color:var(--blue);background:rgba(74,118,255,.08);box-shadow:0 0 0 3px var(--blueglow)}
.kc-pi.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--blue2),var(--blue))}
.kc-pn{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--txt);letter-spacing:-.1px}
.kc-pd{font-family:var(--mono);font-size:11px;color:var(--txt2);margin-top:3px;letter-spacing:.2px}

/* ---- form ---- */
.kc-fs{background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:18px;margin-bottom:14px;
  box-shadow:var(--card-shadow)}
.kc-fd{margin-bottom:15px}
.kc-fd:last-child{margin-bottom:0}
.kc-fd>label{display:block;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--txt2);margin-bottom:8px;font-weight:700}
.kc-fd input{width:100%;background:var(--bg2);border:1.5px solid var(--line2);color:var(--txt);
  padding:13px 15px;border-radius:12px;font-size:16px;font-family:var(--mono);font-weight:700;outline:none;
  transition:border-color .15s,box-shadow .15s}
.kc-fd input:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--blueglow)}
.kc-ht{font-size:11.5px;color:var(--muted);margin-top:7px;font-family:var(--sans);line-height:1.45}

/* syringe selector */
.kc-sb{display:flex;gap:8px}
.kc-sbt{flex:1;background:var(--bg2);border:1.5px solid var(--line2);color:var(--txt2);padding:11px 4px;border-radius:11px;
  font-size:11.5px;font-family:var(--mono);font-weight:700;text-align:center;line-height:1.35;
  transition:border-color .15s,background .15s,color .15s}
.kc-sbt:active{transform:scale(.97)}
.kc-sbt.on{background:rgba(74,118,255,.13);border-color:var(--blue);color:var(--blue2)}

/* calculate button — reuses the app's btnSheen */
.kc-cbtn{position:relative;overflow:hidden;width:100%;margin-top:2px;border:none;
  background:linear-gradient(180deg,var(--blue2),var(--blue));color:#fff;
  padding:15px;border-radius:14px;font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:1.5px;
  text-transform:uppercase;box-shadow:0 12px 30px var(--blueglow);transition:transform .12s,filter .15s}
.kc-cbtn:hover{filter:brightness(1.06)}
.kc-cbtn:active{transform:scale(.985)}
.kc-cbtn:disabled{opacity:.32;box-shadow:none;filter:none;cursor:not-allowed}
.kc-cbtn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);animation:btnSheen 3.6s var(--ease,ease) infinite}
.kc-cbtn:disabled::after{display:none}

/* ---- result card ---- */
.kc-rc{background:linear-gradient(165deg,rgba(74,118,255,.10),var(--panel) 58%);border:1px solid var(--line2);
  border-radius:20px;padding:22px 20px;margin-top:6px;box-shadow:var(--card-shadow)}
.kc-res-head{text-align:center;margin-bottom:6px}
.kc-res-head span{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--blue2)}
.kc-syr-wrap{display:flex;flex-direction:column;align-items:center;padding:6px 0}
#kc-syr-svg{width:100%;max-width:480px;height:auto}
.kc-syr-num{text-align:center;margin-top:10px}
.kc-syr-num .kc-lbl{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px}
.kc-big{font-family:var(--mono);font-weight:700;font-size:54px;line-height:1;color:var(--blue2);letter-spacing:-1.5px}
.kc-unit{font-family:var(--mono);font-size:12px;color:var(--txt2);margin-top:3px;letter-spacing:.5px}
.kc-ml{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:3px}

/* result rows */
.kc-rr{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--line)}
.kc-rr:last-child{border-bottom:none}
.kc-rl{font-size:13px;color:var(--txt2);font-family:var(--sans)}
.kc-rv{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--txt);text-align:right}
.kc-rv.w{color:var(--danger)}
#kc-res-rows{margin-top:16px}

/* warning */
.kc-warn{background:rgba(255,94,114,.10);border:1px solid rgba(255,94,114,.34);border-radius:12px;padding:11px 14px;
  margin:16px 0 2px;text-align:center;color:var(--danger);font-size:12.5px;font-weight:600;font-family:var(--sans);line-height:1.5}

/* info callout */
.kc-ic{background:rgba(74,118,255,.05);border-left:3px solid var(--blue);border-radius:0 12px 12px 0;padding:13px 15px}
.kc-ic p{font-size:12.5px;color:var(--txt2);line-height:1.6;font-family:var(--sans)}
.kc-ic strong{color:var(--blue2)}

/* solvent table */
.kc-solv{margin-top:18px}
.kc-solv-t{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);
  margin-bottom:9px;font-weight:700}
.kc-st{width:100%;border-collapse:collapse;font-size:11.5px;font-family:var(--sans)}
.kc-st th{text-align:left;color:var(--blue2);font-family:var(--mono);font-weight:700;padding:7px 8px;
  border-bottom:1px solid var(--line2);font-size:9.5px;text-transform:uppercase;letter-spacing:.8px}
.kc-st td{padding:9px 8px;color:var(--txt2);border-bottom:1px solid var(--line);vertical-align:top}
.kc-st td:first-child{color:var(--txt);font-weight:600;white-space:nowrap}
.kc-st .kc-st-best{font-size:10.5px}

/* reset */
.kc-reset-wrap{text-align:center}
.kc-rst{background:var(--panel);border:1px solid var(--line2);color:var(--txt2);padding:11px 22px;border-radius:12px;
  font-family:var(--sans);font-size:13px;font-weight:600;margin-top:18px;transition:border-color .15s,color .15s}
.kc-rst:hover{border-color:var(--blue);color:var(--blue2)}

/* disclaimer */
.kc-dis{text-align:center;font-size:11px;color:var(--muted);margin-top:26px;padding:16px 8px 4px;
  border-top:1px solid var(--line);line-height:1.65;font-family:var(--sans)}

/* step fade-in */
@keyframes kcFi{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
#vCalc .kc-step:not(.kc-hidden){animation:kcFi .35s var(--ease,ease-out)}

/* ---------- ficha shortcut CTA (lives in the #pept overlay) ---------- */
.pcalc-cta{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  margin:2px 0 20px;padding:15px 16px;border-radius:16px;
  background:linear-gradient(135deg,rgba(74,118,255,.16),rgba(74,118,255,.05));
  border:1px solid var(--blue);box-shadow:0 10px 26px var(--blueglow);
  transition:transform .12s,box-shadow .15s,filter .15s}
.pcalc-cta:hover{filter:brightness(1.05);box-shadow:0 14px 32px var(--blueglow)}
.pcalc-cta:active{transform:scale(.99)}
.pcalc-ic{flex-shrink:0;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--blue2),var(--blue));color:#fff;box-shadow:0 6px 16px var(--blueglow)}
.pcalc-ic svg{width:23px;height:23px}
.pcalc-tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.pcalc-tx b{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--txt);letter-spacing:-.1px}
.pcalc-tx i{font-style:normal;font-size:12px;color:var(--txt2);font-family:var(--sans)}
.pcalc-go{flex-shrink:0;font-family:var(--mono);font-size:20px;color:var(--blue2);font-weight:700;transition:transform .15s}
.pcalc-cta:hover .pcalc-go{transform:translateX(3px)}

/* ---- 7-tab bottom bar: keep labels from wrapping ---- */
#tabbar .tab span{white-space:nowrap;font-size:10px;letter-spacing:.2px}
#tabbar .tab{padding:0 2px}
@media(min-width:520px){#tabbar .tab span{font-size:11px}}