.gascheck {
  --gc-navy: #142238;
  --gc-amber: #ffb63d;
  box-sizing: border-box;
  margin-block: 2rem;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--line, #c5bda9);
  border-top: 5px solid var(--accent, var(--gc-amber));
  border-radius: var(--radius, 18px);
  background: var(--surface, #fff);
  color: var(--text, var(--gc-navy));
  font-family: var(--body, system-ui, sans-serif);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.gascheck *, .gascheck *::before, .gascheck *::after { box-sizing: border-box; }
.gascheck [hidden] { display: none !important; }
.gascheck h2 { margin-top: .35rem; }
.gascheck h3, .gascheck h4 { margin: 0 0 1rem; }
.gascheck-kicker { margin: 0; font-size: .8rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.gascheck-note, .gascheck-privacy { font-size: .88rem; color: var(--muted, #4e5c6e); }
.gascheck-controls { min-width: 0; margin: 0; padding: 0; border: 0; }
.gascheck-consumption { max-width: 34rem; margin-block: 1.25rem; }
.gascheck-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.gascheck-tariff, .gascheck-result-card { min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--line, #c5bda9); border-radius: 12px; background: var(--soft, #f1ede4); }
.gascheck legend { padding-inline: .4rem; font-size: 1.1rem; font-weight: 750; }
.gascheck label { display: block; margin-bottom: .3rem; font-weight: 650; }
.gascheck input { display: block; width: 100%; min-height: 48px; margin: 0 0 1rem; padding: .65rem .75rem; border: 1px solid var(--line, #c5bda9); border-radius: 8px; background: var(--surface, #fff); color: var(--text, var(--gc-navy)); font: inherit; }
.gascheck input[aria-invalid=true] { border: 2px solid var(--text, var(--gc-navy)); outline: 2px dashed var(--accent, var(--gc-amber)); outline-offset: 2px; }
.gascheck-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.gascheck button { min-height: 48px; padding: .7rem 1rem; border: 1px solid var(--line, #c5bda9); border-radius: 9px; background: var(--surface, #fff); color: var(--text, var(--gc-navy)); font: inherit; font-weight: 650; cursor: pointer; }
.gascheck button:hover { background: var(--soft, #f1ede4); }
.gascheck button.gascheck-primary { border-color: var(--accent, var(--gc-amber)); background: var(--accent, var(--gc-amber)); color: var(--accent-text, var(--gc-navy)); }
.gascheck button.gascheck-primary:hover { text-decoration: underline; text-underline-offset: .2em; }
.gascheck :focus-visible { outline: 3px solid var(--focus, #774700); outline-offset: 4px; }
.gascheck fieldset:disabled button { cursor: not-allowed; opacity: .55; }
.gascheck-error { padding: .8rem 1rem; border-left: 4px solid var(--accent, var(--gc-amber)); background: var(--soft, #f1ede4); font-weight: 700; }
.gascheck-status { font-size: .94rem; }
.gascheck-results { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line, #c5bda9); }
.gascheck dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .8rem; margin: 0; }
.gascheck dt, .gascheck dd { margin: 0; }
.gascheck dd { text-align: right; overflow-wrap: anywhere; }
.gascheck-total { padding-top: .5rem; border-top: 1px solid var(--line, #c5bda9); font-weight: 750; }
.gascheck-comparison { padding: .8rem 1rem; border-left: 3px solid var(--accent, var(--gc-amber)); background: var(--soft, #f1ede4); }
.gascheck-privacy { margin-bottom: 0; }
.gascheck-sr-only { position: absolute; width: 1px; height: 1px; padding: 0 !important; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 700px) {
  .gascheck-grid { grid-template-columns: minmax(0, 1fr); }
  .gascheck-actions { flex-direction: column; }
  .gascheck-actions button { width: 100%; }
  .gascheck dl { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .gascheck dd { margin-bottom: .65rem; text-align: left; }
  .gascheck dd.gascheck-total { border-top: 0; padding-top: 0; }
}