#mb-glucose-tool{
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --shadow: 0 18px 45px rgba(17,24,39,.08);
  --shadow2: 0 10px 24px rgba(17,24,39,.08);
  --radius:18px;
  --green:#7bbf24;
  --green2:#67a91b;}#mb-glucose-tool *{ box-sizing:border-box;}#mb-glucose-tool{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);}#mb-glucose-tool .mb-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 18px 70px;}#mb-glucose-tool .kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--green2);
  font-size: 12px;}#mb-glucose-tool .kicker::before{
  content:"";
  display:inline-block;
  width:2px;
  height:14px;
  background: var(--green2);
  border-radius:2px;}#mb-glucose-tool h1{
  margin: 10px 0 10px;
  font-size: clamp(30px, 4vw, 46px);
  line-height:1.08;
  letter-spacing:-0.02em;}#mb-glucose-tool .lead{
  margin: 0 0 18px;
  color: var(--muted);
  max-width: 78ch;
  line-height:1.6;}#mb-glucose-tool .panel{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-top: 18px;}#mb-glucose-tool .tip{
  background: #111;
  color:#fff;
  border-radius: 14px;
  padding: 14px 16px;
  line-height:1.55;
  font-size: 14px;}#mb-glucose-tool .tip code{
  color:#fff;
  background: rgba(255,255,255,.08);
  padding: 2px 6px;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}#mb-glucose-tool .tip .pink{ color:#ff4fa3;}#mb-glucose-tool .grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;}@media (max-width: 980px){#mb-glucose-tool .grid{ grid-template-columns: 1fr;}}#mb-glucose-tool .card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 18px;}#mb-glucose-tool .card h2{
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing:-0.01em;}#mb-glucose-tool .label{
  display:block;
  font-size: 13px;
  color: var(--muted);
  margin: 12px 0 6px;}#mb-glucose-tool .row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;}@media (max-width: 520px){#mb-glucose-tool .row{ grid-template-columns: 1fr;}}#mb-glucose-tool input, #mb-glucose-tool select, #mb-glucose-tool button{
  font: inherit;}#mb-glucose-tool input[type="text"], #mb-glucose-tool input[type="number"], #mb-glucose-tool select{
  width:100%;
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 12px 12px;
  outline:none;
  background:#fff;}#mb-glucose-tool input[type="text"]:focus, #mb-glucose-tool input[type="number"]:focus, #mb-glucose-tool select:focus{
  border-color: rgba(123,191,36,.65);
  box-shadow: 0 0 0 4px rgba(123,191,36,.15);}#mb-glucose-tool .foodBox{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;}#mb-glucose-tool .foodList{
  width:100%;
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  height: 260px;
  background:#fff;}#mb-glucose-tool .smallNote{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;}#mb-glucose-tool .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  border:none;
  border-radius: 12px;
  padding: 12px 14px;
  cursor:pointer;
  font-weight: 700;
  letter-spacing:.01em;}#mb-glucose-tool .btn.primary{
  background: var(--green);
  color:#0b1b0b;}#mb-glucose-tool .btn.primary:hover{ background: var(--green2);}#mb-glucose-tool .btn.ghost{
  background: #eef2f7;
  color:#111827;}#mb-glucose-tool .btn.ghost:hover{ background:#e6ebf3;}#mb-glucose-tool .actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 12px;}#mb-glucose-tool .outGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;}@media (max-width: 520px){#mb-glucose-tool .outGrid{ grid-template-columns: 1fr;}}#mb-glucose-tool .metric{
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background:#fff;}#mb-glucose-tool .metric .mLabel{
  display:flex;
  gap: 8px;
  align-items:center;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;}#mb-glucose-tool .metric .mValue{
  font-size: 28px;
  font-weight: 800;
  letter-spacing:-0.02em;}#mb-glucose-tool .metric .mValue small{
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
  margin-left: 6px;}#mb-glucose-tool .pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  background:#f3f4f6;
  border:1px solid #eceff3;
  border-radius: 999px;
  padding: 10px 12px;
  color:#374151;
  font-weight: 600;
  font-size: 13px;
  margin-top: 8px;}#mb-glucose-tool .hr{
  height:1px;
  background: var(--line);
  margin: 14px 0;}#mb-glucose-tool .note{
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
  line-height:1.55;}#mb-glucose-tool /* Center the header area */
.kicker, #mb-glucose-tool h1, #mb-glucose-tool .lead{
  text-align: center;}#mb-glucose-tool .lead{
  margin-left: auto;
  margin-right: auto;}#mb-glucose-tool /* Optional: center the little green line + text as a group */
.kicker{
  justify-content: center;}#mb-glucose-tool /* Center the header area */
.kicker, #mb-glucose-tool h1, #mb-glucose-tool .lead{
  text-align: center;}#mb-glucose-tool .lead{
  margin-left: auto;
  margin-right: auto;}#mb-glucose-tool /* Optional: center the little green line + text as a group */
.kicker{
  justify-content: center;}#mb-glucose-tool /* ===========================
   MetaboAI - Glucose Tool ONLY
   Scoped so it won't affect pq-bottom-header / menus
   =========================== */

#mb-glucose-tool{
  --mb-green:#79b324;
  --mb-text:#121212;
  --mb-muted:#6b7280;
  --mb-border:#e5e7eb;
  --mb-card:#ffffff;
  --mb-bg:#f7f8fb;
  --mb-shadow:0 12px 40px rgba(0,0,0,.08);

  background: var(--mb-bg);
  color: var(--mb-text);
  padding: 64px 0;}#mb-glucose-tool /* keep your theme container width – do NOT redefine .container */
#mb-glucose-tool .mb-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;}#mb-glucose-tool /* Header (centered) */
#mb-glucose-tool .mb-hero{
  text-align: center;
  margin-bottom: 28px;}#mb-glucose-tool .mb-kicker{
  display: inline-block;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--mb-green);
  margin-bottom: 10px;}#mb-glucose-tool h1{
  margin: 0 0 10px 0;
  font-size: 48px;
  line-height: 1.05;
  font-weight: 800;}#mb-glucose-tool .mb-lead{
  max-width: 780px;
  margin: 0 auto;
  color: var(--mb-muted);
  font-size: 16px;
  line-height: 1.7;}#mb-glucose-tool /* Card shell */
#mb-glucose-tool .mb-shell{
  margin-top: 28px;
  background: var(--mb-card);
  border: 1px solid var(--mb-border);
  border-radius: 18px;
  box-shadow: var(--mb-shadow);
  padding: 22px;}#mb-glucose-tool /* Tip bar */
#mb-glucose-tool .mb-tip{
  background: #111;
  color: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 18px;}#mb-glucose-tool .mb-tip code{
  color: #fff;
  opacity: .95;}#mb-glucose-tool /* Two-column layout */
#mb-glucose-tool .mb-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;}@media (max-width: 992px){#mb-glucose-tool .mb-grid{ grid-template-columns: 1fr;}}#mb-glucose-tool .mb-card{
  background: var(--mb-card);
  border: 1px solid var(--mb-border);
  border-radius: 16px;
  padding: 18px;}#mb-glucose-tool /* Titles */
#mb-glucose-tool .mb-card h2{
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 800;}#mb-glucose-tool /* Labels + inputs */
#mb-glucose-tool label{
  display:block;
  font-size: 13px;
  color: var(--mb-muted);
  margin: 10px 0 8px;}#mb-glucose-tool .mb-row{
  display:flex;
  gap: 10px;
  align-items: center;}#mb-glucose-tool input[type="number"], #mb-glucose-tool input[type="text"], #mb-glucose-tool select{
  width: 100%;
  border: 1px solid var(--mb-border);
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 14px;
  outline: none;
  background: #fff;}#mb-glucose-tool input:focus, #mb-glucose-tool select:focus{
  border-color: rgba(121,179,36,.55);
  box-shadow: 0 0 0 4px rgba(121,179,36,.18);}#mb-glucose-tool /* Food list specifically (so it looks clean) */
#mb-glucose-tool select.mb-food{
  height: 260px;}#mb-glucose-tool /* Buttons */
#mb-glucose-tool .mb-actions{
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;}#mb-glucose-tool .mb-btn{
  border: 1px solid var(--mb-border);
  background: #f3f4f6;
  color: #111;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;}#mb-glucose-tool .mb-btn.primary{
  background: var(--mb-green);
  border-color: var(--mb-green);
  color: #fff;}#mb-glucose-tool .mb-check{
  display:flex;
  gap: 8px;
  align-items: center;
  color: var(--mb-muted);
  font-size: 13px;}#mb-glucose-tool /* Result boxes */
#mb-glucose-tool .mb-results{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;}#mb-glucose-tool .mb-metric{
  border: 1px solid var(--mb-border);
  border-radius: 14px;
  padding: 12px;
  background: #fff;}#mb-glucose-tool .mb-metric .title{
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 6px;}#mb-glucose-tool .mb-metric .val{
  font-size: 26px;
  font-weight: 900;}#mb-glucose-tool /* Small helper text */
#mb-glucose-tool .mb-note{
  margin-top: 14px;
  color: var(--mb-muted);
  font-size: 13px;
  line-height: 1.6;}
/* Glucose tool: make Estimate + Reset same width */
#mb-glucose-tool .actions{
  display: grid;
  grid-template-columns: 1fr;  /* stacked */
  gap: 10px;
  width: 100%;
}

#mb-glucose-tool .actions .btn,
#mb-glucose-tool .actions button,
#mb-glucose-tool #estimateBtn,
#mb-glucose-tool #resetBtn{
  width: 100%;
  min-width: 210px;            /* adjust if you want wider/narrower */
}


/* Field wrapper */
#mb-glucose-tool .field-box{
  background: #f3f4f6;
  border: 2px solid #e5e7eb;     /* gray idle border */
  border-radius: 16px;
  height: 56px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* Input sits INSIDE, no border */
#mb-glucose-tool .field-box input,
#mb-glucose-tool .field-box select{
  width: 100%;
  height: 100%;
  border: 0 !important;         /* CRITICAL */
  outline: none;
  background: transparent;
  padding: 0 16px;
  font-size: 16px;
  box-sizing: border-box;
}

/* Focus state replaces gray border with green */
#mb-glucose-tool .field-box:focus-within{
  border-color: #7bbf24;        /* green */
}


/* Green highlight when active */
#mb-glucose-tool .field-box:focus-within{
  border-color: #7bbf24;
  box-shadow: 0 0 0 4px rgba(123,191,36,.18);
}
/* Kill any input outline/border that is drawing the green line */
#mb-glucose-tool input:focus,
#mb-glucose-tool input:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
#mb-glucose-tool .field-box input{
  border: 0 !important;
  box-shadow: none !important;
}


#mb-glucose-tool .field-box{
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  background: #f3f4f6;
}

#mb-glucose-tool .field-box:focus-within{
  border-color: #7bbf24;
}

/* Remove extra top space above Glucose tool */
#mb-glucose-tool{
  margin-top: 0;
  padding-top: 0;
}

#mb-glucose-tool .mb-wrap{
  padding-top: 0;
}

/* Tighten heading spacing */
#mb-glucose-tool h1{
  margin-top: 0;
  margin-bottom: 28px;   /* adjust if needed */
}

#mb-glucose-tool .lead{
  margin-top: 0;
  margin-bottom: 18px;
}

#mb-glucose-tool ::-webkit-input-placeholder{ opacity: 0.25; }
#mb-glucose-tool ::-moz-placeholder{ opacity: 0.25; }
#mb-glucose-tool :-ms-input-placeholder{ opacity: 0.25; }
#mb-glucose-tool ::placeholder{ opacity: 0.25; }


<style>
  :root{
    --low:#16a34a; --med:#f59e0b; --high:#dc2626;
    --text:#0f172a; --muted:#64748b; --card:#ffffff; --border:rgba(15,23,42,.12);
    --bg:#f8fafc;
  }
  body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background:var(--bg); }
  .wrap{ max-width:1100px; margin:32px auto; padding:0 16px; }
  h1{ font-size:44px; line-height:1.1; margin:0 0 10px; }
  .lead{ color:var(--muted); margin:0 0 16px; line-height:1.6; }
  .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--border); border-radius:12px; background:#fff; color:var(--text); text-decoration:none; }
  .btn:hover{ transform:translateY(-1px); }

  .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; }
  @media (max-width: 992px){ .grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width: 620px){ .grid{ grid-template-columns:1fr; } h1{ font-size:32px; } }

  .card{ background:var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:0 8px 18px rgba(15,23,42,.06); }
  .img{ width:100%; height:140px; object-fit:cover; display:block; background:#e2e8f0; }
  .content{ padding:16px; }
  .chip{ display:inline-block; font-size:12px; padding:4px 10px; border-radius:999px; background:#eef2ff; color:#3730a3; margin-bottom:8px; }
  .desc{ margin:6px 0 12px; color:var(--muted); line-height:1.55; }

  .foods{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
  .foods li{ display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:#fff; }
  .tag{ font-weight:700; font-size:12px; padding:4px 10px; border-radius:999px; }
  .tag.low{ background:rgba(22,163,74,.12); color:var(--low); }
  .tag.med{ background:rgba(245,158,11,.14); color:var(--med); }
  .tag.high{ background:rgba(220,38,38,.12); color:var(--high); }

  .note{ margin:12px 0 0; color:var(--muted); font-size:13px; }
  .footer-note{ margin-top:18px; }
  .low{ color:var(--low); } .med{ color:var(--med); } .high{ color:var(--high); }
</style>