:root {
  --energy-navy: #063247;
  --energy-cyan: #13bfe8;
  --energy-green: #36b982;
  --energy-orange: #ff7300;

  --energy-muted: #647b89;

  --energy-border:
    rgba(6, 50, 71, 0.11);

  --energy-panel:
    rgba(255, 255, 255, 0.91);
}


.gcg-energy-app {
  padding-bottom: 50px;
}


/* HERO */

.gcg-energy-hero {
  padding: 46px 0 28px;
}


.gcg-energy-hero h1 {
  margin: 8px 0 12px;

  color: var(--energy-navy);

  font-size:
    clamp(42px, 6vw, 72px);

  line-height: 1.02;

  letter-spacing: -0.04em;
}


.gcg-energy-lead {
  max-width: 800px;

  color: var(--energy-muted);

  font-size: 17px;

  line-height: 1.65;
}


/* LAYOUT */

.gcg-energy-layout {
  display: grid;

  grid-template-columns:
    minmax(320px, 0.8fr)
    minmax(0, 1.3fr);

  gap: 16px;
}


.gcg-energy-panel,
.gcg-energy-main-result,
.gcg-energy-result-grid article,
.gcg-energy-summary,
.gcg-energy-warning {
  border:
    1px solid var(--energy-border);

  border-radius: 22px;

  background:
    var(--energy-panel);

  box-shadow:
    0 16px 44px
    rgba(6, 50, 71, 0.07);
}


/* CONTROLS */

.gcg-energy-controls {
  padding: 20px;
}


.gcg-panel-header {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 14px;

  margin-bottom: 16px;
}


.gcg-panel-label {
  display: block;

  color: var(--energy-orange);

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 0.12em;
}


.gcg-panel-header strong {
  display: block;

  margin-top: 5px;

  color: var(--energy-navy);

  font-size: 18px;
}


.gcg-panel-divider {
  height: 1px;

  margin: 24px 0;

  background:
    var(--energy-border);
}


/* FIELDS */

.gcg-energy-field {
  margin-bottom: 18px;
}


.gcg-energy-field label {
  display: block;

  margin-bottom: 7px;

  color: var(--energy-navy);

  font-weight: 800;
}


.gcg-energy-field small {
  display: block;

  margin-top: 7px;

  color: var(--energy-muted);

  font-size: 11px;

  line-height: 1.45;
}


.gcg-input-unit {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr) auto;

  align-items: center;

  overflow: hidden;

  border:
    1px solid var(--energy-border);

  border-radius: 12px;

  background: #ffffff;
}


.gcg-input-unit input {
  width: 100%;

  padding: 12px;

  border: 0;

  outline: none;

  background: transparent;

  color: var(--energy-navy);

  font: inherit;
}


.gcg-input-unit span {
  padding: 0 13px;

  color: var(--energy-muted);

  font-size: 12px;

  font-weight: 800;
}


.gcg-energy-field select {
  width: 100%;

  padding: 12px;

  border:
    1px solid var(--energy-border);

  border-radius: 12px;

  background: #ffffff;

  color: var(--energy-navy);

  font: inherit;
}


.gcg-energy-calculate {
  width: 100%;

  margin-top: 8px;
}


/* RESULTS */

.gcg-energy-results {
  display: flex;

  flex-direction: column;

  gap: 16px;
}


.gcg-energy-main-result {
  padding: 30px;
}


.gcg-energy-main-result > strong {
  display: block;

  margin: 8px 0 4px;

  color: var(--energy-navy);

  font-size:
    clamp(52px, 7vw, 86px);

  line-height: 1;
}


.gcg-energy-main-result p {
  margin: 0;

  color: var(--energy-muted);
}


.gcg-energy-result-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;
}


.gcg-energy-result-grid article {
  padding: 18px;
}


.gcg-energy-result-grid span {
  display: block;

  color: var(--energy-muted);

  font-size: 11px;
}


.gcg-energy-result-grid strong {
  display: block;

  margin-top: 6px;

  color: var(--energy-navy);

  font-size: 18px;
}


/* SUMMARY */

.gcg-energy-summary {
  padding: 20px;
}


.gcg-energy-summary p {
  margin: 7px 0 0;

  color: var(--energy-muted);

  line-height: 1.55;
}


/* WARNING */

.gcg-energy-warning {
  padding: 18px 20px;

  border-color:
    rgba(231, 173, 40, 0.20);

  background:
    rgba(255, 248, 226, 0.78);
}


.gcg-energy-warning strong {
  color: #9a6a00;
}


.gcg-energy-warning p {
  margin: 6px 0 0;

  color: #7c7053;

  font-size: 12px;

  line-height: 1.5;
}


/* RESPONSIVE */

@media (max-width: 900px) {

  .gcg-energy-layout {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 700px) {

  .gcg-energy-result-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 480px) {

  .gcg-energy-hero h1 {
    font-size: 42px;
  }


  .gcg-energy-result-grid {
    grid-template-columns: 1fr;
  }

}