:root {
  color-scheme: light;
  --bg: #c9c9c9;
  --surface: #eeeeee;
  --surface-strong: #d8d8d8;
  --surface-soft: #e9edf2;
  --line: #9b9b9b;
  --line-strong: #737373;
  --text: #101820;
  --muted: #3f4b56;
  --quiet: #65717d;
  --accent: #1f5f9f;
  --accent-strong: #174a80;
  --good: #1f7a3d;
  --warning: #b36b00;
  --danger: #b42318;
  --shadow: rgba(0, 0, 0, 0.1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 1280px;
  min-height: 100vh;
  font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 13px;
}

a {
  color: inherit;
}

.tool-shell {
  width: min(100%, 1920px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 6px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 48px;
  padding: 8px 10px;
  background: #bcbcbc;
  border: 1px solid #878787;
  border-radius: 2px;
  box-shadow: none;
}

.eyebrow,
.section-label {
  margin: 0 0 6px;
  color: #263747;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  line-height: 1.1;
}

h1 {
  font-size: 1.28rem;
  letter-spacing: 0;
}

h2 {
  font-size: 0.9rem;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.access-pill,
.nav-button,
.small-button,
.panel-state {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.access-pill {
  padding: 0 13px;
  color: #0d3d1f;
  background: #d7eadc;
  border: 1px solid #6ba979;
}

.access-pill.locked {
  color: #6b1510;
  background: #ead1ce;
  border-color: #b57a74;
}

.nav-button {
  min-width: 92px;
  padding: 0 14px;
  text-decoration: none;
  color: var(--text);
  background: #e7e7e7;
  border: 1px solid #8b8b8b;
}

.nav-button:hover {
  background: #f5f5f5;
  border-color: #5f5f5f;
}

.small-button {
  min-height: 32px;
  padding: 0 12px;
  color: var(--text);
  background: #e7e7e7;
  border: 1px solid #8b8b8b;
  cursor: pointer;
}

.small-button:hover {
  background: #f5f5f5;
  border-color: #5f5f5f;
}

.notice {
  margin-top: 4px;
  padding: 5px 8px;
  color: #173a5c;
  background: #e2e8ef;
  border: 1px solid #9aa8b6;
  border-radius: 2px;
}

.notice.warning {
  color: #6b1510;
  background: #ead1ce;
  border-color: #b57a74;
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(560px, 1.45fr) minmax(390px, 0.9fr) minmax(360px, 0.75fr);
  grid-auto-rows: minmax(190px, auto);
  gap: 6px;
  margin-top: 6px;
}

.panel {
  min-width: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: none;
}

.panel-large {
  grid-column: span 2;
}

.results-panel {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
  min-height: 30px;
  padding: 5px 8px;
  background: var(--surface-strong);
  border-bottom: 1px solid var(--line);
}

.panel-header.compact {
  align-items: center;
}

.panel-state {
  min-height: 28px;
  padding: 0 10px;
  color: #123a5c;
  background: #dbe6f0;
  border: 1px solid #8ea7bd;
}

.panel-state.warning {
  color: #6c3d00;
  background: #efe1c7;
  border-color: #b88b45;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--line);
}

.metric-tile {
  min-height: 74px;
  padding: 8px;
  background: #eef2f6;
  border: 0;
  border-radius: 0;
}

.metric-tile.danger {
  box-shadow: inset 0 -2px 0 #b42318;
}

.metric-label,
.definition-list dt,
.section-row span,
.panel-note {
  color: var(--muted);
}

.metric-label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.metric-tile strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1;
}

.metric-tile span:last-child {
  display: block;
  margin-top: 8px;
  color: var(--quiet);
}

.definition-list,
.defaults-form {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: var(--line);
}

.definition-list div,
.input-row,
.section-row,
.status-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
  background: #eef2f6;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.definition-list dt,
.definition-list dd {
  margin: 0;
}

.definition-list dd,
.section-row strong,
.status-line strong {
  text-align: right;
}

.input-row {
  align-items: center;
  color: var(--muted);
  font-size: 0.82rem;
}

.input-row.important {
  box-shadow: inset 3px 0 0 var(--accent);
}

.input-control {
  display: grid;
  grid-template-columns: minmax(94px, 118px) minmax(64px, auto);
  align-items: center;
  gap: 8px;
  color: var(--quiet);
}

.input-control input,
.input-control select {
  width: 100%;
  height: 23px;
  padding: 0 9px;
  color: #101820;
  background: #ffffff;
  border: 1px solid #8c8c8c;
  border-radius: 1px;
  font: inherit;
  text-align: right;
}

.input-control select {
  text-align: left;
}

.mode-control {
  grid-template-columns: minmax(178px, 1fr);
}

.input-control input:focus,
.input-control select:focus {
  outline: none;
  border-color: #1f5f9f;
  box-shadow: inset 0 0 0 1px #1f5f9f;
}

.input-control small {
  color: var(--quiet);
  white-space: nowrap;
}

.cooling-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.86fr) minmax(440px, 1.14fr);
  gap: 6px;
  padding: 6px;
}

.cooling-results {
  display: grid;
  gap: 1px;
  align-content: start;
  background: var(--line);
  padding: 1px;
}

output {
  font: inherit;
  font-weight: 800;
  color: var(--text);
}

.reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 1px;
  margin-top: 0;
  background: var(--line);
  padding: 1px;
}

.compact-row {
  min-height: 32px;
  padding: 4px 6px;
}

.wide-row {
  grid-column: span 2;
}

.compact-control {
  grid-template-columns: minmax(68px, 84px) minmax(48px, auto);
}

.conversion-control {
  grid-template-columns: minmax(80px, 96px) minmax(140px, auto);
}

.section-stack,
.status-board {
  display: grid;
  gap: 1px;
  padding: 1px;
  background: var(--line);
}

.section-row {
  align-items: center;
}

.section-row span {
  max-width: 220px;
  text-align: right;
}

.status-line {
  align-items: center;
}

.status-line.neutral {
  box-shadow: inset 4px 0 0 var(--line-strong);
}

.status-line.pass {
  box-shadow: inset 4px 0 0 var(--good);
}

.status-line.warning {
  box-shadow: inset 4px 0 0 var(--warning);
}

.status-line.fail {
  box-shadow: inset 4px 0 0 var(--danger);
}

.warning-list {
  display: grid;
  gap: 1px;
  margin: 6px;
  padding: 0;
  list-style: none;
}

.warning-list li {
  padding: 10px 12px;
  color: #6c3d00;
  background: #efe1c7;
  border: 1px solid #b88b45;
  border-radius: 2px;
}

.warning-list li.fail {
  color: #6b1510;
  background: #ead1ce;
  border-color: #b57a74;
}

.panel-note {
  margin: 8px;
  line-height: 1.55;
}

@media (min-width: 2200px) {
  .tool-shell {
    width: min(100%, 2280px);
  }

  .workspace-grid {
    grid-template-columns: minmax(720px, 1.5fr) minmax(520px, 0.9fr) minmax(440px, 0.75fr);
  }
}

@media (max-width: 1500px) {
  body {
    min-width: 1180px;
  }

  .workspace-grid {
    grid-template-columns: minmax(540px, 1fr) minmax(360px, 0.7fr);
  }

  .panel-large,
  .results-panel {
    grid-column: auto;
    grid-row: auto;
  }
}