.bmicalc-widget{
  --bmicalc-accent: #0f766e;
  --bmicalc-accent-soft: rgba(15,118,110,0.12);
  --bmicalc-ink: #14213d;
  --bmicalc-bg: #f6f3ec;
  --bmicalc-card: #ffffff;
  --bmicalc-line: #e4e0d6;
  --bmicalc-muted: #7a7568;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--bmicalc-ink);
  max-width: 920px;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: left;
  line-height: normal;
}
.bmicalc-widget *{ box-sizing: border-box; }
.bmicalc-widget p{ margin: 0 0 12px 0; }

/* Hard reset so the active theme's global button/input/heading styles
   (uppercase text, odd colors, letter-spacing, box-shadows, etc.) cannot
   bleed into the widget. Keyed off .bmicalc-btn-el (not the bare <button>
   tag/theme's .button class) so it never collides with theme button styles. */
.bmicalc-widget .bmicalc-btn-el,
.bmicalc-widget input{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  line-height: normal;
  margin: 0;
}
.bmicalc-widget .bmicalc-btn-el{ cursor: pointer; }

/* ---- Tabs ---- */
.bmicalc-tabs{
  display:flex;
  gap:8px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.bmicalc-widget .bmicalc-tab-btn, .bmicalc-widget .bmicalc-subtab-btn{
  padding:10px 18px;
  border-radius:10px;
  border:1px solid var(--bmicalc-line);
  background:transparent;
  font-size:13px;
  font-weight:600;
  color: var(--bmicalc-muted);
  transition:.15s;
}
.bmicalc-widget .bmicalc-tab-btn.active, .bmicalc-widget .bmicalc-subtab-btn.active{
  background: var(--bmicalc-ink);
  color:#fff;
  border-color: var(--bmicalc-ink);
}
.bmicalc-subtabs{ margin-bottom:18px; }

.bmicalc-panel{ display:none; }
.bmicalc-panel.active{ display:block; }

/* ---- Calculator grid ---- */
.bmicalc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
@media(max-width:700px){
  .bmicalc-grid{ grid-template-columns:1fr; }
}
.bmicalc-card{
  background: var(--bmicalc-card);
  border:1px solid var(--bmicalc-line);
  border-radius:16px;
  padding:26px;
}
.bmicalc-field{ margin-bottom:16px; }
.bmicalc-field label{
  display:block;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--bmicalc-muted);
  margin-bottom:6px;
}
.bmicalc-hint{ font-size:12px; color:var(--bmicalc-muted); margin-left:8px; }
.bmicalc-input{
  width:100%;
  padding:11px 13px;
  border-radius:10px;
  border:1px solid var(--bmicalc-line);
  font-size:15px;
  background:#fbfaf7;
  color: var(--bmicalc-ink);
}
.bmicalc-input:focus{ border-color: var(--bmicalc-accent); background:#fff; }
.bmicalc-row2{ display:flex; gap:12px; }
.bmicalc-row2 > div{ flex:1; }

.bmicalc-genders{ display:flex; gap:10px; }
.bmicalc-widget .bmicalc-gender-btn{
  flex:1;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--bmicalc-line);
  background:transparent;
  font-size:14px;
  color:var(--bmicalc-muted);
}
.bmicalc-widget .bmicalc-gender-btn.active{
  border-color: var(--bmicalc-accent);
  background: var(--bmicalc-accent-soft);
  color: var(--bmicalc-accent);
  font-weight:700;
}

.bmicalc-widget .bmicalc-calc-btn{
  width:100%;
  margin-top:6px;
  padding:13px;
  border:none;
  border-radius:10px;
  background: var(--bmicalc-accent);
  color:#fff;
  font-weight:700;
  font-size:15px;
}
.bmicalc-widget .bmicalc-calc-btn:hover{ opacity:.92; }

/* ---- Result ---- */
.bmicalc-result-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.bmicalc-result-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--bmicalc-muted);
  font-weight:700;
}
.bmicalc-bmi-num{
  font-family: Georgia, serif;
  font-size:50px;
  font-weight:700;
  margin:2px 0;
  line-height:1;
}
.bmicalc-bmi-cat{
  font-weight:700;
  font-size:14px;
  padding:4px 14px;
  border-radius:20px;
  display:inline-block;
  margin-bottom:12px;
}
.bmicalc-gauge{ max-width:100%; height:auto; display:block; margin: 0 auto; }
.bmicalc-stats{
  width:100%;
  text-align:left;
  margin-top:16px;
  border-top:1px solid var(--bmicalc-line);
  padding-top:14px;
}
.bmicalc-stat-row{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  padding:5px 0;
}
.bmicalc-stat-row span:first-child{ color:var(--bmicalc-muted); }

/* ---- Converter (Other Units) ---- */
.bmicalc-converter-hint{
  background:#eaf2fb;
  border:1px solid #cfe1f5;
  padding:12px 16px;
  border-radius:10px;
  font-size:14px;
  margin-bottom:18px;
  color: var(--bmicalc-ink);
}
.bmicalc-conv-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media(max-width:600px){
  .bmicalc-conv-cols{ grid-template-columns:1fr; }
}
.bmicalc-conv-col label{
  display:block;
  font-weight:700;
  font-size:13px;
  margin-bottom:6px;
  color: var(--bmicalc-ink);
  text-transform: none;
}
.bmicalc-conv-input{
  width:100%;
  padding:9px 12px;
  border-radius:8px;
  border:1px solid var(--bmicalc-line);
  font-size:14px;
  margin-bottom:8px;
  background:#fbfaf7;
  color: var(--bmicalc-ink);
}
.bmicalc-listbox{
  border:1px solid var(--bmicalc-line);
  border-radius:8px;
  height:170px;
  overflow-y:auto;
  background:#fff;
}
.bmicalc-listbox-item{
  padding:7px 12px;
  font-size:14px;
  cursor:pointer;
  border-bottom:1px solid #f1efe8;
  color: var(--bmicalc-ink);
}
.bmicalc-listbox-item:hover{ background:#f5f5f0; }
.bmicalc-listbox-item.selected{
  background: var(--bmicalc-accent-soft);
  color: var(--bmicalc-ink);
  font-weight:600;
}