:root {
  --ink: #16201d;
  --muted: #62706b;
  --paper: #f6f0e4;
  --panel: #fffaf0;
  --grid: rgba(22, 32, 29, 0.09);
  --accent: #e9582f;
  --accent-dark: #9c2f19;
  --steel: #1e4d57;
  --lime: #c4dc68;
  --shadow: 0 24px 70px rgba(23, 37, 34, 0.18);
}

* {
  box-sizing: border-box;
}

img,
canvas,
svg,
table,
textarea {
  max-width: 100%;
}

button,
select,
input,
textarea {
  /* Buttons/selects on grid+flex tracks default to min-width: auto which
     equals min-content. Long button labels then force the parent wider
     than the viewport. min-width: 0 lets them shrink with their track. */
  min-width: 0;
  max-width: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--ink);
  font-family: "Avenir Next", "Futura", "Trebuchet MS", sans-serif;
  background:
    radial-gradient(circle at 13% 9%, rgba(233, 88, 47, 0.2), transparent 27rem),
    radial-gradient(circle at 89% 16%, rgba(196, 220, 104, 0.34), transparent 24rem),
    linear-gradient(135deg, #f4ead8 0%, #e8efe1 54%, #d9e4e4 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent);
}

button,
select,
textarea,
table {
  font: inherit;
}

.shell {
  position: relative;
  width: min(1680px, 100%);
  margin: 0 auto;
  padding: 24px 18px 48px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.eyebrow,
.kicker {
  margin: 0 0 8px;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1;
  letter-spacing: 0;
}

h1 {
  max-width: 720px;
  font-size: 2.15rem;
}

h2 {
  font-size: 1.55rem;
}

h3 {
  margin-bottom: 12px;
  color: var(--steel);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lede {
  max-width: 680px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.35;
}

.value-props {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.value-props span {
  border: 1px solid rgba(30, 77, 87, 0.16);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 250, 240, 0.72), rgba(255, 255, 255, 0.38)),
    rgba(255, 250, 240, 0.58);
  color: var(--steel);
  padding: 5px 8px;
  box-shadow: none;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.status-card,
.solver-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(22, 32, 29, 0.14);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.72);
  padding: 10px 14px;
  box-shadow: 0 10px 24px rgba(23, 37, 34, 0.08);
  color: var(--steel);
  font-weight: 800;
}

.status-card.busy {
  border-color: rgba(233, 88, 47, 0.34);
  background: rgba(255, 250, 240, 0.92);
  box-shadow: 0 16px 34px rgba(233, 88, 47, 0.16);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--lime);
  box-shadow: 0 0 0 6px rgba(196, 220, 104, 0.25);
}

.status-dot.busy {
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(233, 88, 47, 0.22);
  animation: statusPulse 1.15s ease-in-out infinite;
}

@keyframes statusPulse {
  0%,
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 5px rgba(233, 88, 47, 0.18);
  }

  50% {
    transform: scale(1.14);
    box-shadow: 0 0 0 12px rgba(233, 88, 47, 0.05);
  }
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  min-width: 0;
}

.output-panel {
  grid-column: 1 / -1;
  width: 100%;
}

.panel,
.panel-heading,
.actions,
.input-panel,
.summary-panel,
.output-panel,
.pilot-import-panel,
.settings-panel,
.constraint-workbench,
.rule-selector,
.rule-panel-stack,
.category-body,
.visual-grid,
.table-wrap {
  min-width: 0;
}

.summary-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  align-items: start;
  min-height: auto;
}

.summary-panel .panel-heading {
  flex-direction: column;
  justify-content: start;
  align-items: start;
  padding: 18px 22px;
}

.summary-panel .quality-summary {
  display: grid;
  align-items: start;
  padding: 18px 22px 12px 0;
}

.summary-panel .metrics {
  grid-column: 1 / -1;
  align-content: start;
  padding: 0 22px 14px;
}

.summary-panel .validation {
  grid-column: 1 / -1;
}

.input-panel {
  box-shadow: 0 16px 42px rgba(23, 37, 34, 0.1);
}

.input-panel .panel-heading,
.summary-panel .panel-heading {
  align-items: center;
}

.panel {
  position: relative;
  border: 1px solid rgba(22, 32, 29, 0.12);
  border-radius: 30px;
  background: rgba(255, 250, 240, 0.82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.panel.is-updating > :not(.panel-heading):not(.pending-overlay) {
  opacity: 0.32;
  filter: grayscale(0.45) blur(0.4px);
  pointer-events: none;
  user-select: none;
  transition: opacity 0.18s ease, filter 0.18s ease;
}

.pending-overlay {
  position: absolute;
  top: 92px;
  left: 24px;
  right: 24px;
  z-index: 20;
  display: none;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(233, 88, 47, 0.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(196, 220, 104, 0.24), transparent 13rem),
    rgba(255, 250, 240, 0.94);
  box-shadow: 0 18px 46px rgba(23, 37, 34, 0.18);
  color: var(--ink);
  padding: 16px 18px;
  backdrop-filter: blur(18px);
}

.output-panel .pending-overlay {
  top: 88px;
}

.panel.is-updating .pending-overlay {
  display: flex;
}

.pending-spinner {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 4px solid rgba(30, 77, 87, 0.14);
  border-top-color: var(--accent);
  border-right-color: rgba(233, 88, 47, 0.58);
  border-radius: 999px;
  animation: pendingSpin 0.78s linear infinite;
}

.pending-overlay strong,
.pending-overlay small {
  display: block;
}

.pending-overlay strong {
  color: var(--steel);
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.pending-overlay small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.35;
}

@keyframes pendingSpin {
  to {
    transform: rotate(360deg);
  }
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  padding: 18px 22px 12px;
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  max-width: 100%;
}

.input-panel-heading {
  padding-bottom: 8px;
}

.panel-summary {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

button {
  min-width: 0;
  max-width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-align: center;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

button:hover {
  transform: translateY(-1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

.primary {
  background: var(--accent);
  color: #fff9ed;
  box-shadow: 0 12px 22px rgba(233, 88, 47, 0.27);
}

.secondary {
  background: #172522;
  color: #fff9ed;
}

.sample-select-label {
  align-self: center;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

select {
  width: auto;
  max-width: 100%;
  min-width: 0;
  border: 1px solid rgba(22, 32, 29, 0.14);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.9);
  color: var(--ink);
  padding: 10px 12px;
  font-weight: 800;
  outline: none;
}

.actions select {
  min-width: 220px;
}

.pilot-import-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 16px 14px;
  border: 1px solid rgba(22, 32, 29, 0.1);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 250, 240, 0.72), rgba(255, 255, 255, 0.34)),
    rgba(255, 255, 255, 0.34);
  padding: 14px;
}

.source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.source-card {
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid rgba(22, 32, 29, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.42);
  padding: 14px;
}

.source-card h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

.source-step {
  margin: 0;
  color: var(--accent-dark);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.source-note,
.settings-note,
.input-cta p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.csv-upload-row,
.import-diagnostics {
  display: grid;
  gap: 8px;
  align-content: start;
}

.csv-upload-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.csv-upload-row .file-field {
  grid-column: 1 / -1;
}

.file-field,
.preset-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--steel);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.file-field input,
.preset-field select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(22, 32, 29, 0.14);
  border-radius: 13px;
  background: rgba(255, 250, 240, 0.86);
  color: var(--ink);
  padding: 9px 11px;
  font-size: 0.84rem;
  font-weight: 800;
  outline: none;
}

.csv-upload-row button {
  min-height: 40px;
  align-self: end;
  width: 100%;
}

.import-button {
  min-width: 112px;
}

.import-diagnostics {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(30, 77, 87, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.42);
  color: var(--muted);
  padding: 11px 12px;
  font-size: 0.78rem;
  font-weight: 800;
}

.import-diagnostics[hidden] {
  display: none;
}

.import-diagnostics strong {
  color: var(--steel);
  font-size: 0.8rem;
}

.import-diagnostics ul {
  margin: 0;
  padding-left: 18px;
}

.settings-panel {
  margin: 0 16px 14px;
  border: 1px solid rgba(22, 32, 29, 0.1);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 250, 240, 0.72), rgba(255, 255, 255, 0.34)),
    rgba(255, 255, 255, 0.34);
  padding: 14px;
}

.settings-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
}

.settings-intro h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  letter-spacing: -0.02em;
  text-transform: none;
}

.settings-copy {
  display: grid;
  gap: 6px;
}

.constraint-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 0;
}

.rule-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 7px;
  min-width: 0;
}

.rule-tab {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  min-width: 0;
  border: 1px solid rgba(22, 32, 29, 0.11);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.38);
  color: var(--ink);
  padding: 9px 10px;
  text-align: left;
  box-shadow: none;
}

.rule-tab:hover {
  transform: none;
}

.rule-tab.active {
  border-color: rgba(233, 88, 47, 0.35);
  background:
    linear-gradient(90deg, rgba(233, 88, 47, 0.14), rgba(255, 255, 255, 0.54)),
    rgba(255, 250, 240, 0.72);
  box-shadow: inset 3px 0 0 var(--accent);
}

.rule-tab strong,
.rule-tab small {
  display: block;
}

.rule-tab strong {
  color: var(--steel);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.rule-tab small {
  display: none;
}

.rule-tab em {
  flex: 0 0 auto;
  min-width: 34px;
  border-radius: 999px;
  background: rgba(30, 77, 87, 0.1);
  color: var(--steel);
  padding: 3px 6px;
  font-size: 0.58rem;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.rule-tab.active em {
  background: var(--accent);
  color: #fffaf0;
}

.rule-tab em[data-state="off"] {
  background: rgba(22, 32, 29, 0.08);
  color: var(--muted);
}

.rule-tab em[data-state="neutral"] {
  background: rgba(196, 220, 104, 0.28);
  color: var(--steel);
}

.rule-panel-stack {
  min-width: 0;
}

.input-cta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin: 0 16px 14px;
  border: 1px solid rgba(233, 88, 47, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(196, 220, 104, 0.18), transparent 11rem),
    linear-gradient(135deg, rgba(255, 250, 240, 0.82), rgba(255, 255, 255, 0.5)),
    rgba(255, 250, 240, 0.68);
  padding: 14px;
}

.input-cta strong {
  display: block;
  margin: 4px 0;
  color: var(--steel);
  font-size: 1rem;
  font-weight: 900;
}

.input-cta .primary {
  flex: 0 0 auto;
  min-width: 152px;
}

.rule-panel {
  min-width: 0;
  border: 1px solid rgba(22, 32, 29, 0.11);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 250, 240, 0.82), rgba(255, 255, 255, 0.5)),
    rgba(255, 250, 240, 0.56);
  padding: 12px;
  overflow: visible;
}

.rule-panel[hidden] {
  display: none;
}

.rule-panel-heading {
  display: none;
}

.rule-panel-heading h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1;
  letter-spacing: 0;
}

.rule-panel-heading .category-label {
  margin: 0;
  font-size: 0.62rem;
}

.category-body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 10px;
  padding: 0;
}

.priorities-body {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.category-section {
  display: grid;
  min-width: 0;
  gap: 8px;
  align-content: start;
}

.category-label {
  display: none;
}

.constraint-switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(22, 32, 29, 0.11);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.42);
  padding: 12px;
  color: var(--ink);
}

.constraint-switch input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.constraint-switch strong,
.constraint-switch small {
  display: block;
}

.constraint-switch strong {
  color: var(--steel);
  font-size: 0.77rem;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.label-with-help,
.field-heading {
  display: inline-flex;
  max-width: 100%;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.label-with-help strong {
  display: inline;
}

.help-tip {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid rgba(30, 77, 87, 0.24);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.88);
  color: var(--steel);
  cursor: help;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  outline: none;
}

.help-tip:hover,
.help-tip:focus {
  border-color: rgba(233, 88, 47, 0.56);
  background: var(--accent);
  color: #fffaf0;
}

.help-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 30;
  display: none;
  width: min(270px, 72vw);
  transform: translateX(-50%);
  border: 1px solid rgba(255, 250, 240, 0.12);
  border-radius: 16px;
  background: rgba(23, 37, 34, 0.96);
  color: #fffaf0;
  padding: 10px 12px;
  box-shadow: 0 16px 36px rgba(23, 37, 34, 0.2);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.35;
  text-align: left;
  text-transform: none;
}

.help-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(23, 37, 34, 0.96);
}

.help-tip:hover .help-bubble,
.help-tip:focus .help-bubble {
  display: block;
}

.constraint-switch small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.2;
}

.setting-field {
  display: grid;
  gap: 7px;
  align-content: start;
  min-width: 0;
  border: 1px solid rgba(22, 32, 29, 0.11);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.42);
  padding: 12px;
}

.setting-field > span {
  color: var(--steel);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
}

.setting-field small {
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.setting-field select,
.setting-field input[type="number"] {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(22, 32, 29, 0.14);
  border-radius: 13px;
  background: rgba(255, 250, 240, 0.86);
  color: var(--ink);
  padding: 9px 11px;
  font-size: 0.84rem;
  line-height: 1.15;
  font-weight: 800;
  outline: none;
}

.setting-field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.range-scale {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.range-value {
  display: inline-flex;
  justify-self: center;
  max-width: 100%;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  border: 1px solid rgba(233, 88, 47, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(233, 88, 47, 0.12), rgba(255, 250, 240, 0.78)),
    rgba(255, 250, 240, 0.7);
  color: var(--steel);
  padding: 4px 10px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.range-value strong {
  color: var(--accent);
  font-size: 0.82rem;
  line-height: 1;
}

.range-value span {
  color: var(--steel);
  font-size: 0.58rem;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
}

.range-value-disabled {
  border-color: rgba(22, 32, 29, 0.08);
  background: rgba(22, 32, 29, 0.04);
}

.range-value-disabled strong,
.range-value-disabled span {
  color: var(--muted);
}

.setting-field input[type="range"]:disabled + .range-scale {
  opacity: 0.55;
}

.json-editor {
  margin: 0 16px 24px;
  border: 1px solid rgba(22, 32, 29, 0.11);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.32);
  padding: 12px;
}

.json-editor summary {
  cursor: pointer;
  color: var(--steel);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

textarea {
  display: block;
  width: calc(100% - 32px);
  min-height: 360px;
  max-height: 460px;
  margin: 0 16px;
  border: 1px solid rgba(22, 32, 29, 0.14);
  border-radius: 22px;
  background: #172522;
  color: #f7f1df;
  padding: 18px;
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 0.86rem;
  line-height: 1.5;
  outline: none;
  resize: vertical;
}

.json-editor textarea {
  width: 100%;
  min-height: 300px;
  margin: 12px 0 0;
}

textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(233, 88, 47, 0.16);
}

.hint {
  margin: 14px 24px 24px;
  color: var(--muted);
  font-size: 0.92rem;
}

code {
  color: var(--accent-dark);
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
  gap: 8px;
  padding: 0 24px 18px;
}

.quality-summary {
  padding: 0 24px 14px;
}

.setup-card,
.empty-state,
.viz-placeholder {
  border: 1px solid rgba(30, 77, 87, 0.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(196, 220, 104, 0.18), transparent 13rem),
    rgba(255, 255, 255, 0.46);
  color: var(--steel);
  padding: 16px;
}

.setup-card strong,
.empty-state strong,
.viz-placeholder strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.setup-card p,
.viz-placeholder span {
  display: block;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.35;
}

.solution-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(22, 32, 29, 0.12);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(196, 220, 104, 0.16), rgba(255, 255, 255, 0.38)),
    rgba(255, 255, 255, 0.43);
  padding: 13px 14px;
}

.status-grade {
  display: grid;
  min-width: 78px;
  min-height: 72px;
  place-items: center;
  border-radius: 16px;
  background: #172522;
  color: #fffaf0;
  padding: 10px;
  text-align: center;
}

.status-grade span,
.status-grade small {
  display: block;
}

.status-grade span {
  color: var(--lime);
  font-size: 2rem;
  font-weight: 900;
  line-height: 0.9;
}

.status-grade small {
  color: rgba(255, 250, 240, 0.72);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
}

.status-copy h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

.status-copy p {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.constraint-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.constraint-tags span {
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 0.68rem;
  font-weight: 900;
}

.constraint-tags span {
  background: rgba(30, 77, 87, 0.11);
  color: var(--steel);
}

.alternatives {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  padding: 0 24px 18px;
}

.output-actions {
  width: 100%;
  max-width: 760px;
}

.placement-export-panel {
  display: grid;
  gap: 10px;
  margin: 0 24px 24px;
}

.placement-export-copy {
  display: grid;
  gap: 4px;
  color: var(--steel);
}

.placement-export-copy strong {
  font-size: 0.9rem;
  font-weight: 900;
}

.placement-export-copy span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
}

.placement-actions {
  justify-content: flex-start;
  padding: 0;
}

.comparison-section {
  margin: 0 24px 18px;
}

.comparison-section h3 {
  margin: 0 0 10px;
  color: var(--steel);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
}

.selected-row {
  background: rgba(233, 88, 47, 0.09);
}

.table-link {
  border-radius: 999px;
  background: rgba(30, 77, 87, 0.1);
  color: var(--steel);
  padding: 7px 10px;
  box-shadow: none;
  font-size: 0.78rem;
  white-space: nowrap;
}

.table-link:hover {
  transform: none;
}

.report-output {
  margin: 0 24px 18px;
  border: 1px solid rgba(30, 77, 87, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.52);
  padding: 14px;
}

.report-output[hidden] {
  display: none;
}

.report-output > div {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--steel);
}

.report-output strong {
  font-size: 0.9rem;
}

.report-output span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.report-output textarea {
  width: 100%;
  min-height: 190px;
  max-height: 280px;
  margin: 0;
  background: #172522;
}

.alternative-card {
  border: 1px solid rgba(22, 32, 29, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.4);
  color: var(--ink);
  padding: 13px 14px;
  text-align: left;
  box-shadow: none;
}

.alternative-card.active {
  border-color: rgba(233, 88, 47, 0.45);
  background: rgba(233, 88, 47, 0.12);
}

.alternative-card strong {
  display: block;
  margin-bottom: 7px;
  color: var(--steel);
  font-size: 0.94rem;
}

.alternative-card span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.metric {
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(30, 77, 87, 0.13), rgba(255, 255, 255, 0.42));
  padding: 12px;
}

.metric.muted {
  background: rgba(255, 255, 255, 0.36);
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.metric strong {
  display: block;
  margin-top: 5px;
  font-size: 1.28rem;
  letter-spacing: 0;
}

.visual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 0 24px 18px;
}

.plot-stage {
  position: relative;
}

.viz-frame {
  position: relative;
  min-height: 340px;
  border: 1px solid rgba(22, 32, 29, 0.12);
  border-radius: 24px;
  background: linear-gradient(180deg, #fffdf8, #efe8d9);
  overflow: hidden;
}

.viz-placeholder {
  display: grid;
  min-height: inherit;
  place-content: center;
  margin: 0;
  border: 0;
  border-radius: 0;
  text-align: center;
}

.viz-frame-3d {
  min-height: clamp(540px, 58vh, 820px);
  background:
    radial-gradient(circle at 50% 16%, rgba(196, 220, 104, 0.22), transparent 18rem),
    linear-gradient(180deg, #fffdf8, #e7dfcf);
}

.plot-primary-export {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  width: min(240px, calc(100% - 32px));
}

.plot-primary-export .primary {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  font-size: 0.84rem;
}

.viewer3d {
  position: relative;
  min-height: clamp(540px, 58vh, 820px);
  overflow: hidden;
}

.viewer3d canvas {
  display: block;
  width: 100%;
  height: clamp(540px, 58vh, 820px);
  cursor: grab;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.88), rgba(239, 232, 217, 0.54) 58%, rgba(209, 219, 207, 0.52));
}

.viewer3d canvas:active {
  cursor: grabbing;
}

.viewer3d-fallback {
  display: grid;
  min-height: clamp(540px, 58vh, 820px);
  place-items: center;
  padding: 24px;
  color: var(--accent-dark);
  font-weight: 900;
  text-align: center;
}

.viewer-toolbar {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  z-index: 4;
}

.viewer-toolbar button {
  border: 1px solid rgba(22, 32, 29, 0.12);
  background: rgba(255, 250, 240, 0.86);
  color: var(--steel);
  padding: 8px 11px;
  box-shadow: 0 8px 22px rgba(23, 37, 34, 0.08);
  font-size: 0.78rem;
}

.viewer-legend {
  position: absolute;
  left: 16px;
  z-index: 4;
  border: 1px solid rgba(22, 32, 29, 0.1);
  border-radius: 18px;
  background: rgba(255, 250, 240, 0.78);
  box-shadow: 0 10px 28px rgba(23, 37, 34, 0.08);
  color: var(--steel);
  backdrop-filter: blur(12px);
}

.viewer-legend {
  bottom: 14px;
  display: grid;
  gap: 7px;
  max-width: min(300px, calc(100% - 32px));
  padding: 12px;
  font-size: 0.8rem;
}

.legend-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.legend-swatch {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  border: 1px solid rgba(22, 32, 29, 0.2);
}

.legend-swatch.door {
  border-color: rgba(233, 88, 47, 0.82);
  background:
    repeating-linear-gradient(135deg, rgba(233, 88, 47, 0.95) 0 3px, rgba(255, 250, 240, 0.72) 3px 6px),
    var(--accent);
}

.legend-count,
.legend-note {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.35;
}

.viewer-label-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.viewer-tooltip,
.plan-tooltip {
  position: absolute;
  width: max-content;
  max-width: min(300px, calc(100% - 32px));
  transform: translate(-50%, calc(-100% - 14px));
  border: 1px solid rgba(255, 250, 240, 0.14);
  border-radius: 18px;
  background: rgba(23, 37, 34, 0.93);
  color: #fffaf0;
  padding: 10px 12px;
  box-shadow: 0 16px 34px rgba(23, 37, 34, 0.22);
  backdrop-filter: blur(10px);
}

.plan-tooltip {
  max-width: min(270px, calc(100% - 32px));
  padding: 9px 11px;
}

.viewer-tooltip::after,
.plan-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(23, 37, 34, 0.93);
}

.viewer-tooltip strong,
.viewer-tooltip span,
.plan-tooltip strong,
.plan-tooltip span {
  position: relative;
  z-index: 1;
  display: block;
}

.viewer-tooltip strong,
.plan-tooltip strong {
  margin-bottom: 5px;
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.viewer-tooltip span,
.plan-tooltip span {
  color: rgba(255, 250, 240, 0.78);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
}

.validation {
  margin: 0 24px 18px;
  border-radius: 20px;
  padding: 14px 16px;
  background: rgba(196, 220, 104, 0.25);
  color: var(--steel);
  font-weight: 800;
}

.validation.invalid {
  background: rgba(233, 88, 47, 0.16);
  color: var(--accent-dark);
}

.table-wrap {
  max-height: 320px;
  margin: 0;
  border: 1px solid rgba(22, 32, 29, 0.12);
  border-radius: 22px;
  overflow: auto;
  background: rgba(255, 255, 255, 0.48);
}

.detail-panel {
  margin: 0 24px 24px;
}

.detail-panel summary {
  cursor: pointer;
  color: var(--steel);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.88rem;
}

th,
td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(22, 32, 29, 0.08);
  text-align: left;
}

.table-empty td {
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

th {
  position: sticky;
  top: 0;
  background: #fff7e8;
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .hero,
  .summary-panel,
  .workspace,
  .pilot-import-panel,
  .visual-grid {
    grid-template-columns: 1fr;
  }

  .output-panel {
    grid-column: auto;
  }

  .status-card {
    justify-self: start;
  }

  .summary-panel .panel-heading {
    flex-direction: row;
    justify-content: space-between;
  }

  .summary-panel .quality-summary {
    padding: 0 24px 14px;
  }

  .summary-panel .metrics {
    padding: 0 24px 18px;
  }

  .source-grid {
    grid-template-columns: 1fr;
  }

  textarea {
    min-height: 320px;
  }

  /* Below desktop: drop the desktop minimums that were forcing the action
     row and CSV row to be wider than their panel. Panels already stack at
     this breakpoint, so the controls inside them should reflow too. */
  .actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .actions select {
    min-width: 0;
    flex: 1 1 200px;
    width: auto;
  }

  .actions button,
  .csv-upload-row button {
    min-width: 0;
    flex-shrink: 1;
  }

  .csv-upload-row {
    grid-template-columns: 1fr;
  }

  .csv-upload-row button {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .rule-panel {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .shell {
    width: 100%;
    padding: 12px 8px 24px;
  }

  .hero {
    margin-bottom: 10px;
  }

  h1 {
    font-size: 1.55rem;
    line-height: 1.1;
  }

  .lede {
    font-size: 0.88rem;
  }

  .value-props {
    display: none;
  }

  /* Buttons: trim padding and font so they don't dominate the screen.
     Keep them comfortably tappable (44px height comes from font + padding). */
  button {
    padding: 10px 14px;
    font-size: 0.9rem;
  }

  select {
    padding: 10px 12px;
    font-size: 0.9rem;
  }

  .panel-heading {
    display: grid;
    grid-template-columns: 1fr;
    padding: 14px 14px 10px;
    gap: 10px;
  }

  /* Two-button rows stay side-by-side instead of stacking full-width.
     Stacked full-width buttons are what the user reported as "very large". */
  .actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  .actions .sample-select-label {
    grid-column: 1 / -1;
    align-self: start;
    margin-bottom: -2px;
  }

  .actions select {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .actions button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .settings-panel {
    margin: 0 8px 10px;
    border-radius: 18px;
    overflow: visible;
  }

  .pilot-import-panel {
    margin: 0 8px 10px;
  }

  .input-cta {
    margin: 0 8px 10px;
    flex-direction: column;
    align-items: stretch;
  }

  .input-cta .primary {
    width: 100%;
  }

  .csv-upload-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .csv-upload-row button {
    width: 100%;
    white-space: normal;
  }

  .metrics {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 16px 14px;
  }

  .alternatives {
    grid-template-columns: 1fr;
  }

  .constraint-workbench,
  .category-body,
  .priorities-body {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .rule-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .rule-tab {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 0.78rem;
  }

  .rule-panel {
    padding: 12px;
  }

  .constraint-switch,
  .setting-field {
    min-height: 0;
    padding: 10px 12px;
  }

  .settings-intro {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  .solution-status {
    grid-template-columns: 1fr;
  }

  textarea {
    min-height: 240px;
    font-size: 0.85rem;
  }

  .summary-panel,
  .summary-panel .panel-heading,
  .summary-panel .quality-summary,
  .summary-panel .metrics {
    padding-left: 16px;
    padding-right: 16px;
  }

  .status-card {
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  .quality-summary,
  .metrics,
  .alternatives,
  .visual-grid,
  .placement-actions {
    padding-left: 14px;
    padding-right: 14px;
  }

  .comparison-section,
  .report-output,
  .detail-panel,
  .validation,
  .placement-export-panel {
    margin-left: 14px;
    margin-right: 14px;
  }

  .table-wrap {
    border-radius: 16px;
  }

  th,
  td {
    padding: 10px 12px;
  }

  .viz-frame {
    min-height: 260px;
    height: 260px;
  }

  .viz-frame-3d,
  .viewer3d,
  .viewer3d canvas,
  .viewer3d-fallback {
    min-height: 420px;
    height: 420px;
  }

  .viewer-toolbar {
    left: 12px;
    right: 12px;
    justify-content: stretch;
  }

  .plot-primary-export {
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
  }

  .plot-primary-export .primary {
    width: 100%;
    min-width: 0;
  }

  .viewer-toolbar button {
    flex: 1 1 72px;
    min-height: 38px;
    padding: 8px 9px;
  }

  .viewer-legend {
    left: 12px;
    max-width: calc(100% - 24px);
  }
}

@media (max-width: 430px) {
  .shell {
    width: 100%;
    padding: 10px 5px 20px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  h1 {
    font-size: 1.3rem;
  }

  h2 {
    font-size: 1.15rem;
  }

  /* Single column for actions on the smallest screens — but with smaller
     buttons than before so they don't fill half the viewport. */
  .actions {
    grid-template-columns: 1fr;
  }

  button {
    padding: 9px 12px;
    font-size: 0.85rem;
  }

  .rule-selector {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .rule-tab {
    min-height: 36px;
    font-size: 0.72rem;
    padding: 6px 8px;
  }

  .metrics {
    grid-template-columns: 1fr;
  }

  .panel-heading {
    padding: 12px 12px 8px;
  }
}