.peptide-calculator-wrap{font-family:Inter,Arial,sans-serif;background:#f8fafc;color:#0f172a;padding:20px 10px;overflow:hidden;width:100%}
.container{max-width:1300px;margin:auto}
.hero{text-align:center;margin-bottom:40px}
.hero h1{font-size:54px;font-weight:800}
.hero p{margin-top:10px;color:#64748b;font-size:18px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:28px;padding:30px;box-shadow:0 12px 40px rgba(0,0,0,.06)}
.toggle,.selector-group{display:flex;gap:12px;flex-wrap:wrap}.selector-group{margin-top:8px}
.chip,.selector{border:none;border-radius:999px;padding:12px 18px;background:#eef2ff;cursor:pointer;font-weight:700}.toggle .chip{flex:1;text-align:center;min-width:140px;}
.active{background:#2563eb;color:#fff}
.custom{display:none;margin-top:10px;padding:12px;border:1px solid #dbe3ef;border-radius:12px;width:180px}
.section{margin-bottom:32px}
.results{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.result{background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;padding:16px}
.k{font-size:13px;color:#64748b}.v{font-size:34px;font-weight:800;color:#2563eb}
#syringeSVG{width:100%;height:auto}
.reading{text-align:center;font-size:52px;font-weight:900;color:#2563eb;margin-top:16px;line-height:1}
.action{width:100%;padding:14px;border:none;border-radius:14px;background:#2563eb;color:#fff;font-weight:700;cursor:pointer}

#calcWarning{
display:block;
margin-top:20px;
}

.warning{
padding:14px 18px;
border-radius:12px;
font-weight:600;
text-align:center;
}

.warning-yellow{
background:#fff8e1;
border:1px solid #facc15;
color:#92400e;
}

.warning-red{
background:#fef2f2;
border:1px solid #ef4444;
color:#991b1b;
}


@media (max-width: 900px){
  .grid{
    grid-template-columns:1fr !important;
    gap:20px;
  }
  .results{
    grid-template-columns:1fr !important;
  }
  .card{
    padding:20px;
  }
  .selector-group{
    gap:8px;
  }
  .selector,.chip{
    min-width:auto;
    padding:12px 16px;
  }
  .v{
    font-size:28px;
  }
  .reading{
    font-size:42px;
  }
}

.peptide-calculator-wrap .container{max-width:100%;width:100%;}
.peptide-calculator-wrap,.peptide-calculator-wrap *{box-sizing:border-box;}

@media screen and (max-width:1024px){
 .grid{grid-template-columns:1fr !important;}
 .results{grid-template-columns:1fr !important;}
 .selector-group{
   display:grid !important;
   grid-template-columns:repeat(2,minmax(0,1fr));
   gap:12px !important;
 }
 .selector{
   width:100%;
   min-width:0 !important;
 }
 .toggle{
   display:grid !important;
   grid-template-columns:1fr 1fr;
   gap:10px;
 }
 .toggle .chip{
   width:100%;
   min-width:0 !important;
 }
 .hero h1{
   font-size:42px !important;
 }
 .reading{
   font-size:42px !important;
 }
 .card{
   padding:18px !important;
 }
}

.warning{margin-top:15px;padding:14px 18px;border-radius:12px;font-weight:600}.warning-yellow{background:#fff8e1;border:1px solid #facc15;color:#92400e}.warning-red{background:#fef2f2;border:1px solid #ef4444;color:#991b1b}