:root {
  font-family: system-ui, sans-serif;
  color: #172033;
  background: #f5f7fb;
}

* { box-sizing: border-box; }
body { margin: 0; overflow-x: hidden; }
main { width: min(1200px, 100%); margin: auto; padding: 24px; }
nav { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid #ccd3df; margin-bottom: 20px; }
button { padding: 8px 12px; cursor: pointer; }
nav button { border: 0; background: transparent; }
nav button.active { border-bottom: 3px solid #2563eb; font-weight: 700; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 20px; }
.charts > article { min-width: 0; }
.charts canvas { max-width: 100%; }
article, form, #pc-list, #preview-result { background: white; padding: 16px; border-radius: 8px; }
textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace; }
.summary { display: flex; flex-wrap: wrap; gap: 16px; font-weight: 700; }
.bad { color: #b42318; }
table { width: 100%; min-width: 560px; border-collapse: collapse; margin-top: 12px; }
th, td { padding: 7px; border-bottom: 1px solid #e3e7ef; text-align: left; }
#pc-list { max-height: 600px; overflow: auto; }
input[type=number] { width: 80px; }
.forecast { display: inline-flex; margin-right: 12px; gap: 6px; align-items: center; }
.pc-filter { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 8px; }
#forecast-inputs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

@media (max-width: 640px) {
  main { padding: 12px; }
  h1 { font-size: 1.75rem; }
  nav button { flex: 1 1 100%; text-align: left; }
  .charts { grid-template-columns: 1fr; gap: 12px; }
  article, form, #pc-list, #preview-result { padding: 12px; }
  .forecast { flex: 1 1 calc(50% - 8px); margin-right: 0; }
  .forecast input { min-width: 0; width: 100%; }
  .pc-filter { width: 100%; justify-content: space-between; }
  .pc-filter select { min-width: 8rem; }
}