:root {
  --bg: #f4f6f7;
  --panel-bg: #ffffff;
  --border: #d7dde0;
  --text: #1c2b2d;
  --text-muted: #5b6b6e;
  --indoor: #c0392b;
  --outdoor: #2471a3;
  --supply: #16a085;
  --target: #8e44ad;
  --good: #1e7e46;
  --good-bg: #e8f6ee;
  --mixed: #96650a;
  --mixed-bg: #fdf3e0;
  --bad: #a3271f;
  --bad-bg: #fbe9e7;
  --neutral: #445;
  --neutral-bg: #eef1f2;
  --accent: #2471a3;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.45;
}

.app-header {
  padding: 18px 20px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-bg);
}
.app-header h1 {
  margin: 0 0 4px;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.app-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.layout {
  display: grid;
  grid-template-columns: 340px 1fr 360px;
  gap: 14px;
  padding: 14px;
  align-items: start;
}
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
}

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
}
.panel h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
  color: var(--text-muted);
  font-weight: 700;
}
.panel h2.indoor-h { border-left: 4px solid var(--indoor); padding-left: 8px; }
.panel h2.outdoor-h { border-left: 4px solid var(--outdoor); padding-left: 8px; }

.field {
  margin-bottom: 12px;
}
.field label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 4px;
  color: var(--text-muted);
}
.field label .val { color: var(--text); font-weight: 600; font-family: var(--mono); }
.field input[type="range"] { width: 100%; }
.field input[type="number"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 0.9rem;
}
.field .row { display: flex; gap: 8px; align-items: center; }
.field .row input[type="number"] { flex: 0 0 90px; }
.field .row input[type="range"] { flex: 1; }

select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 0.9rem;
  background: #fff;
}

.equip-block { display: none; }
.equip-block.active { display: block; }

.preset-row { display: flex; gap: 6px; margin: 6px 0 12px; flex-wrap: wrap; }
.preset-row button {
  flex: 1;
  min-width: 60px;
  padding: 5px 6px;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  background: #fafbfc;
  border-radius: 5px;
  cursor: pointer;
}
.preset-row button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.toggle-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.85rem; }

/* Center: chart */
.chart-wrap svg {
  width: 100%;
  height: 420px;
  display: block;
}
.axis-line { stroke: #333; stroke-width: 1; }
.tick-line { stroke: #999; stroke-width: 1; }
.tick-label { font-size: 10px; fill: var(--text-muted); font-family: var(--mono); }
.axis-title { font-size: 11px; fill: var(--text-muted); }
.sat-curve { fill: none; stroke: #333; stroke-width: 1.6; }
.rh-curve { fill: none; stroke: #b7c2c5; stroke-width: 1; stroke-dasharray: 3 3; }
.rh-curve-label { font-size: 9px; fill: #99a5a8; }
.state-point circle { stroke: #fff; stroke-width: 1.5; }
.state-point.indoor circle { fill: var(--indoor); }
.state-point.outdoor circle { fill: var(--outdoor); }
.state-point.supply circle { fill: var(--supply); }
.state-point.target circle { fill: var(--target); }
.off-chart-marker { stroke: #fff; stroke-width: 1.5; }
.state-point.indoor .off-chart-marker { fill: var(--indoor); }
.state-point.outdoor .off-chart-marker { fill: var(--outdoor); }
.state-point.supply .off-chart-marker { fill: var(--supply); }
.point-label { font-size: 11px; font-weight: 600; fill: var(--text); }
.flow-arrow { stroke-width: 2; opacity: 0.85; }
.flow-arrow.outdoor-to-supply { stroke: var(--outdoor); }
.flow-arrow.supply-to-indoor { stroke: var(--supply); }
.arrow-fill { fill: #556; }

.chart-toggles { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 0.8rem; }
.chart-toggles label { display: flex; align-items: center; gap: 5px; color: var(--text-muted); }

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; margin-top: 4px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend .li-indoor { background: var(--indoor); }
.legend .li-outdoor { background: var(--outdoor); }
.legend .li-supply { background: var(--supply); }

/* Buckets */
.bucket-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.85rem; }
.bucket-label { width: 56px; color: var(--text-muted); }
.bucket-track { flex: 1; background: #eef1f2; border-radius: 4px; height: 16px; overflow: hidden; }
.bucket-fill { height: 100%; }
.bucket-fill.indoor { background: var(--indoor); }
.bucket-fill.outdoor { background: var(--outdoor); }
.bucket-fill.supply { background: var(--supply); }
.bucket-value { width: 70px; text-align: right; font-family: var(--mono); font-size: 0.8rem; }

/* Verdict panel */
.verdict {
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--border);
}
.verdict.good { background: var(--good-bg); border-color: #bfe3cd; }
.verdict.mixed { background: var(--mixed-bg); border-color: #efd6a0; }
.verdict.bad { background: var(--bad-bg); border-color: #f0c6c1; }
.verdict.neutral { background: var(--neutral-bg); border-color: var(--border); }
.verdict h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.verdict.good h3 { color: var(--good); }
.verdict.mixed h3 { color: var(--mixed); }
.verdict.bad h3 { color: var(--bad); }
.verdict.neutral h3 { color: var(--neutral); }
.verdict ul { margin: 0; padding-left: 18px; font-size: 0.87rem; }
.verdict li { margin-bottom: 6px; }
.goal-warn {
  display: inline-block;
  color: #7a1a14;
  background: #f6d3ce;
  border: 1px solid #e2a29a;
  border-radius: 4px;
  padding: 2px 6px;
}

.goal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.goal-row button {
  padding: 7px 6px;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  background: #fafbfc;
  border-radius: 5px;
  cursor: pointer;
}
.goal-row button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

table.props {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
table.props th, table.props td {
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid #eee;
}
table.props th { color: var(--text-muted); font-weight: 600; }
table.props td.num { font-family: var(--mono); text-align: right; }
table.props .col-indoor { color: var(--indoor); }
table.props .col-outdoor { color: var(--outdoor); }
table.props .col-supply { color: var(--supply); }

details.math {
  margin-top: 6px;
  font-size: 0.85rem;
}
details.math summary {
  cursor: pointer;
  font-weight: 600;
  padding: 6px 0;
}
details.math ol { padding-left: 18px; }
details.math .eq { font-family: var(--mono); background: #f7f8f9; padding: 6px 8px; border-radius: 4px; margin: 4px 0; font-size: 0.82rem; overflow-x: auto; }

.edu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 800px) { .edu-grid { grid-template-columns: 1fr; } }
.edu-grid h4 { margin: 0 0 4px; font-size: 0.95rem; }
.edu-grid p { margin: 0; font-size: 0.87rem; color: var(--text-muted); }

.full-width { grid-column: 1 / -1; }

.history-block { margin-bottom: 14px; }
.history-block h4 { margin: 0 0 3px; font-size: 0.92rem; }
.history-block p { margin: 0; font-size: 0.87rem; color: var(--text-muted); }

.ref-list { font-size: 0.87rem; }
.ref-list li { margin-bottom: 5px; }
.ref-list a { color: var(--accent); }

.footnote {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 8px;
}

.small-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.heatpump-card {
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 10px;
}