.tbu-app {
  --tbu-blue: #0ea5e9;
  --tbu-red: #ef4444;
  --tbu-green: #0f766e;
}

.tbu-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.tbu-form {
  display: grid;
  gap: 18px;
}

.tbu-form__section {
  display: grid;
  gap: 14px;
}

.tbu-input-grid {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(130px, 0.55fr) minmax(150px, 0.75fr) minmax(130px, 0.55fr);
  gap: 14px;
}

.tbu-visual {
  min-height: 220px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(232,241,250,0.76));
  overflow: hidden;
}

.tbu-visual img {
  display: block;
  width: min(100%, 360px);
  max-height: 320px;
  object-fit: contain;
  padding: 16px;
}

.tbu-air,
.tbu-arrow {
  fill: none;
  stroke: var(--tbu-blue);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tbu-air {
  stroke-width: 8;
}

.tbu-arrow {
  stroke-width: 5;
}

.tbu-panel {
  fill: rgba(255,255,255,0.72);
  stroke: rgba(14, 165, 233, 0.45);
  stroke-width: 3;
}

.tbu-thermo {
  fill: url(#tbuThermo);
  stroke: #172033;
  stroke-width: 4;
  stroke-linejoin: round;
}

.tbu-wick,
.tbu-drop {
  fill: rgba(14, 165, 233, 0.16);
  stroke: #0369a1;
  stroke-width: 4;
}

.tbu-visual text {
  fill: #172033;
  font: 800 22px Arial, Helvetica, sans-serif;
}

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

.tbu-result-grid .thermoprops-result-card {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.tbu-result-grid .thermoprops-result-card__value small {
  color: var(--muted);
  font-size: 0.78rem;
}

.tbu-result-hint {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.tbu-empty {
  grid-column: 1 / -1;
  min-height: 96px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.tbu-alerts {
  display: grid;
  gap: 10px;
}

.tbu-alert {
  padding: 12px 14px;
  border: 1px solid rgba(188, 55, 55, 0.24);
  border-radius: 14px;
  background: rgba(188, 55, 55, 0.08);
  color: #8f2d2d;
  font-size: 0.92rem;
  font-weight: 700;
}

.tbu-table {
  min-width: 680px;
}

.tbu-notes summary {
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
}

.tbu-notes p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

@media (max-width: 980px) {
  .tbu-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .tbu-input-grid,
  .tbu-result-grid {
    grid-template-columns: 1fr;
  }

  .tbu-visual {
    min-height: 180px;
  }

  .tbu-visual img {
    max-height: 250px;
  }
}