#dq-be{
  --be-accent: var(--dq-accent, #0066cc);
  --be-accent-dark: var(--dq-accent-dark, #004e9e);
  --be-ink: var(--dq-text, #16202b);
  --be-muted: var(--dq-text-muted, #5d6b7a);
  --be-line: var(--dq-border, #dde3ea);
  --be-surface: var(--dq-surface, #ffffff);
  --be-tint: #f4f7fb;
  --be-cost: #c0392b;
  --be-fix: #98a4b3;
  --be-radius: 8px;

  color: var(--be-ink);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 2rem;
}
#dq-be *,#dq-be *::before,#dq-be *::after{box-sizing:border-box;}

#dq-be .dq-be__grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:1.75rem;
  align-items:start;
}

/* ---- Form ---- */
#dq-be .dq-be__form{
  display:grid;
  gap:1.25rem;
  margin:0;
  padding:1.5rem;
  background:var(--be-surface);
  border:1px solid var(--be-line);
  border-radius:var(--be-radius);
}
#dq-be .dq-be__field--inline{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
#dq-be .dq-be__field label{
  display:block;
  font-weight:600;
  font-size:.9375rem;
  margin:0 0 .4rem;
}
#dq-be .dq-be__opt{
  font-weight:400;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--be-muted);
  margin-left:.35rem;
}
#dq-be input[type=number],
#dq-be select{
  width:100%;
  padding:.6rem .75rem;
  font:inherit;
  font-size:.9375rem;
  color:var(--be-ink);
  background:#fff;
  border:1px solid var(--be-line);
  border-radius:6px;
  appearance:none;
  -webkit-appearance:none;
}
#dq-be select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235d6b7a' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .8rem center;
  padding-right:2.2rem;
}
#dq-be input:focus-visible,
#dq-be select:focus-visible,
#dq-be summary:focus-visible{
  outline:2px solid var(--be-accent);
  outline-offset:2px;
}
#dq-be .dq-be__input-wrap{position:relative;}
#dq-be .dq-be__input-wrap input{padding-left:2.1rem;}
#dq-be .dq-be__prefix{
  position:absolute;
  left:.8rem;
  top:50%;
  transform:translateY(-50%);
  font-size:.875rem;
  color:var(--be-muted);
  pointer-events:none;
}
#dq-be .dq-be__hint{
  margin:.4rem 0 0;
  font-size:.8125rem;
  line-height:1.45;
  color:var(--be-muted);
}

/* ---- Results ---- */
#dq-be .dq-be__out{
  padding:1.5rem;
  background:var(--be-tint);
  border:1px solid var(--be-line);
  border-top:3px solid var(--be-accent);
  border-radius:var(--be-radius);
}
#dq-be .dq-be__eyebrow{
  display:block;
  font-size:.6875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--be-muted);
}
#dq-be .dq-be__big{
  display:block;
  font-size:clamp(2.25rem,6vw,3rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--be-accent-dark);
  font-variant-numeric:tabular-nums;
  margin:.25rem 0 .1rem;
}
#dq-be .dq-be__unit{display:block;font-size:.875rem;color:var(--be-muted);}
#dq-be .dq-be__stats{
  display:grid;
  gap:.75rem;
  margin:1.35rem 0 0;
  padding:1.1rem 0 0;
  border-top:1px solid var(--be-line);
}
#dq-be .dq-be__stats div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
}
#dq-be .dq-be__stats dt{font-size:.875rem;color:var(--be-muted);}
#dq-be .dq-be__stats dd{
  margin:0;
  font-size:.9375rem;
  font-weight:600;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
#dq-be .dq-be__plain{
  margin:1.1rem 0 0;
  padding-top:1.1rem;
  border-top:1px solid var(--be-line);
  font-size:.875rem;
  line-height:1.55;
  color:var(--be-muted);
}
#dq-be .dq-be__error{
  margin:1rem 0 0;
  padding:.7rem .85rem;
  font-size:.875rem;
  color:#8a2020;
  background:#fdf2f2;
  border-left:3px solid var(--be-cost);
  border-radius:3px;
}

/* ---- Chart ---- */
#dq-be .dq-be__chartwrap{
  margin-top:1.5rem;
  padding:1.25rem 1.5rem 1rem;
  background:var(--be-surface);
  border:1px solid var(--be-line);
  border-radius:var(--be-radius);
}
#dq-be .dq-be__charthead{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  margin-bottom:.75rem;
}
#dq-be .dq-be__legend{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin:0;
  padding:0;
  list-style:none;
  font-size:.75rem;
  color:var(--be-muted);
}
#dq-be .dq-be__legend li{display:flex;align-items:center;gap:.35rem;}
#dq-be .dq-be__legend i{width:14px;height:2px;border-radius:2px;display:block;}
#dq-be .dq-be__legend .k-rev{background:var(--be-accent);}
#dq-be .dq-be__legend .k-cost{background:var(--be-cost);}
#dq-be .dq-be__legend .k-fix{background:var(--be-fix);}
#dq-be .dq-be__chart svg{display:block;width:100%;height:auto;}

/* ---- Notes ---- */
#dq-be .dq-be__notes{margin-top:1.5rem;display:grid;gap:.5rem;}
#dq-be details{
  border:1px solid var(--be-line);
  border-radius:var(--be-radius);
  background:var(--be-surface);
}
#dq-be summary{
  padding:.85rem 1.1rem;
  font-size:.9375rem;
  font-weight:600;
  cursor:pointer;
  list-style:none;
}
#dq-be summary::-webkit-details-marker{display:none;}
#dq-be summary::after{content:"+";float:right;color:var(--be-accent);font-weight:700;}
#dq-be details[open] summary::after{content:"–";}
#dq-be details p{
  margin:0 1.1rem 1rem;
  font-size:.875rem;
  line-height:1.6;
  color:var(--be-muted);
}
#dq-be details p:first-of-type{margin-top:.25rem;}
#dq-be .dq-be__formula{
  padding:.85rem 1rem;
  background:var(--be-tint);
  border-radius:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.8125rem;
  line-height:1.8;
  color:var(--be-ink);
  overflow-x:auto;
}

/* ---- Responsive ---- */
@media (max-width:781px){
  #dq-be .dq-be__grid{grid-template-columns:1fr;gap:1.25rem;}
  #dq-be .dq-be__form,#dq-be .dq-be__out{padding:1.25rem;}
  #dq-be .dq-be__chartwrap{padding:1.1rem 1rem .85rem;}
}
