:root {
  color-scheme: light;
  --ink: #10222b;
  --muted: #5c7078;
  --line: #d8e1e5;
  --panel: #ffffff;
  --soft: #eef5f7;
  --deep: #123c4a;
  --teal: #008f9f;
  --green: #26765c;
  --gold: #c8871f;
  --alert: #a84e33;
  --shadow: 0 14px 32px rgba(17, 52, 64, .10);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #f6f9fa;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 14px clamp(18px, 4vw, 52px);
  background: rgba(246, 249, 250, .95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--deep);
  color: #fff;
  font-weight: 800;
}

.brand small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.topbar nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  max-width: min(940px, 64vw);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 3px;
  scrollbar-width: thin;
}

nav a,
.filter,
.button,
.service-grid a {
  border: 1px solid var(--line);
  background: #fff;
  min-height: 40px;
}

nav a {
  flex: 0 0 auto;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

main {
  display: grid;
  gap: 34px;
}

.public-site main { grid-template-columns: minmax(0, 1fr); min-width: 0; }

.system-visual {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(420px, 1.22fr);
  gap: 22px;
  align-items: stretch;
  padding: clamp(22px, 3vw, 34px);
  background: #10222b;
  color: #fff;
  box-shadow: var(--shadow);
}

.visual-copy h2 {
  max-width: 520px;
  margin-bottom: 12px;
}

.visual-copy p:not(.eyebrow) {
  color: #d9e9ed;
  line-height: 1.6;
}

.visual-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.visual-kpis span {
  display: grid;
  gap: 3px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
}

.visual-kpis strong {
  color: #fff;
  font-size: 21px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.visual-kpis small {
  color: #b9d2d8;
  font-weight: 750;
  text-transform: uppercase;
  font-size: 11px;
}

.visual-board {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.visual-flow {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.flow-step {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 6px;
  min-width: 134px;
  padding: 13px;
  background: #f7fbfc;
  color: var(--ink);
  border-top: 4px solid var(--teal);
}

.flow-step b {
  color: var(--gold);
  font-size: 12px;
}

.flow-step span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.flow-step strong {
  color: var(--deep);
  line-height: 1.2;
}

.flow-step small {
  color: var(--muted);
  line-height: 1.35;
}

.flow-arrow {
  display: grid;
  place-items: center;
  color: #8fd4db;
  font-style: normal;
  font-weight: 900;
  font-size: 22px;
}

.visual-machine {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(240px, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px;
  background: #f7fbfc;
  color: var(--ink);
}

.visual-machine img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: var(--soft);
}

.visual-machine span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.visual-machine strong {
  display: block;
  margin: 8px 0 14px;
  color: var(--deep);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.05;
}

.visual-machine a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--deep);
  background: var(--deep);
  color: #fff;
  font-weight: 850;
}


.workbench {
  padding: clamp(20px, 4vw, 54px);
  background: linear-gradient(180deg, #e8f3f5 0%, #f6f9fa 100%);
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: start;
}

.planner,
.result,
.room,
.catalog,
.engineering,
.services {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.planner,
.result {
  padding: clamp(20px, 3vw, 34px);
}

.section-head {
  margin-bottom: 22px;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--teal);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 680px;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.02;
  margin-bottom: 0;
}

h2 {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
}

.preset-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 18px;
}

.preset {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--deep);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
}

.preset.active,
.preset:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.analysis-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  background: #f8fbfc;
  padding: 14px;
}

.analysis-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.analysis-findings {
  border: 1px solid var(--line);
  background: #fff;
  padding: 12px;
  color: var(--muted);
}

.analysis-findings p,
.analysis-findings ul {
  margin: 8px 0 0;
}

.finding-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.finding-list span {
  display: inline-grid;
  gap: 2px;
  min-width: 94px;
  padding: 8px 10px;
  background: var(--soft);
  color: var(--muted);
}

.finding-list strong {
  color: var(--deep);
  text-transform: uppercase;
  font-size: 11px;
}

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

label,
fieldset {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

input,
select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cbd8dd;
  background: #fbfdfe;
  color: var(--ink);
  padding: 0 12px;
  font: inherit;
}

fieldset {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  padding: 14px;
  margin: 2px 0 0;
}

legend {
  padding: 0 6px;
  color: var(--ink);
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--ink);
  font-weight: 650;
}

.check input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--teal);
}

.result {
  position: sticky;
  top: 86px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0;
}

.metrics span {
  border: 1px solid var(--line);
  padding: 13px;
  background: var(--soft);
}

.metrics strong,
.metrics small {
  display: block;
}

.metrics strong {
  font-size: 20px;
}

.metrics small {
  color: var(--muted);
  margin-top: 4px;
}

.actions {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  cursor: pointer;
  font-weight: 800;
  font: inherit;
}

.button.primary {
  background: var(--deep);
  color: #fff;
  border-color: var(--deep);
}

.button.secondary {
  color: var(--deep);
}

.checklist {
  display: grid;
  gap: 8px;
  padding-left: 18px;
  color: var(--muted);
}

.catalog,
.room,
.engineering,
.quote-request,
.execution,
.failure-guide,
.services {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(20px, 3vw, 34px);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.filter {
  padding: 0 14px;
  cursor: pointer;
  color: var(--muted);
  font-weight: 800;
}

.filter.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.product {
  display: grid;
  grid-template-rows: 190px 1fr;
  border: 1px solid var(--line);
  background: #fff;
  min-width: 0;
}

.product img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}

.product-body {
  padding: 14px;
}

.product h3 {
  font-size: 17px;
  line-height: 1.25;
  margin-bottom: 8px;
}

.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 11px 0;
}

.product-meta span {
  padding: 5px 8px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.price {
  color: var(--green);
  font-weight: 900;
  font-size: 20px;
}

.room {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(360px, 1.15fr) minmax(260px, .85fr);
  gap: 26px;
  align-items: start;
}

.room p {
  color: var(--muted);
  line-height: 1.6;
}

.readiness {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

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

.service-grid a {
  padding: 16px;
  font-weight: 850;
  color: var(--deep);
}

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  padding: 28px 18px 42px;
  color: var(--muted);
}

@media (max-width: 920px) {
  .topbar,
  .workspace,
  .system-visual,
  .visual-machine,
  .room {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: flex-start;
  }

  .workspace,
  .product-grid,
  .execution-grid,
  .phase-timeline,
  .quote-request-grid,
  .proposal-toolbar,
  .proposal-cover,
  .proposal-grid,
  .package-grid,
  .delivery-timeline,
  .service-plan-grid,
  .maintenance-calendar,
  .proposal-metrics,
  .proposal-lines,
  .proposal-timeline,
  .service-plan-grid,
  .maintenance-calendar,
  .quote-summary,
  .comparison-table,
  .business-viability,
  .compliance-grid,
  .engineering-grid,
  .service-grid {
    grid-template-columns: 1fr;
  }

  .result {
    position: static;
  }
}

@media (max-width: 620px) {
  .comparison-row {
    min-width: 780px;
    grid-template-columns: 1.55fr .7fr .8fr .85fr .65fr 1fr;
  }

  .topbar {
    display: grid;
  }

  nav {
    justify-content: flex-start;
  }

  .form-grid,
  .contact-form,
  .history-head,
  .history-row,
  .proposal-footer,
  fieldset,
  .readiness,
  .metrics,
  .consumable-row,
  .failure-head,
  .failure-row,
  .bom-head,
  .bom-row,
  .compliance-grid,
  .delivery-timeline {
    grid-template-columns: 1fr;
  }

  .visual-kpis {
    grid-template-columns: 1fr;
  }

  .visual-machine img {
    height: 180px;
  }

  .actions,
  .analysis-actions {
    display: grid;
  }
}

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

textarea {
  width: 100%;
  border: 1px solid #cbd8dd;
  background: #fbfdfe;
  color: var(--ink);
  padding: 12px;
  font: inherit;
  resize: vertical;
}

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

.execution-panel {
  border: 1px solid var(--line);
  background: #fff;
  padding: 16px;
}

.execution-panel.wide {
  grid-column: 1 / -1;
}

.execution-panel h3 {
  margin-bottom: 14px;
  font-size: 18px;
}

.task-list {
  display: grid;
  gap: 10px;
}

.task {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  color: var(--muted);
}

.task input {
  width: 18px;
  min-height: 18px;
  margin-top: 2px;
}

.task strong {
  display: block;
  color: var(--deep);
  margin-bottom: 3px;
}

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

.phase {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  background: #f8fbfc;
}

.phase b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--deep);
  color: #fff;
}

.phase strong {
  display: block;
  color: var(--deep);
  margin-bottom: 5px;
}

.phase p,
.open-questions p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.open-questions {
  display: grid;
  gap: 8px;
}

.open-questions p {
  padding: 11px 12px;
  border-left: 4px solid var(--gold);
  background: #fff8ea;
}

.quote-request-grid {
  display: grid;
  grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr);
  gap: 16px;
  align-items: start;
}

.contact-form,
.handoff-panel {
  border: 1px solid var(--line);
  background: #fff;
  padding: 16px;
}

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

.handoff-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.request-history {
  margin-top: 16px;
}

.request-history h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.history-table {
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}

.history-head,
.history-row {
  display: grid;
  grid-template-columns: .9fr 1fr 1.35fr .9fr .55fr;
}

.history-head {
  background: var(--deep);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.history-head span,
.history-row span {
  padding: 10px 11px;
  border-right: 1px solid var(--line);
  line-height: 1.35;
}

.history-head span:last-child,
.history-row span:last-child {
  border-right: 0;
}

.history-row {
  border-top: 1px solid var(--line);
}

.history-row:nth-child(odd) {
  background: #f8fbfc;
}

.history-row strong,
.history-row small {
  display: block;
}

.history-row strong {
  color: var(--deep);
}

.history-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.history-load {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--deep);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
}

.handoff-output {
  min-height: 300px;
  margin: 0;
  padding: 14px;
  background: #10222b;
  color: #e8f3f5;
  white-space: pre-wrap;
  overflow: auto;
}

.quote-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.viability-head {
  margin-top: 22px;
}

.comparison-head {
  margin-top: 22px;
}

.comparison-table {
  display: grid;
  gap: 0;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  background: #fff;
  overflow-x: auto;
}

.comparison-row {
  display: grid;
  grid-template-columns: 1.7fr .75fr .85fr .9fr .7fr 1.1fr;
  gap: 10px;
  align-items: stretch;
  min-width: 920px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.comparison-row:first-child {
  border-top: 0;
}

.comparison-head-row {
  background: var(--deep);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.comparison-row.selected {
  background: #f0faf8;
  box-shadow: inset 4px 0 0 #0d6b5f;
}

.comparison-row strong,
.comparison-row b {
  display: block;
  color: var(--deep);
  line-height: 1.25;
}

.comparison-head-row strong,
.comparison-head-row b {
  color: #fff;
}

.comparison-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.comparison-head-row small {
  color: #d8eef0;
}


.business-viability {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.viability-card {
  border: 1px solid var(--line);
  background: #fff;
  padding: 14px;
  min-width: 0;
}

.viability-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.viability-card strong {
  display: block;
  margin-top: 7px;
  color: var(--deep);
  font-size: 19px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.viability-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.viability-card.total {
  background: #0d6b5f;
  border-color: #0d6b5f;
}

.viability-card.total span,
.viability-card.total strong,
.viability-card.total p {
  color: #fff;
}

.quote-metric,
.quote-status,
.consumables {
  border: 1px solid var(--line);
  background: #fff;
  padding: 14px;
}

.quote-metric span,
.quote-status span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.quote-metric strong,
.quote-status strong {
  display: block;
  margin-top: 6px;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.2;
}

.quote-metric.total {
  background: var(--deep);
  border-color: var(--deep);
}

.quote-metric.total span,
.quote-metric.total strong {
  color: #fff;
}

.quote-status {
  grid-column: span 2;
}

.consumables {
  grid-column: span 4;
  display: grid;
  gap: 8px;
}

.consumables h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.consumable-row {
  display: grid;
  grid-template-columns: 1fr .8fr 1.6fr;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  align-items: start;
}

.consumable-row strong {
  color: var(--deep);
}

.consumable-row span {
  color: var(--green);
  font-weight: 900;
}

.consumable-row p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.failure-table {
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}

.failure-head,
.failure-row {
  display: grid;
  grid-template-columns: .85fr 1.45fr 1.55fr 1.15fr;
}

.failure-head {
  background: var(--deep);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.failure-head span,
.failure-row span,
.failure-row strong {
  padding: 13px;
  border-right: 1px solid var(--line);
  line-height: 1.4;
}

.failure-head span:last-child,
.failure-row span:last-child {
  border-right: 0;
}

.failure-row {
  color: var(--ink);
  border-top: 1px solid var(--line);
}

.failure-row:nth-child(odd) {
  background: #f8fbfc;
}

.failure-row strong {
  color: var(--alert);
}

.engineering-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 16px;
  align-items: start;
}

.bom-panel,
.sizing-panel {
  border: 1px solid var(--line);
  background: #fff;
  padding: 16px;
}

.bom-panel h3,
.sizing-panel h3 {
  margin-bottom: 14px;
  font-size: 18px;
}

.bom-table {
  border: 1px solid var(--line);
  overflow: hidden;
}

.bom-head,
.bom-row {
  display: grid;
  grid-template-columns: .75fr 1.25fr .55fr 2fr;
  gap: 0;
  align-items: stretch;
}

.bom-head {
  background: var(--deep);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.bom-head span,
.bom-row span,
.bom-row strong {
  padding: 11px 12px;
  border-right: 1px solid var(--line);
  line-height: 1.35;
}

.bom-head span:last-child,
.bom-row span:last-child {
  border-right: 0;
}

.bom-row {
  min-height: 58px;
  color: var(--ink);
  border-top: 1px solid var(--line);
}

.bom-row:nth-child(even) {
  background: #f8fbfc;
}

.bom-row strong {
  color: var(--deep);
}

.sizing-output {
  margin: 0;
  min-height: 220px;
  padding: 14px;
  background: #10222b;
  color: #e8f3f5;
  white-space: pre-wrap;
  overflow: auto;
}

.sizing-head {
  margin-top: 24px;
}

.treatment-sizing {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.sizing-card {
  border: 1px solid var(--line);
  background: #fff;
  padding: 15px;
  min-width: 0;
}

.sizing-card span {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  background: var(--soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.sizing-card strong {
  display: block;
  margin: 10px 0 7px;
  color: var(--deep);
  font-size: 17px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sizing-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}



.proposal {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(20px, 3vw, 34px);
  background: #f7fbfc;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.proposal-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.proposal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.proposal-preview {
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
}

.proposal-cover {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding: clamp(20px, 3vw, 32px);
  background: #10222b;
  color: #fff;
}

.proposal-cover span,
.proposal-cover small {
  color: #b9d2d8;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.proposal-cover h3 {
  max-width: 780px;
  margin: 8px 0;
  color: #fff;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
}

.proposal-cover p {
  max-width: 760px;
  margin: 0;
  color: #d9e9ed;
}

.proposal-cover aside {
  display: grid;
  align-content: start;
  gap: 6px;
  text-align: right;
}

.proposal-cover aside strong {
  color: #fff;
  font-size: 22px;
}

.proposal-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.proposal-metrics span {
  padding: 15px;
  border-right: 1px solid var(--line);
}

.proposal-metrics span:last-child {
  border-right: 0;
}

.proposal-metrics strong,
.proposal-metrics small {
  display: block;
}

.proposal-metrics strong {
  color: var(--deep);
  font-size: 20px;
  line-height: 1.15;
}

.proposal-metrics small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

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

.proposal-block {
  padding: 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proposal-block:nth-child(even) {
  border-right: 0;
}

.proposal-block.wide {
  grid-column: 1 / -1;
  border-right: 0;
}

.proposal-block h4 {
  margin: 0 0 10px;
  color: var(--deep);
  font-size: 18px;
}

.proposal-block p,
.proposal-block li {
  color: var(--muted);
  line-height: 1.45;
}

.proposal-block ul {
  margin: 0;
  padding-left: 18px;
}

.proposal-lines,
.proposal-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.proposal-lines span,
.proposal-timeline span {
  display: grid;
  gap: 5px;
  padding: 12px;
  background: #f8fbfc;
  border-left: 4px solid var(--teal);
}

.proposal-lines b,
.proposal-timeline b {
  color: var(--gold);
  font-size: 12px;
  text-transform: uppercase;
}

.proposal-lines strong,
.proposal-timeline strong {
  color: var(--deep);
  line-height: 1.2;
}

.proposal-lines small,
.proposal-timeline small {
  color: var(--muted);
  line-height: 1.35;
}

.proposal-footer {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: #f8fbfc;
  color: var(--muted);
}

.proposal-footer a {
  color: var(--deep);
  font-weight: 900;
}

.project-package {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(20px, 3vw, 34px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.package-panel {
  border: 1px solid var(--line);
  background: #fff;
  padding: 16px;
}

.package-panel h3 {
  margin-bottom: 12px;
  font-size: 18px;
}

.package-wide {
  grid-column: 1 / -1;
}

.package-list,
.compliance-grid,
.delivery-timeline {
  display: grid;
  gap: 10px;
}

.package-item {
  padding: 12px;
  background: #f8fbfc;
  border-left: 4px solid var(--teal);
}

.package-item strong,
.compliance-card strong,
.delivery-step strong {
  display: block;
  color: var(--deep);
  line-height: 1.25;
}

.package-item p,
.compliance-card p,
.delivery-step p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

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

.compliance-card {
  min-height: 132px;
  padding: 12px;
  border: 1px solid var(--line);
  background: #f9fcfd;
}

.compliance-card span {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 4px 7px;
  background: var(--soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.compliance-card.required span,
.compliance-card.phase-review span,
.compliance-card.review span {
  background: #fff0eb;
  color: var(--alert);
}

.compliance-card.started span,
.compliance-card.basic span,
.compliance-card.optional span,
.compliance-card.single-phase-review span {
  background: #edf8f3;
  color: var(--green);
}

.delivery-timeline {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.delivery-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 13px;
  background: #10222b;
  color: #fff;
}

.delivery-step b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--gold);
  color: #fff;
}

.delivery-step strong {
  color: #fff;
}

.delivery-step p {
  color: #d9e9ed;
}

.utility-head {
  margin-top: 24px;
}

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

.utility-card {
  border: 1px solid var(--line);
  background: #fff;
  padding: 15px;
}

.utility-card span {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  background: var(--soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.utility-card strong {
  display: block;
  margin: 10px 0 7px;
  color: var(--deep);
  font-size: 18px;
}

.utility-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.sku-head {
  margin-top: 24px;
}

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

.sku-card {
  display: grid;
  grid-template-rows: 130px 1fr;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}

.sku-card img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  background: var(--soft);
}

.sku-card div {
  display: grid;
  gap: 8px;
  padding: 13px;
}

.sku-card small {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.sku-card h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
}

.sku-card strong {
  color: var(--green);
}

.sku-card a {
  align-self: end;
  color: var(--deep);
  font-weight: 900;
}

.bom-row strong small {
  display: block;
  margin-top: 3px;
  color: var(--green);
  font-size: 12px;
}

.risk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.risk-card {
  border: 1px solid var(--line);
  background: #fff;
  padding: 15px;
}

.risk-card span {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  background: #fff0eb;
  color: var(--alert);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.risk-card h3 {
  margin: 10px 0 8px;
  font-size: 16px;
  line-height: 1.25;
}

.risk-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.stack,
.families,
.manual {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(20px, 3vw, 34px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

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

.stack-card {
  min-height: 170px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.stack-card strong {
  color: var(--deep);
  font-size: 15px;
}

.stack-card span {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  background: var(--soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.stack-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.family-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.family-filter {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font-weight: 850;
}

.family-filter.active {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
}

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

.family-card {
  display: grid;
  grid-template-rows: 150px 1fr;
  min-height: 310px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}

.family-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  background: var(--soft);
}

.family-body {
  display: grid;
  gap: 10px;
  padding: 15px;
}

.family-card small {
  color: var(--teal);
  font-weight: 900;
  text-transform: uppercase;
}

.family-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.family-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 13px;
}

.family-card a {
  align-self: end;
  color: var(--deep);
  font-weight: 900;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.module {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.module input {
  width: 18px;
  min-height: 18px;
  margin-right: 8px;
}

.manual-output {
  min-height: 140px;
  margin: 18px 0 0;
  padding: 14px;
  white-space: pre-wrap;
  background: #10222b;
  color: #e8f3f5;
  overflow: auto;
}

@media (max-width: 1100px) {
  .stack-grid,
  .family-grid,
  .sku-grid,
  .treatment-sizing,
  .utility-grid,
  .business-viability,
  .package-grid,
  .delivery-timeline,
  .service-plan-grid,
  .maintenance-calendar,
  .package-grid,
  .delivery-timeline,
  .service-plan-grid,
  .maintenance-calendar,
  .risk-grid,
  .lead-pipeline-grid,
  .renewal-grid,
  .payment-grid,
  .success-grid,
  .dispatch-grid,
  .reservation-grid,
  .supplier-po-grid,
  .amc-contract-grid,
  .site-survey-grid,
  .batch-traceability-grid,
  .commissioning-report-grid,
  .coverage-issue-grid,
  .risk-register-grid,
  .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .stack-grid,
  .family-grid,
  .sku-grid,
  .treatment-sizing,
  .utility-grid,
  .business-viability,
  .package-grid,
  .delivery-timeline,
  .service-plan-grid,
  .maintenance-calendar,
  .package-grid,
  .delivery-timeline,
  .service-plan-grid,
  .maintenance-calendar,
  .risk-grid,
  .lead-pipeline-grid,
  .renewal-grid,
  .payment-grid,
  .success-grid,
  .dispatch-grid,
  .reservation-grid,
  .supplier-po-grid,
  .amc-contract-grid,
  .site-survey-grid,
  .batch-traceability-grid,
  .commissioning-report-grid,
  .coverage-issue-grid,
  .risk-register-grid,
  .module-grid,
  .service-plan-grid,
  .maintenance-calendar {
    grid-template-columns: 1fr;
  }
}

.layout-panel {
  border: 1px solid var(--line);
  background: #f9fcfd;
  min-height: 420px;
  padding: 12px;
}

#roomDiagram {
  width: 100%;
  height: auto;
  display: block;
}

.room-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.room-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.room-legend i {
  width: 12px;
  height: 12px;
  display: inline-block;
}

.iso-label {
  fill: #10222b;
  font-size: 13px;
  font-weight: 900;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
}


.service-plan {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(20px, 3vw, 34px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.service-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.service-panel {
  border: 1px solid var(--line);
  background: #fff;
  padding: 16px;
}

.service-panel.wide {
  grid-column: 1 / -1;
}

.service-panel h3 {
  margin-bottom: 12px;
  font-size: 18px;
}

.maintenance-calendar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.maintenance-card,
.service-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: #f8fbfc;
  border-left: 4px solid var(--teal);
}

.maintenance-card span,
.service-item span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.maintenance-card strong,
.service-item strong {
  color: var(--deep);
  line-height: 1.25;
}

.maintenance-card p,
.service-item p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

.service-list,
.operator-log {
  display: grid;
  gap: 10px;
}

.service-item.alert {
  border-left-color: var(--alert);
  background: #fff8f5;
}

.log-point {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px;
  border: 1px solid var(--line);
  background: #f8fbfc;
  color: var(--ink);
  font-weight: 750;
}

.log-point input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--teal);
}

.quote {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(20px, 3vw, 34px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.quote-output {
  min-height: 220px;
  margin: 0;
  padding: 16px;
  background: #f7fafb;
  border: 1px solid var(--line);
  white-space: pre-wrap;
  color: var(--ink);
  overflow: auto;
}

@media (max-width: 920px) {
  .layout-panel {
    grid-column: auto;
  }
}

@media print {
  .topbar,
  .catalog,
  .families,
  .manual,
  .services,
  .filters,
  .family-toolbar,
  .actions,
  footer {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .workbench,
  .stack,
  .engineering,
  .quote-request,
  .execution,
  .failure-guide,
  .room,
  .quote {
    box-shadow: none;
    width: 100%;
    border: 0;
    padding: 12px;
  }

  .workspace,
  .room {
    display: block;
  }

  .result {
    position: static;
    box-shadow: none;
  }
}


.solutions {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.solution-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.solution-intro p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.solution-card {
  display: grid;
  align-content: start;
  gap: 13px;
  min-height: 100%;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.solution-card.recommended {
  border-top: 5px solid var(--gold);
}

.solution-topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.solution-topline span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.solution-topline strong {
  max-width: 210px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
}

.solution-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 21px;
  line-height: 1.18;
}

.solution-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.solution-details {
  display: grid;
  gap: 9px;
  margin: 0;
}

.solution-details div {
  display: grid;
  gap: 3px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.solution-details dt {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.solution-details dd {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.solution-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.solution-links a:not(.button) {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--deep);
  font-size: 13px;
  font-weight: 800;
}


@media (max-width: 980px) {
  .solution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .solution-topline {
    display: grid;
  }

  .solution-topline strong {
    max-width: none;
    text-align: left;
  }
}


.hmap-explorer { width: min(1240px, calc(100% - 36px)); margin: 0 auto; display: grid; gap: 18px; }

.analysis-decoder {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.analysis-first-step {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  gap: 16px;
  align-items: stretch;
}

.analysis-first-inputs,
.analysis-first-guide {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.analysis-first-inputs label {
  display: grid;
  gap: 7px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.analysis-first-inputs textarea,
.analysis-first-inputs input[type=file] {
  width: 100%;
  box-sizing: border-box;
}

.analysis-first-inputs textarea {
  min-height: 96px;
  resize: vertical;
}

.analysis-first-inputs small,
.analysis-first-guide p {
  color: var(--muted);
  line-height: 1.45;
}

.analysis-first-guide {
  align-content: start;
  background: linear-gradient(145deg, #082b43, #0c5160);
  border-color: #0b6471;
  color: #fff;
}

.analysis-first-guide .eyebrow,
.analysis-first-guide strong {
  color: #fff;
}

.analysis-first-guide strong {
  font-size: 22px;
  line-height: 1.15;
}

.analysis-first-guide p {
  color: #d8f2f3;
  margin: 0;
}

.analysis-first-guide .button {
  align-self: end;
  justify-self: start;
}


.location-share-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #b9dfe1;
  background: #effafa;
}
.location-share-card h3 { margin: 2px 0 0; color: var(--deep); }
.location-share-card p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.location-share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.location-profile-select { display: grid; gap: 6px; color: var(--deep); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.location-profile-select select { width: 100%; box-sizing: border-box; }
.location-profile-result { display: grid; gap: 4px; color: var(--deep); font-size: 12px; line-height: 1.45; }
.hmap-map-shell { display: grid; gap: 7px; margin-top: 2px; border: 1px solid #b9dfe1; background: #fff; }
.hmap-map-head { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px 0; color: var(--deep); font-size: 12px; }
.hmap-map-head span { color: var(--muted); font-size: 11px; }
.hmap-map-stage { position: relative; min-height: 520px; overflow: hidden; background: #e8f3f4; }
.hmap-live-map { position: relative; min-height: 520px; width: 100%; z-index: 2; background: transparent !important; }
.hmap-map-fallback { position: absolute; inset: 0; z-index: 1; overflow: hidden; color: #164653; background: radial-gradient(circle at 55% 40%, #f8ffff 0, #d9edef 60%, #c4e1e4 100%); }
.hmap-fallback-grid { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(30deg, transparent 48%, #86bfc5 49%, transparent 51%), linear-gradient(150deg, transparent 48%, #86bfc5 49%, transparent 51%); background-size: 90px 90px; }
.hmap-fallback-title { position: absolute; top: 20px; left: 24px; padding: 9px 12px; border-radius: 7px; background: rgba(255,255,255,.9); font-size: 14px; font-weight: 900; }
.hmap-map-fallback small { position: absolute; left: 24px; bottom: 20px; padding: 8px 10px; background: rgba(255,255,255,.9); color: #55767b; }
.hmap-town { position: absolute; padding: 6px 9px; border: 2px solid #13808e; border-radius: 999px; background: #fff; color: #0b5662; font-size: 11px; font-weight: 900; box-shadow: 0 3px 10px rgba(13,73,82,.15); }
.hmap-decision-board { width: min(1240px, calc(100% - 36px)); margin: 28px auto; padding: 24px; border: 1px solid #b9dfe1; background: linear-gradient(135deg,#f1fbfb,#fff); }
.decision-board-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.decision-board-grid article { display: grid; gap: 8px; align-content: start; min-height: 205px; padding: 16px; border: 1px solid #cfe5e7; background: #fff; box-shadow: 0 8px 22px rgba(13,73,82,.06); }
.decision-board-grid h3 { margin: 0; color: var(--deep); }
.decision-board-grid p { margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.decision-index { color: #0d7180; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.decision-board-grid .button { align-self: end; justify-self: start; }
.decision-board-footer { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 14px; padding: 12px 14px; border: 1px dashed #9fcdd1; color: var(--deep); font-size: 12px; }
.decision-board-footer span { color: var(--muted); }
.decision-board-footer button { margin-left: auto; }
.launch-readiness { margin-top: 18px; padding: 16px; border: 1px solid #cfe5e7; background: #fff; }
.launch-readiness-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.launch-readiness-head h3 { margin: 3px 0; color: var(--deep); }
.launch-readiness-head p { margin: 0; color: var(--muted); font-size: 12px; }
.launch-readiness-head strong { padding: 7px 10px; border-radius: 999px; background: #e9f7f7; color: #0d7180; font-size: 12px; white-space: nowrap; }
.launch-readiness-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.launch-readiness-grid label { display: flex; gap: 8px; align-items: start; padding: 11px; border: 1px solid #e0eeee; color: var(--deep); font-size: 12px; line-height: 1.35; cursor: pointer; }
.launch-readiness-grid input { accent-color: #0d7180; margin-top: 2px; }
.launch-readiness-grid label:has(input:checked) { border-color: #85c5c9; background: #f0fbfa; text-decoration: line-through; color: #55767b; }
.launch-readiness-next { margin-top: 12px; padding: 9px 10px; background: #f7fbfb; color: var(--muted); font-size: 11px; }
.delivery-timeline { margin-top: 18px; padding: 16px; border: 1px solid #cfe5e7; background: #fafdfe; }
.delivery-timeline-track { display: grid; grid-template-columns: repeat(7,minmax(92px,1fr)); gap: 8px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; }
.delivery-timeline-track article { position: relative; display: grid; gap: 5px; min-width: 92px; padding: 12px 10px; border-top: 3px solid #0d7180; background: #fff; }
.delivery-timeline-track article:not(:last-child)::after { content: "→"; position: absolute; right: -11px; top: 19px; z-index: 2; color: #0d7180; font-weight: 900; }
.delivery-timeline-track b { color: #0d7180; font-size: 10px; }
.delivery-timeline-track strong { color: var(--deep); font-size: 12px; }
.delivery-timeline-track span { color: var(--muted); font-size: 10px; }
.approval-pack { margin-top: 18px; padding: 16px; border: 1px solid #cfe5e7; background: #fff; }
.approval-pack-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.approval-pack-grid a { display: grid; gap: 6px; padding: 14px; border: 1px solid #d9ebed; background: #fafdfe; color: inherit; text-decoration: none; }
.approval-pack-grid a:hover { border-color: #0d7180; transform: translateY(-1px); }
.approval-pack-grid span { color: #0d7180; font-size: 10px; font-weight: 900; }
.approval-pack-grid strong { color: var(--deep); font-size: 13px; }
.approval-pack-grid small { color: var(--muted); font-size: 11px; line-height: 1.45; }
@media (max-width: 650px) { .approval-pack-grid { grid-template-columns: 1fr; } }
.risk-board { margin-top: 18px; padding: 16px; border: 1px solid #ead8b2; background: #fffdf7; }
.risk-board-status { padding: 7px 10px; border-radius: 999px; background: #fff0c7; color: #795313; font-size: 11px; font-weight: 900; white-space: nowrap; }
.risk-board-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.risk-board-grid label { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px; border: 1px solid #eadfca; background: #fff; }
.risk-board-grid span { display: grid; gap: 4px; }
.risk-board-grid b { color: var(--deep); font-size: 12px; }
.risk-board-grid small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.risk-board-grid select { min-height: 32px; }
@media (max-width: 600px) { .risk-board-grid { grid-template-columns: 1fr; } }
.site-notes-board { margin-top: 18px; padding: 16px; border: 1px solid #cfe5e7; background: #f7fcfc; }
.site-notes-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.site-notes-grid label { display: grid; gap: 6px; color: var(--deep); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.site-notes-grid textarea { width: 100%; box-sizing: border-box; resize: vertical; padding: 9px; border: 1px solid #cfe2e5; background: #fff; color: var(--deep); font: inherit; font-size: 12px; font-weight: 400; text-transform: none; }
.industrial-family-picker { display: grid; gap: 12px; margin: 16px 0; padding: 16px; border: 1px solid #a7c9cd; border-radius: 12px; background: linear-gradient(145deg,#f8ffff,#e5f1f2); box-shadow: 0 10px 24px rgba(8,57,66,.1), inset 0 1px #fff; }
.industrial-family-picker h2 { margin: 3px 0; color: var(--deep); }
.industrial-family-picker p { margin: 0; color: var(--muted); font-size: 12px; }
.industrial-family-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.industrial-family-grid button { display: grid; gap: 6px; min-height: 98px; padding: 12px; border: 1px solid #b8d7da; border-radius: 8px; background: linear-gradient(145deg,#fff,#edf8f8); color: var(--deep); text-align: left; cursor: pointer; box-shadow: inset 0 1px #fff,0 4px 10px rgba(8,57,66,.06); }
.industrial-family-grid button:hover, .industrial-family-grid button.is-active { border-color: #0d858d; background: linear-gradient(145deg,#e7ffff,#c4e9e8); box-shadow: 0 0 0 2px rgba(13,133,141,.14), inset 0 1px #fff; }
.industrial-family-grid strong { font-size: 12px; }
.industrial-family-grid small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.industrial-family-status { padding: 8px 10px; border-left: 3px solid #0d858d; background: rgba(255,255,255,.65); }
@media (max-width: 900px) { .industrial-family-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 560px) { .industrial-family-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.build-release-rail { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
.build-release-rail a { display: grid; gap: 4px; padding: 12px; border: 1px solid #cfe5e7; background: #f7fcfc; color: inherit; text-decoration: none; }
.build-release-rail a:hover { border-color: #0d7180; background: #fff; }
.build-release-rail span { color: #0d7180; font-size: 10px; font-weight: 900; }
.build-release-rail strong { color: var(--deep); font-size: 12px; }
.build-release-rail small { color: var(--muted); font-size: 10px; }
@media (max-width: 650px) { .build-release-rail { grid-template-columns: repeat(2,minmax(0,1fr)); } }
/* Final menu contrast override: light metal surface with graphite labels. */
.component-side-menu { background: linear-gradient(180deg,#ffffff 0%,#eaf2f3 100%) !important; border-right-color: #b8cdd0 !important; }
.component-side-menu a strong { color: #15343d !important; text-shadow: none; }
.component-side-menu a strong, .component-side-menu a:hover strong, .component-side-menu a.active strong { color: #000000 !important; }
.component-menu-filters button { color: #000000 !important; }
.component-menu-filters button.is-active { color: #ffffff !important; }
.component-side-menu nav a,
.component-side-menu nav a strong,
.component-side-menu nav a span { color: #000000 !important; }
.component-side-menu nav a:hover,
.component-side-menu nav a.active { color: #000000 !important; }
.component-side-menu-head,
.component-side-menu-head span,
.component-side-menu-head strong { color: #000000 !important; }
/* Final readable pairing for the requested black menu typography. */
#componentSideMenu,
#componentSideMenu .component-side-menu-head,
#componentSideMenu nav { background: #ffffff !important; }
#componentSideMenu a,
#componentSideMenu a strong,
#componentSideMenu a span,
#componentSideMenu .component-side-menu-head,
#componentSideMenu .component-side-menu-head span,
#componentSideMenu .component-side-menu-head strong { color: #000000 !important; }
.component-side-menu a:hover strong, .component-side-menu a.active strong { color: #063f4a !important; }
.component-side-menu a:hover, .component-side-menu a.active { background: linear-gradient(135deg,#e8fbfb,#d8eeee); border-color: #8fc3c7; }
@media (max-width: 600px) { .site-notes-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .decision-board-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) { .launch-readiness-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .hmap-decision-board { width: calc(100% - 24px); padding: 16px; } .decision-board-grid, .launch-readiness-grid { grid-template-columns: 1fr; } .decision-board-footer button { margin-left: 0; width: 100%; } }
.hmap-fallback-pin { position: absolute; z-index: 5; transform: translate(-50%, -50%); width: 24px; height: 24px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: #e85d4a; color: #fff; font-size: 16px; line-height: 17px; box-shadow: 0 2px 8px rgba(71,35,27,.35); cursor: pointer; }
.town-nairobi { left: 54%; top: 42%; } .town-mombasa { left: 82%; top: 78%; } .town-kisumu { left: 26%; top: 48%; } .town-nakuru { left: 45%; top: 35%; } .town-eldoret { left: 31%; top: 28%; }
.leaflet-container { background: transparent !important; }
.hmap-live-map .leaflet-tile-pane { background: transparent !important; }
.hmap-live-map .leaflet-tile { background: transparent !important; }
.hmap-live-map.is-tile-fallback { z-index: 0 !important; pointer-events: none; }
.hmap-live-map.is-tile-fallback .leaflet-tile-pane { display: none !important; }
.hmap-map-fallback.is-tile-fallback { z-index: 3; }
.hmap-live-map .leaflet-map-pane, .hmap-live-map .leaflet-pane, .hmap-live-map .leaflet-control-container { background: transparent !important; }
.hmap-live-map { background: transparent !important; }
.water-pin-tools { display: flex; flex-wrap: wrap; gap: 9px; align-items: end; padding: 10px; border: 1px solid #d9ebed; background: #f8fcfc; }
.water-pin-tools label { display: grid; gap: 5px; min-width: min(360px, 100%); color: var(--deep); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.water-pin-tools input { min-height: 36px; padding: 7px 9px; border: 1px solid #bdd7da; }
.water-pin-inspector { display: grid; gap: 10px; padding: 14px; border: 1px solid #a9d4d8; background: linear-gradient(135deg, #f1fbfb, #fff); }
.water-pin-inspector h3 { margin: 3px 0; color: var(--deep); }
.water-pin-inspector small { color: var(--muted); }
.water-pin-inspector-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.water-pin-inspector-grid article { display: grid; gap: 4px; padding: 9px; background: #fff; border: 1px solid #d4e8ea; }
.water-pin-inspector-grid span, .water-pin-recommendations b { color: var(--teal); font-size: 11px; text-transform: uppercase; }
.water-pin-inspector-grid strong { color: var(--deep); font-size: 12px; line-height: 1.4; }
.water-pin-recommendations { display: grid; gap: 7px; }
.water-pin-recommendations div { display: flex; flex-wrap: wrap; gap: 7px; }
.water-pin-product-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; }
.water-pin-product-card { display: grid; gap: 5px; padding: 10px; border: 1px solid #c9e2e4; background: #fff; }
.water-pin-product-card div { display: grid; gap: 3px; }
.water-pin-product-card span { color: var(--teal); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.water-pin-product-card strong { color: var(--deep); font-size: 13px; }
.water-pin-product-card small, .water-pin-product-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.water-pin-product-card button { justify-self: start; padding: 7px 9px; border: 1px solid #16818f; background: #0d7180; color: #fff; font: inherit; font-size: 11px; font-weight: 800; }
@media (max-width: 680px) { .water-pin-product-grid { grid-template-columns: 1fr; } }
.water-pin-decision { display: block; color: #a45e13; font-size: 12px; line-height: 1.45; }
.water-pin-analysis { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 8px; border-top: 1px solid #d4e8ea; }
.water-pin-analysis span { color: var(--teal); font-size: 11px; text-transform: uppercase; }
.water-pin-analysis strong { color: var(--deep); font-size: 12px; }
.water-pin-analysis button { margin-left: auto; padding: 8px 10px; border: 1px solid #16818f; background: #0d7180; color: #fff; font: inherit; font-size: 11px; font-weight: 800; }
.water-pin-recommendations button { padding: 8px 10px; border: 1px solid #16818f; background: #fff; color: #0b5662; font: inherit; font-size: 11px; font-weight: 800; }
.water-pin-list { display: grid; gap: 8px; }
.water-pin-list article { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(220px, 1.3fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid #d4e8ea; background: #fff; }
.water-pin-list article div, .water-pin-list article span { display: grid; gap: 3px; color: var(--deep); font-size: 12px; }
.water-pin-list article small { color: var(--muted); }
.water-pin-list article span { color: var(--teal); font-size: 11px; }
.water-pin-list article button { border: 1px solid #bdd7da; background: #effafa; color: var(--deep); padding: 7px 10px; font: inherit; font-size: 11px; font-weight: 800; }
@media (max-width: 680px) { .water-pin-list article { grid-template-columns: 1fr; } .water-pin-list article button { justify-self: start; } }
.location-profile-result span { color: var(--muted); }
.location-profile-result p, .location-profile-result small { margin: 0; color: var(--muted); }
.location-share-status, .location-share-results { color: var(--deep); font-size: 12px; line-height: 1.45; }
.location-share-status a { color: var(--teal); font-weight: 800; }

.decoder-grid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(520px, 1.28fr);
  gap: 16px;
  align-items: start;
}

.decoder-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.decoder-panel h3 {
  margin: 0;
  color: var(--deep);
}

.analysis-scorecard,
.parameter-guide {
  display: grid;
  gap: 10px;
}

.score-summary,
.score-row,
.parameter-card {
  border: 1px solid var(--line);
  background: #f9fcfd;
}

.score-summary {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-left: 5px solid var(--teal);
}

.score-summary.fail { border-left-color: var(--alert); }
.score-summary.caution { border-left-color: var(--gold); }
.score-summary.good { border-left-color: var(--green); }

.score-summary span,
.score-row span,
.parameter-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.score-summary strong {
  color: var(--deep);
  font-size: 22px;
  line-height: 1.15;
}

.score-summary p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.score-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 12px;
}

.score-row strong {
  color: var(--deep);
}

.score-row small {
  min-width: 70px;
  padding: 5px 8px;
  text-align: center;
  color: #fff;
  background: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 10px;
}

.score-row.good small { background: var(--green); }
.score-row.caution small { background: var(--gold); }
.score-row.fail small { background: var(--alert); }

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

.parameter-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-top: 4px solid var(--muted);
}

.parameter-card.good { border-top-color: var(--green); }
.parameter-card.caution { border-top-color: var(--gold); }
.parameter-card.fail { border-top-color: var(--alert); }

.parameter-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.parameter-head strong {
  color: var(--deep);
  text-align: right;
}

.thresholds {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.parameter-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.parameter-card p strong {
  color: var(--ink);
}

.parameter-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.parameter-links a {
  padding: 7px 9px;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--deep);
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 980px) {
  .analysis-first-step,
  .decoder-grid,
  .parameter-guide {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .score-row {
    grid-template-columns: 1fr;
  }

  .score-row small {
    width: max-content;
  }
}


.machine-renderer {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.machine-renderer-grid {
  display: grid;
  grid-template-columns: 170px minmax(420px, 1fr) minmax(260px, .42fr);
  gap: 16px;
  align-items: stretch;
}

.machine-controls,
.machine-spec-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.machine-tab {
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--deep);
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.machine-tab.active {
  background: var(--deep);
  color: #fff;
  border-color: var(--deep);
}

.machine-stage {
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.machine-stage svg {
  display: block;
  width: 100%;
  aspect-ratio: 980 / 520;
  min-height: 360px;
}

.machine-title {
  fill: var(--deep);
  font-size: 25px;
  font-weight: 900;
}

.machine-subtitle {
  fill: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

.machine-label {
  fill: var(--deep);
  font-size: 13px;
  font-weight: 900;
}

.machine-spec-panel h3 {
  margin: 0;
  color: var(--deep);
  font-size: 22px;
  line-height: 1.16;
}

.machine-spec-panel p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.machine-specs {
  display: grid;
  gap: 8px;
}

.machine-specs span {
  padding: 9px 10px;
  background: var(--soft);
  border-left: 4px solid var(--teal);
  color: var(--deep);
  font-weight: 800;
}

.machine-render-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.machine-render-links a {
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}



.plc-simulator {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.plc-toolbar,
.plc-grid {
  display: grid;
  gap: 16px;
}

.plc-toolbar {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.plc-grid {
  grid-template-columns: 250px minmax(360px, 1fr) minmax(330px, .6fr);
  align-items: stretch;
}

.plc-controls,
.plc-board,
.plc-output {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.plc-controls {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.plc-controls label {
  display: grid;
  gap: 7px;
  color: var(--deep);
  font-weight: 850;
}

.plc-controls input,
.plc-controls select {
  min-height: 42px;
  border: 1px solid var(--line);
  padding: 9px 10px;
  color: var(--deep);
  background: var(--soft);
  font: inherit;
}

.plc-controls .check {
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 34px;
}

.plc-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  padding: 14px;
}

.plc-module,
.plc-io-map div,
.plc-revenue {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: var(--soft);
  border-left: 4px solid var(--teal);
}

.plc-module span,
.plc-module small,
.plc-io-map span,
.plc-io-map small,
.plc-revenue span,
.plc-revenue small {
  color: var(--muted);
  font-size: 13px;
}

.plc-module strong,
.plc-io-map strong,
.plc-revenue strong {
  color: var(--deep);
}

.plc-output {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  min-width: 0;
}

.plc-output h3 {
  margin: 0;
  color: var(--deep);
  font-size: 22px;
}

.plc-io-search { display:flex; align-items:center; gap:8px; margin:7px 0; }
.plc-io-search input { flex:1; min-height:34px; border:1px solid #c5d7dc; padding:7px 9px; background:#fff; color:var(--deep); font:inherit; }
.plc-io-search span { color:var(--muted); font-size:10px; font-weight:800; white-space:nowrap; }
.plc-io-map {
  display: grid;
  gap: 8px;
}





.hmi-touchscreen-designer {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.hmi-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.hmi-head h4,
.hmi-head p {
  margin: 0;
}

.hmi-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.hmi-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

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

.hmi-screen-preview {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  background: #10222b;
  color: #fff;
  border: 6px solid #1d343d;
}

.hmi-screen-preview h5 {
  margin: 0;
  color: #d9e9ed;
}

.hmi-screen-preview article {
  display: grid;
  gap: 5px;
  padding: 9px;
  background: #f8fcfd;
  color: var(--deep);
}

.hmi-screen-preview span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hmi-screen-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.hmi-screen-preview button {
  min-height: 32px;
  border: 0;
  background: var(--teal);
  color: #fff;
  font-weight: 900;
}

.hmi-screen-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hmi-screen-flow span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
  font-size: 12px;
  font-weight: 850;
}

.hmi-screen-flow b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: var(--deep);
  color: #fff;
  font-size: 10px;
}

.hmi-copy-deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hmi-copy-deck div {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.hmi-copy-deck span,
.hmi-copy-deck strong,
.hmi-copy-deck p {
  display: block;
  overflow-wrap: anywhere;
}

.hmi-copy-deck span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.hmi-copy-deck p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 760px) {
  .hmi-head,
  .hmi-screen-grid,
  .hmi-copy-deck {
    grid-template-columns: 1fr;
  }
}



.sensor-calibration-lab {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.sensor-calibration-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.sensor-calibration-head h4,
.sensor-calibration-head p {
  margin: 0;
}

.sensor-calibration-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.sensor-calibration-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.sensor-calibration-controls,
.sensor-calibration-summary,
.sensor-calibration-table {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sensor-calibration-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.sensor-calibration-controls input {
  min-height: 38px;
  border: 1px solid #d8e1e5;
  padding: 8px;
  font: inherit;
}

.sensor-calibration-summary div,
.sensor-calibration-table article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.sensor-calibration-summary span,
.sensor-calibration-summary strong,
.sensor-calibration-table strong,
.sensor-calibration-table span,
.sensor-calibration-table p {
  display: block;
  overflow-wrap: anywhere;
}

.sensor-calibration-summary span,
.sensor-calibration-table span,
.sensor-calibration-table p {
  color: var(--muted);
  font-size: 12px;
}

.sensor-calibration-constants {
  margin: 0;
  padding: 10px;
  background: #10222b;
  color: #d9e9ed;
  overflow: auto;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .sensor-calibration-head,
  .sensor-calibration-controls,
  .sensor-calibration-summary,
  .sensor-calibration-table {
    grid-template-columns: 1fr;
  }
}


.firmware-lab {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.firmware-lab-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.firmware-lab-head h4,
.firmware-lab-head p {
  margin: 0;
}

.firmware-lab-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.firmware-lab-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.firmware-lab-summary div,
.firmware-pin-assertions div {
  min-width: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.firmware-lab-summary span,
.firmware-lab-summary small,
.firmware-pin-assertions span,
.firmware-pin-assertions small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.firmware-lab-summary strong,
.firmware-pin-assertions strong {
  display: block;
  overflow-wrap: anywhere;
}

.firmware-lab-tests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.firmware-lab-tests article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border-left: 4px solid #008f9f;
}

.firmware-lab-tests article[data-status="warn"] {
  border-left-color: #c8871f;
}

.firmware-lab-tests article[data-status="fail"] {
  border-left-color: #a84e33;
}

.firmware-lab-tests span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.firmware-lab-tests p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.firmware-pin-assertions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.firmware-state-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.firmware-state-timeline span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: #10222b;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.firmware-state-timeline b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: #008f9f;
  color: #fff;
  font-size: 10px;
}

@media (max-width: 760px) {
  .firmware-lab-head,
  .firmware-lab-summary,
  .firmware-lab-tests,
  .firmware-pin-assertions {
    grid-template-columns: 1fr;
  }
}

.plc-code {
  max-height: 440px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  background: #10222b;
  color: #e9fbff;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

@media (max-width: 1080px) {
  .plc-toolbar,
  .plc-grid {
    grid-template-columns: 1fr;
  }

  .plc-controls,
  .plc-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .plc-controls,
  .plc-board {
    grid-template-columns: 1fr;
  }
}

.machine-tinker {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.tinker-toolbar,






.machine-cad-exporter {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
  border-radius: 8px;
}

.machine-cad-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.machine-cad-head h3,
.machine-cad-head p {
  margin: 0;
}

.machine-cad-head p {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.machine-cad-head strong {
  padding: 7px 9px;
  background: #a84e33;
  color: #fff;
  font-size: 12px;
}

.machine-cad-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.machine-cad-stage svg {
  display: block;
  width: 100%;
  min-height: 320px;
}

.machine-cad-summary,
.machine-cad-manifest,
.machine-bend-notes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.machine-cad-summary div,
.machine-cad-manifest div,
.machine-bend-notes article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.machine-cad-summary span,
.machine-cad-summary strong,
.machine-cad-manifest strong,
.machine-cad-manifest span,
.machine-cad-manifest small,
.machine-bend-notes span,
.machine-bend-notes p {
  display: block;
  overflow-wrap: anywhere;
}

.machine-cad-summary span,
.machine-cad-manifest span,
.machine-cad-manifest small,
.machine-bend-notes p {
  color: var(--muted);
  font-size: 12px;
}

.machine-bend-notes span {
  color: var(--teal);
  font-weight: 900;
}

@media (max-width: 960px) {
  .machine-cad-head,
  .machine-cad-summary,
  .machine-cad-manifest,
  .machine-bend-notes {
    grid-template-columns: 1fr;
  }
}



.cabinet-3d-viewer {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.cabinet-3d-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.cabinet-3d-head h3,
.cabinet-3d-head p { margin: 0; }

.cabinet-3d-head h3 { color: var(--deep); }

.cabinet-3d-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.cabinet-3d-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.cabinet-3d-controls,
.cabinet-3d-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.cabinet-3d-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.cabinet-3d-controls input,
.cabinet-3d-controls select {
  min-height: 38px;
  border: 1px solid #d8e1e5;
  padding: 8px;
  font: inherit;
}

.cabinet-3d-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.cabinet-3d-stage svg {
  display: block;
  width: 100%;
  min-height: 320px;
}

.cabinet-3d-summary,
.cabinet-3d-callouts {
  display: grid;
  gap: 8px;
}

.cabinet-3d-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cabinet-3d-callouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cabinet-3d-summary div,
.cabinet-3d-callouts article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.cabinet-3d-summary span,
.cabinet-3d-summary strong,
.cabinet-3d-callouts span,
.cabinet-3d-callouts strong,
.cabinet-3d-callouts p {
  display: block;
  overflow-wrap: anywhere;
}

.cabinet-3d-summary span,
.cabinet-3d-callouts p {
  color: var(--muted);
  font-size: 12px;
}

.cabinet-3d-callouts span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 940px) {
  .cabinet-3d-head,
  .cabinet-3d-controls,
  .cabinet-3d-summary,
  .cabinet-3d-callouts { grid-template-columns: 1fr; }
}



.cabinet-clearance-checker {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.clearance-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.clearance-head h3,
.clearance-head p { margin: 0; }
.clearance-head h3 { color: var(--deep); }
.clearance-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.clearance-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.clearance-controls,
.clearance-summary,
.clearance-checks,
.clearance-recommendations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.clearance-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.clearance-controls input,
.clearance-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }

.clearance-stage { background: #fff; border: 1px solid #d8e1e5; overflow: hidden; }
.clearance-stage svg { display: block; width: 100%; min-height: 300px; }

.clearance-summary div,
.clearance-checks article,
.clearance-recommendations article { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.clearance-checks article { border-left: 4px solid #008f9f; }
.clearance-checks article[data-status="warn"] { border-left-color: #c8871f; }
.clearance-checks article[data-status="fail"] { border-left-color: #a84e33; }

.clearance-summary span,
.clearance-summary strong,
.clearance-checks span,
.clearance-checks strong,
.clearance-checks p,
.clearance-recommendations span,
.clearance-recommendations p { display: block; overflow-wrap: anywhere; }
.clearance-summary span,
.clearance-checks p,
.clearance-recommendations p { color: var(--muted); font-size: 12px; }
.clearance-checks span,
.clearance-recommendations span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .clearance-head,
  .clearance-controls,
  .clearance-summary,
  .clearance-checks,
  .clearance-recommendations { grid-template-columns: 1fr; }
}



.plumbing-path-designer {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.plumbing-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.plumbing-head h3,
.plumbing-head p { margin: 0; }
.plumbing-head h3 { color: var(--deep); }
.plumbing-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.plumbing-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.plumbing-controls,
.plumbing-summary,
.plumbing-bom,
.plumbing-tests {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.plumbing-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.plumbing-controls input,
.plumbing-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }

.plumbing-stage { background: #fff; border: 1px solid #d8e1e5; overflow: hidden; }
.plumbing-stage svg { display: block; width: 100%; min-height: 300px; }

.plumbing-network-sizing,
.plumbing-compliance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.plumbing-pump-duty { display: grid; gap: 8px; }
.plumbing-pump-duty article { padding: 10px; background: #fff; border: 1px solid #d8e1e5; border-left: 4px solid var(--teal); }
.plumbing-pump-duty article[data-status="warn"] { border-left-color: var(--gold); background: #fffaf0; }
.plumbing-pump-duty span,
.plumbing-pump-duty strong,
.plumbing-pump-duty small { display: block; overflow-wrap: anywhere; }
.plumbing-pump-duty span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.plumbing-pump-duty small { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.plumbing-network-sizing article,
.plumbing-compliance article { min-width: 0; padding: 10px; background: #fff; border: 1px solid #d8e1e5; border-left: 4px solid var(--teal); }
.plumbing-network-sizing span,
.plumbing-network-sizing strong,
.plumbing-network-sizing small,
.plumbing-compliance span,
.plumbing-compliance strong,
.plumbing-compliance p { display: block; overflow-wrap: anywhere; }
.plumbing-network-sizing span,
.plumbing-compliance span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.plumbing-network-sizing small,
.plumbing-compliance p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.plumbing-compliance article[data-status="warn"] { border-left-color: var(--gold); background: #fffaf0; }
.plumbing-compliance article[data-status="review"] { border-left-color: #6f5aa8; }

.plumbing-summary div,
.plumbing-bom article,
.plumbing-tests article { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.plumbing-tests article { border-left: 4px solid #008f9f; }
.plumbing-tests article[data-status="warn"] { border-left-color: #c8871f; }

.plumbing-summary span,
.plumbing-summary strong,
.plumbing-bom span,
.plumbing-bom strong,
.plumbing-bom p,
.plumbing-bom small,
.plumbing-tests span,
.plumbing-tests strong,
.plumbing-tests p { display: block; overflow-wrap: anywhere; }
.plumbing-summary span,
.plumbing-bom p,
.plumbing-bom small,
.plumbing-tests p { color: var(--muted); font-size: 12px; }
.plumbing-bom span,
.plumbing-tests span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .plumbing-head,
  .plumbing-controls,
  .plumbing-summary,
  .plumbing-network-sizing,
  .plumbing-bom,
  .plumbing-tests,
  .plumbing-compliance { grid-template-columns: 1fr; }
}



.sanitation-cycle-designer {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.sanitation-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.sanitation-head h3,
.sanitation-head p { margin: 0; }
.sanitation-head h3 { color: var(--deep); }
.sanitation-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.sanitation-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.sanitation-controls,
.sanitation-summary,
.sanitation-timeline,
.sanitation-dosage,
.sanitation-verification {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sanitation-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.sanitation-controls input,
.sanitation-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }

.sanitation-summary div,
.sanitation-timeline article,
.sanitation-dosage div,
.sanitation-verification article { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.sanitation-verification article { border-left: 4px solid #008f9f; }
.sanitation-verification article[data-status="warn"] { border-left-color: #c8871f; }

.sanitation-summary span,
.sanitation-summary strong,
.sanitation-timeline span,
.sanitation-timeline strong,
.sanitation-timeline p,
.sanitation-timeline small,
.sanitation-dosage span,
.sanitation-dosage strong,
.sanitation-verification span,
.sanitation-verification strong,
.sanitation-verification p { display: block; overflow-wrap: anywhere; }
.sanitation-summary span,
.sanitation-timeline p,
.sanitation-timeline small,
.sanitation-dosage span,
.sanitation-verification p { color: var(--muted); font-size: 12px; }
.sanitation-timeline span,
.sanitation-verification span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .sanitation-head,
  .sanitation-controls,
  .sanitation-summary,
  .sanitation-timeline,
  .sanitation-dosage,
  .sanitation-verification { grid-template-columns: 1fr; }
}



.dispense-bay-matrix {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.bay-matrix-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.bay-matrix-head h3,
.bay-matrix-head p { margin: 0; }
.bay-matrix-head h3 { color: var(--deep); }
.bay-matrix-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.bay-matrix-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.bay-matrix-controls,
.bay-matrix-summary,
.bay-matrix-grid,
.bay-calibration-checks,
.bay-revenue-plan {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.bay-matrix-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.bay-matrix-controls input { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }
.bay-matrix-summary div,
.bay-matrix-grid article,
.bay-calibration-checks article,
.bay-revenue-plan div { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.bay-calibration-checks article { border-left: 4px solid #008f9f; }
.bay-calibration-checks article[data-status="warn"] { border-left-color: #c8871f; }
.bay-calibration-checks article[data-status="fail"] { border-left-color: #a84e33; }
.bay-matrix-summary span,
.bay-matrix-summary strong,
.bay-matrix-grid span,
.bay-matrix-grid strong,
.bay-matrix-grid p,
.bay-matrix-grid small,
.bay-calibration-checks span,
.bay-calibration-checks strong,
.bay-calibration-checks p,
.bay-revenue-plan span,
.bay-revenue-plan strong { display: block; overflow-wrap: anywhere; }
.bay-matrix-summary span,
.bay-matrix-grid p,
.bay-matrix-grid small,
.bay-calibration-checks p,
.bay-revenue-plan span { color: var(--muted); font-size: 12px; }
.bay-matrix-grid span,
.bay-calibration-checks span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .bay-matrix-head,
  .bay-matrix-controls,
  .bay-matrix-summary,
  .bay-matrix-grid,
  .bay-calibration-checks,
  .bay-revenue-plan { grid-template-columns: 1fr; }
}



.payment-reconciliation-module {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.payment-reconcile-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.payment-reconcile-head h3,
.payment-reconcile-head p { margin: 0; }
.payment-reconcile-head h3 { color: var(--deep); }
.payment-reconcile-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.payment-reconcile-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.payment-reconcile-controls,
.payment-reconcile-summary,
.payment-settlement-rows,
.payment-fraud-checks,
.payment-lockout-rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.payment-reconcile-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.payment-reconcile-controls input,
.payment-reconcile-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }
.payment-reconcile-summary div,
.payment-settlement-rows article,
.payment-fraud-checks article,
.payment-lockout-rules article { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.payment-settlement-rows article,
.payment-fraud-checks article { border-left: 4px solid #008f9f; }
.payment-settlement-rows article[data-status="review"],
.payment-fraud-checks article[data-status="warn"] { border-left-color: #c8871f; }
.payment-fraud-checks article[data-status="fail"] { border-left-color: #a84e33; }
.payment-reconcile-summary span,
.payment-reconcile-summary strong,
.payment-settlement-rows span,
.payment-settlement-rows strong,
.payment-settlement-rows p,
.payment-settlement-rows small,
.payment-fraud-checks span,
.payment-fraud-checks strong,
.payment-fraud-checks p,
.payment-lockout-rules span,
.payment-lockout-rules strong,
.payment-lockout-rules p { display: block; overflow-wrap: anywhere; }
.payment-reconcile-summary span,
.payment-settlement-rows p,
.payment-settlement-rows small,
.payment-fraud-checks p,
.payment-lockout-rules p { color: var(--muted); font-size: 12px; }
.payment-settlement-rows span,
.payment-fraud-checks span,
.payment-lockout-rules span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .payment-reconcile-head,
  .payment-reconcile-controls,
  .payment-reconcile-summary,
  .payment-settlement-rows,
  .payment-fraud-checks,
  .payment-lockout-rules { grid-template-columns: 1fr; }
}



.spares-replenishment-planner {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.spares-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.spares-head h3,
.spares-head p { margin: 0; }
.spares-head h3 { color: var(--deep); }
.spares-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.spares-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.spares-controls,
.spares-summary,
.spares-kit-rows,
.spares-reorder-checks,
.spares-recurring-revenue {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.spares-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.spares-controls input,
.spares-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }
.spares-summary div,
.spares-kit-rows article,
.spares-reorder-checks article,
.spares-recurring-revenue div { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.spares-reorder-checks article { border-left: 4px solid #008f9f; }
.spares-reorder-checks article[data-status="warn"] { border-left-color: #c8871f; }
.spares-summary span,
.spares-summary strong,
.spares-kit-rows span,
.spares-kit-rows strong,
.spares-kit-rows p,
.spares-kit-rows small,
.spares-reorder-checks span,
.spares-reorder-checks strong,
.spares-reorder-checks p,
.spares-recurring-revenue span,
.spares-recurring-revenue strong { display: block; overflow-wrap: anywhere; }
.spares-summary span,
.spares-kit-rows p,
.spares-kit-rows small,
.spares-reorder-checks p,
.spares-recurring-revenue span { color: var(--muted); font-size: 12px; }
.spares-kit-rows span,
.spares-reorder-checks span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .spares-head,
  .spares-controls,
  .spares-summary,
  .spares-kit-rows,
  .spares-reorder-checks,
  .spares-recurring-revenue { grid-template-columns: 1fr; }
}


.spares-warehouse-bin-planner { display: grid; gap: 12px; background: #f7fbfb; }
.warehouse-bin-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.warehouse-bin-head h3, .warehouse-bin-head p { margin: 0; }
.warehouse-bin-head p { color: var(--muted); margin-top: 4px; }
.warehouse-bin-head strong { color: var(--teal); white-space: nowrap; }
.warehouse-bin-controls, .warehouse-summary, .warehouse-bin-rows, .warehouse-pick-list, .warehouse-stock-gates { display: grid; gap: 10px; }
.warehouse-bin-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.warehouse-bin-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.warehouse-bin-controls input { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }
.warehouse-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.warehouse-summary div, .warehouse-bin-rows article, .warehouse-pick-list article, .warehouse-stock-gates article { min-width: 0; padding: 10px; background: #fff; border: 1px solid #d8e1e5; }
.warehouse-summary span, .warehouse-summary strong, .warehouse-bin-rows span, .warehouse-bin-rows strong, .warehouse-bin-rows p, .warehouse-bin-rows small, .warehouse-pick-list span, .warehouse-pick-list strong, .warehouse-pick-list p, .warehouse-pick-list small, .warehouse-stock-gates span, .warehouse-stock-gates strong, .warehouse-stock-gates p { display: block; }
.warehouse-summary span, .warehouse-bin-rows span, .warehouse-bin-rows p, .warehouse-bin-rows small, .warehouse-pick-list span, .warehouse-pick-list p, .warehouse-pick-list small, .warehouse-stock-gates span, .warehouse-stock-gates p { color: var(--muted); font-size: 12px; }
.warehouse-summary strong { color: var(--deep); font-size: 18px; margin-top: 4px; }
.warehouse-bin-rows, .warehouse-pick-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.warehouse-bin-rows article[data-status="open"] { border-style: dashed; }
.warehouse-bin-rows strong, .warehouse-pick-list strong, .warehouse-stock-gates strong { color: var(--deep); margin-top: 4px; }
.warehouse-bin-rows p, .warehouse-pick-list p, .warehouse-stock-gates p { margin: 6px 0 0; }
.warehouse-stock-gates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.warehouse-stock-gates article[data-status="warn"] { border-left: 4px solid #c8871f; }
@media (max-width: 760px) { .warehouse-bin-head { display: grid; } .warehouse-summary, .warehouse-bin-rows, .warehouse-pick-list, .warehouse-stock-gates, .warehouse-bin-controls { grid-template-columns: 1fr; } }
.cabinet-parts-library {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.cabinet-parts-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.cabinet-parts-head h3,
.cabinet-parts-head p { margin: 0; }

.cabinet-parts-head h3 { color: var(--deep); }

.cabinet-parts-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.cabinet-parts-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.cabinet-parts-controls,
.cabinet-parts-summary,
.cabinet-parts-markup {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.cabinet-parts-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.cabinet-parts-controls input,
.cabinet-parts-controls select {
  min-height: 38px;
  border: 1px solid #d8e1e5;
  padding: 8px;
  font: inherit;
}

.cabinet-parts-summary div,
.cabinet-parts-markup div,
.cabinet-parts-grid article,
.cabinet-parts-fabrication article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.cabinet-parts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cabinet-parts-fabrication {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.cabinet-parts-fabrication article { border-left: 4px solid #008f9f; }
.cabinet-parts-fabrication article[data-status="warn"] { border-left-color: #c8871f; }

.cabinet-parts-summary span,
.cabinet-parts-summary strong,
.cabinet-parts-markup span,
.cabinet-parts-markup strong,
.cabinet-parts-grid span,
.cabinet-parts-grid strong,
.cabinet-parts-grid p,
.cabinet-parts-grid small,
.cabinet-parts-fabrication span,
.cabinet-parts-fabrication strong,
.cabinet-parts-fabrication p {
  display: block;
  overflow-wrap: anywhere;
}

.cabinet-parts-summary span,
.cabinet-parts-markup span,
.cabinet-parts-grid p,
.cabinet-parts-grid small,
.cabinet-parts-fabrication p {
  color: var(--muted);
  font-size: 12px;
}

.cabinet-parts-grid span,
.cabinet-parts-fabrication span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 940px) {
  .cabinet-parts-head,
  .cabinet-parts-controls,
  .cabinet-parts-summary,
  .cabinet-parts-markup,
  .cabinet-parts-grid,
  .cabinet-parts-fabrication { grid-template-columns: 1fr; }
}


.machine-exploded-assembly {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
  border-radius: 8px;
}

.machine-exploded-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.machine-exploded-head h3,
.machine-exploded-head p {
  margin: 0;
}

.machine-exploded-head p {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.machine-exploded-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.machine-exploded-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.machine-exploded-stage svg {
  display: block;
  width: 100%;
  min-height: 320px;
}

.machine-cut-list,
.machine-hardware-list,
.machine-assembly-sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.machine-cut-list div,
.machine-hardware-list article,
.machine-assembly-sequence div {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.machine-cut-list strong,
.machine-cut-list span,
.machine-cut-list small,
.machine-hardware-list strong,
.machine-hardware-list span,
.machine-hardware-list p,
.machine-assembly-sequence p {
  display: block;
  overflow-wrap: anywhere;
}

.machine-cut-list span,
.machine-cut-list small,
.machine-hardware-list p {
  color: var(--muted);
  font-size: 12px;
}

.machine-hardware-list span,
.machine-assembly-sequence span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.machine-assembly-sequence p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 960px) {
  .machine-exploded-head,
  .machine-cut-list,
  .machine-hardware-list,
  .machine-assembly-sequence {
    grid-template-columns: 1fr;
  }
}

.machine-3d-configurator {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
  border-radius: 8px;
}

.machine-3d-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.machine-3d-head h3 {
  margin: 0;
  color: var(--deep);
  font-size: 22px;
}

.machine-3d-head p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.machine-3d-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.machine-3d-stage {
  min-width: 0;
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.machine-3d-stage svg {
  display: block;
  width: 100%;
  min-height: 360px;
}

.machine-3d-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.machine-3d-specs div {
  min-width: 0;
  padding: 9px;
  background: #eef5f7;
}

.machine-3d-specs span,
.machine-3d-specs strong {
  display: block;
  overflow-wrap: anywhere;
}

.machine-3d-specs span {
  color: var(--muted);
  font-size: 11px;
}

.machine-3d-layers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.machine-3d-layers article {
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.machine-3d-layers span,
.machine-3d-layers strong,
.machine-3d-layers p,
.machine-3d-layers small {
  display: block;
  overflow-wrap: anywhere;
}

.machine-3d-layers span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.machine-3d-layers p {
  margin: 5px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.machine-3d-layers small {
  color: var(--deep);
  font-weight: 900;
}

@media (max-width: 960px) {
  .machine-3d-head,
  .machine-3d-specs,
  .machine-3d-layers {
    grid-template-columns: 1fr;
  }
}

.tinker-grid {
  display: grid;
  gap: 16px;
}

.tinker-toolbar {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}







.machine-cad-exporter {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
  border-radius: 8px;
}

.machine-cad-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.machine-cad-head h3,
.machine-cad-head p {
  margin: 0;
}

.machine-cad-head p {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.machine-cad-head strong {
  padding: 7px 9px;
  background: #a84e33;
  color: #fff;
  font-size: 12px;
}

.machine-cad-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.machine-cad-stage svg {
  display: block;
  width: 100%;
  min-height: 320px;
}

.machine-cad-summary,
.machine-cad-manifest,
.machine-bend-notes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.machine-cad-summary div,
.machine-cad-manifest div,
.machine-bend-notes article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.machine-cad-summary span,
.machine-cad-summary strong,
.machine-cad-manifest strong,
.machine-cad-manifest span,
.machine-cad-manifest small,
.machine-bend-notes span,
.machine-bend-notes p {
  display: block;
  overflow-wrap: anywhere;
}

.machine-cad-summary span,
.machine-cad-manifest span,
.machine-cad-manifest small,
.machine-bend-notes p {
  color: var(--muted);
  font-size: 12px;
}

.machine-bend-notes span {
  color: var(--teal);
  font-weight: 900;
}

@media (max-width: 960px) {
  .machine-cad-head,
  .machine-cad-summary,
  .machine-cad-manifest,
  .machine-bend-notes {
    grid-template-columns: 1fr;
  }
}



.cabinet-3d-viewer {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.cabinet-3d-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.cabinet-3d-head h3,
.cabinet-3d-head p { margin: 0; }

.cabinet-3d-head h3 { color: var(--deep); }

.cabinet-3d-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.cabinet-3d-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.cabinet-3d-controls,
.cabinet-3d-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.cabinet-3d-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.cabinet-3d-controls input,
.cabinet-3d-controls select {
  min-height: 38px;
  border: 1px solid #d8e1e5;
  padding: 8px;
  font: inherit;
}

.cabinet-3d-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.cabinet-3d-stage svg {
  display: block;
  width: 100%;
  min-height: 320px;
}

.cabinet-3d-summary,
.cabinet-3d-callouts {
  display: grid;
  gap: 8px;
}

.cabinet-3d-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cabinet-3d-callouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cabinet-3d-summary div,
.cabinet-3d-callouts article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.cabinet-3d-summary span,
.cabinet-3d-summary strong,
.cabinet-3d-callouts span,
.cabinet-3d-callouts strong,
.cabinet-3d-callouts p {
  display: block;
  overflow-wrap: anywhere;
}

.cabinet-3d-summary span,
.cabinet-3d-callouts p {
  color: var(--muted);
  font-size: 12px;
}

.cabinet-3d-callouts span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 940px) {
  .cabinet-3d-head,
  .cabinet-3d-controls,
  .cabinet-3d-summary,
  .cabinet-3d-callouts { grid-template-columns: 1fr; }
}



.cabinet-clearance-checker {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.clearance-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.clearance-head h3,
.clearance-head p { margin: 0; }
.clearance-head h3 { color: var(--deep); }
.clearance-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.clearance-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.clearance-controls,
.clearance-summary,
.clearance-checks,
.clearance-recommendations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.clearance-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.clearance-controls input,
.clearance-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }

.clearance-stage { background: #fff; border: 1px solid #d8e1e5; overflow: hidden; }
.clearance-stage svg { display: block; width: 100%; min-height: 300px; }

.clearance-summary div,
.clearance-checks article,
.clearance-recommendations article { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.clearance-checks article { border-left: 4px solid #008f9f; }
.clearance-checks article[data-status="warn"] { border-left-color: #c8871f; }
.clearance-checks article[data-status="fail"] { border-left-color: #a84e33; }

.clearance-summary span,
.clearance-summary strong,
.clearance-checks span,
.clearance-checks strong,
.clearance-checks p,
.clearance-recommendations span,
.clearance-recommendations p { display: block; overflow-wrap: anywhere; }
.clearance-summary span,
.clearance-checks p,
.clearance-recommendations p { color: var(--muted); font-size: 12px; }
.clearance-checks span,
.clearance-recommendations span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .clearance-head,
  .clearance-controls,
  .clearance-summary,
  .clearance-checks,
  .clearance-recommendations { grid-template-columns: 1fr; }
}



.plumbing-path-designer {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.plumbing-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.plumbing-head h3,
.plumbing-head p { margin: 0; }
.plumbing-head h3 { color: var(--deep); }
.plumbing-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.plumbing-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.plumbing-controls,
.plumbing-summary,
.plumbing-bom,
.plumbing-tests {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.plumbing-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.plumbing-controls input,
.plumbing-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }

.plumbing-stage { background: #fff; border: 1px solid #d8e1e5; overflow: hidden; }
.plumbing-stage svg { display: block; width: 100%; min-height: 300px; }

.plumbing-summary div,
.plumbing-bom article,
.plumbing-tests article { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.plumbing-tests article { border-left: 4px solid #008f9f; }
.plumbing-tests article[data-status="warn"] { border-left-color: #c8871f; }

.plumbing-summary span,
.plumbing-summary strong,
.plumbing-bom span,
.plumbing-bom strong,
.plumbing-bom p,
.plumbing-bom small,
.plumbing-tests span,
.plumbing-tests strong,
.plumbing-tests p { display: block; overflow-wrap: anywhere; }
.plumbing-summary span,
.plumbing-bom p,
.plumbing-bom small,
.plumbing-tests p { color: var(--muted); font-size: 12px; }
.plumbing-bom span,
.plumbing-tests span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .plumbing-head,
  .plumbing-controls,
  .plumbing-summary,
  .plumbing-bom,
  .plumbing-tests { grid-template-columns: 1fr; }
}



.sanitation-cycle-designer {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.sanitation-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.sanitation-head h3,
.sanitation-head p { margin: 0; }
.sanitation-head h3 { color: var(--deep); }
.sanitation-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.sanitation-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.sanitation-controls,
.sanitation-summary,
.sanitation-timeline,
.sanitation-dosage,
.sanitation-verification {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sanitation-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.sanitation-controls input,
.sanitation-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }

.sanitation-summary div,
.sanitation-timeline article,
.sanitation-dosage div,
.sanitation-verification article { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.sanitation-verification article { border-left: 4px solid #008f9f; }
.sanitation-verification article[data-status="warn"] { border-left-color: #c8871f; }

.sanitation-summary span,
.sanitation-summary strong,
.sanitation-timeline span,
.sanitation-timeline strong,
.sanitation-timeline p,
.sanitation-timeline small,
.sanitation-dosage span,
.sanitation-dosage strong,
.sanitation-verification span,
.sanitation-verification strong,
.sanitation-verification p { display: block; overflow-wrap: anywhere; }
.sanitation-summary span,
.sanitation-timeline p,
.sanitation-timeline small,
.sanitation-dosage span,
.sanitation-verification p { color: var(--muted); font-size: 12px; }
.sanitation-timeline span,
.sanitation-verification span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .sanitation-head,
  .sanitation-controls,
  .sanitation-summary,
  .sanitation-timeline,
  .sanitation-dosage,
  .sanitation-verification { grid-template-columns: 1fr; }
}



.dispense-bay-matrix {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.bay-matrix-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.bay-matrix-head h3,
.bay-matrix-head p { margin: 0; }
.bay-matrix-head h3 { color: var(--deep); }
.bay-matrix-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.bay-matrix-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.bay-matrix-controls,
.bay-matrix-summary,
.bay-matrix-grid,
.bay-calibration-checks,
.bay-revenue-plan {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.bay-matrix-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.bay-matrix-controls input { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }
.bay-matrix-summary div,
.bay-matrix-grid article,
.bay-calibration-checks article,
.bay-revenue-plan div { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.bay-calibration-checks article { border-left: 4px solid #008f9f; }
.bay-calibration-checks article[data-status="warn"] { border-left-color: #c8871f; }
.bay-calibration-checks article[data-status="fail"] { border-left-color: #a84e33; }
.bay-matrix-summary span,
.bay-matrix-summary strong,
.bay-matrix-grid span,
.bay-matrix-grid strong,
.bay-matrix-grid p,
.bay-matrix-grid small,
.bay-calibration-checks span,
.bay-calibration-checks strong,
.bay-calibration-checks p,
.bay-revenue-plan span,
.bay-revenue-plan strong { display: block; overflow-wrap: anywhere; }
.bay-matrix-summary span,
.bay-matrix-grid p,
.bay-matrix-grid small,
.bay-calibration-checks p,
.bay-revenue-plan span { color: var(--muted); font-size: 12px; }
.bay-matrix-grid span,
.bay-calibration-checks span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .bay-matrix-head,
  .bay-matrix-controls,
  .bay-matrix-summary,
  .bay-matrix-grid,
  .bay-calibration-checks,
  .bay-revenue-plan { grid-template-columns: 1fr; }
}



.payment-reconciliation-module {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.payment-reconcile-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.payment-reconcile-head h3,
.payment-reconcile-head p { margin: 0; }
.payment-reconcile-head h3 { color: var(--deep); }
.payment-reconcile-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.payment-reconcile-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.payment-reconcile-controls,
.payment-reconcile-summary,
.payment-settlement-rows,
.payment-fraud-checks,
.payment-lockout-rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.payment-reconcile-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.payment-reconcile-controls input,
.payment-reconcile-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }
.payment-reconcile-summary div,
.payment-settlement-rows article,
.payment-fraud-checks article,
.payment-lockout-rules article { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.payment-settlement-rows article,
.payment-fraud-checks article { border-left: 4px solid #008f9f; }
.payment-settlement-rows article[data-status="review"],
.payment-fraud-checks article[data-status="warn"] { border-left-color: #c8871f; }
.payment-fraud-checks article[data-status="fail"] { border-left-color: #a84e33; }
.payment-reconcile-summary span,
.payment-reconcile-summary strong,
.payment-settlement-rows span,
.payment-settlement-rows strong,
.payment-settlement-rows p,
.payment-settlement-rows small,
.payment-fraud-checks span,
.payment-fraud-checks strong,
.payment-fraud-checks p,
.payment-lockout-rules span,
.payment-lockout-rules strong,
.payment-lockout-rules p { display: block; overflow-wrap: anywhere; }
.payment-reconcile-summary span,
.payment-settlement-rows p,
.payment-settlement-rows small,
.payment-fraud-checks p,
.payment-lockout-rules p { color: var(--muted); font-size: 12px; }
.payment-settlement-rows span,
.payment-fraud-checks span,
.payment-lockout-rules span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .payment-reconcile-head,
  .payment-reconcile-controls,
  .payment-reconcile-summary,
  .payment-settlement-rows,
  .payment-fraud-checks,
  .payment-lockout-rules { grid-template-columns: 1fr; }
}



.spares-replenishment-planner {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.spares-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.spares-head h3,
.spares-head p { margin: 0; }
.spares-head h3 { color: var(--deep); }
.spares-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.spares-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.spares-controls,
.spares-summary,
.spares-kit-rows,
.spares-reorder-checks,
.spares-recurring-revenue {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.spares-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.spares-controls input,
.spares-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }
.spares-summary div,
.spares-kit-rows article,
.spares-reorder-checks article,
.spares-recurring-revenue div { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.spares-reorder-checks article { border-left: 4px solid #008f9f; }
.spares-reorder-checks article[data-status="warn"] { border-left-color: #c8871f; }
.spares-summary span,
.spares-summary strong,
.spares-kit-rows span,
.spares-kit-rows strong,
.spares-kit-rows p,
.spares-kit-rows small,
.spares-reorder-checks span,
.spares-reorder-checks strong,
.spares-reorder-checks p,
.spares-recurring-revenue span,
.spares-recurring-revenue strong { display: block; overflow-wrap: anywhere; }
.spares-summary span,
.spares-kit-rows p,
.spares-kit-rows small,
.spares-reorder-checks p,
.spares-recurring-revenue span { color: var(--muted); font-size: 12px; }
.spares-kit-rows span,
.spares-reorder-checks span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .spares-head,
  .spares-controls,
  .spares-summary,
  .spares-kit-rows,
  .spares-reorder-checks,
  .spares-recurring-revenue { grid-template-columns: 1fr; }
}


.cabinet-parts-library {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.cabinet-parts-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.cabinet-parts-head h3,
.cabinet-parts-head p { margin: 0; }

.cabinet-parts-head h3 { color: var(--deep); }

.cabinet-parts-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.cabinet-parts-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.cabinet-parts-controls,
.cabinet-parts-summary,
.cabinet-parts-markup {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.cabinet-parts-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.cabinet-parts-controls input,
.cabinet-parts-controls select {
  min-height: 38px;
  border: 1px solid #d8e1e5;
  padding: 8px;
  font: inherit;
}

.cabinet-parts-summary div,
.cabinet-parts-markup div,
.cabinet-parts-grid article,
.cabinet-parts-fabrication article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.cabinet-parts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cabinet-parts-fabrication {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.cabinet-parts-fabrication article { border-left: 4px solid #008f9f; }
.cabinet-parts-fabrication article[data-status="warn"] { border-left-color: #c8871f; }

.cabinet-parts-summary span,
.cabinet-parts-summary strong,
.cabinet-parts-markup span,
.cabinet-parts-markup strong,
.cabinet-parts-grid span,
.cabinet-parts-grid strong,
.cabinet-parts-grid p,
.cabinet-parts-grid small,
.cabinet-parts-fabrication span,
.cabinet-parts-fabrication strong,
.cabinet-parts-fabrication p {
  display: block;
  overflow-wrap: anywhere;
}

.cabinet-parts-summary span,
.cabinet-parts-markup span,
.cabinet-parts-grid p,
.cabinet-parts-grid small,
.cabinet-parts-fabrication p {
  color: var(--muted);
  font-size: 12px;
}

.cabinet-parts-grid span,
.cabinet-parts-fabrication span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 940px) {
  .cabinet-parts-head,
  .cabinet-parts-controls,
  .cabinet-parts-summary,
  .cabinet-parts-markup,
  .cabinet-parts-grid,
  .cabinet-parts-fabrication { grid-template-columns: 1fr; }
}


.machine-exploded-assembly {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
  border-radius: 8px;
}

.machine-exploded-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.machine-exploded-head h3,
.machine-exploded-head p {
  margin: 0;
}

.machine-exploded-head p {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.machine-exploded-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.machine-exploded-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.machine-exploded-stage svg {
  display: block;
  width: 100%;
  min-height: 320px;
}

.machine-cut-list,
.machine-hardware-list,
.machine-assembly-sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.machine-cut-list div,
.machine-hardware-list article,
.machine-assembly-sequence div {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.machine-cut-list strong,
.machine-cut-list span,
.machine-cut-list small,
.machine-hardware-list strong,
.machine-hardware-list span,
.machine-hardware-list p,
.machine-assembly-sequence p {
  display: block;
  overflow-wrap: anywhere;
}

.machine-cut-list span,
.machine-cut-list small,
.machine-hardware-list p {
  color: var(--muted);
  font-size: 12px;
}

.machine-hardware-list span,
.machine-assembly-sequence span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.machine-assembly-sequence p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 960px) {
  .machine-exploded-head,
  .machine-cut-list,
  .machine-hardware-list,
  .machine-assembly-sequence {
    grid-template-columns: 1fr;
  }
}

.machine-3d-configurator {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
  border-radius: 8px;
}

.machine-3d-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.machine-3d-head h3 {
  margin: 0;
  color: var(--deep);
  font-size: 22px;
}

.machine-3d-head p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.machine-3d-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.machine-3d-stage {
  min-width: 0;
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.machine-3d-stage svg {
  display: block;
  width: 100%;
  min-height: 360px;
}

.machine-3d-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.machine-3d-specs div {
  min-width: 0;
  padding: 9px;
  background: #eef5f7;
}

.machine-3d-specs span,
.machine-3d-specs strong {
  display: block;
  overflow-wrap: anywhere;
}

.machine-3d-specs span {
  color: var(--muted);
  font-size: 11px;
}

.machine-3d-layers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.machine-3d-layers article {
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.machine-3d-layers span,
.machine-3d-layers strong,
.machine-3d-layers p,
.machine-3d-layers small {
  display: block;
  overflow-wrap: anywhere;
}

.machine-3d-layers span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.machine-3d-layers p {
  margin: 5px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.machine-3d-layers small {
  color: var(--deep);
  font-weight: 900;
}

@media (max-width: 960px) {
  .machine-3d-head,
  .machine-3d-specs,
  .machine-3d-layers {
    grid-template-columns: 1fr;
  }
}

.tinker-grid {
  grid-template-columns: 230px minmax(420px, 1fr) minmax(280px, .45fr);
  align-items: stretch;
}

.tinker-controls,
.tinker-output,
.tinker-stage {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.tinker-controls {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.tinker-controls label {
  display: grid;
  gap: 7px;
  color: var(--deep);
  font-weight: 850;
}

.tinker-controls input,
.tinker-controls select {
  min-height: 42px;
  border: 1px solid var(--line);
  padding: 9px 10px;
  color: var(--deep);
  background: var(--soft);
  font: inherit;
}

.tinker-controls .check {
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 42px;
}

.tinker-stage {
  min-width: 0;
  padding: 12px;
}

.tinker-stage svg {
  display: block;
  width: 100%;
  aspect-ratio: 980 / 540;
  min-height: 370px;
}

.tinker-output {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.tinker-output h3 {
  margin: 0;
  color: var(--deep);
  font-size: 22px;
  line-height: 1.16;
}

.tinker-output p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.tinker-bom,
.tinker-automation {
  display: grid;
  gap: 9px;
}

.tinker-bom div,
.tinker-automation article {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: var(--soft);
  border-left: 4px solid var(--teal);
}

.tinker-bom span,
.tinker-bom small,
.tinker-automation p {
  color: var(--muted);
  font-size: 13px;
}

.tinker-bom strong,
.tinker-automation strong {
  color: var(--deep);
}

@media (max-width: 1080px) {
  .tinker-toolbar,
  





.machine-cad-exporter {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
  border-radius: 8px;
}

.machine-cad-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.machine-cad-head h3,
.machine-cad-head p {
  margin: 0;
}

.machine-cad-head p {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.machine-cad-head strong {
  padding: 7px 9px;
  background: #a84e33;
  color: #fff;
  font-size: 12px;
}

.machine-cad-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.machine-cad-stage svg {
  display: block;
  width: 100%;
  min-height: 320px;
}

.machine-cad-summary,
.machine-cad-manifest,
.machine-bend-notes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.machine-cad-summary div,
.machine-cad-manifest div,
.machine-bend-notes article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.machine-cad-summary span,
.machine-cad-summary strong,
.machine-cad-manifest strong,
.machine-cad-manifest span,
.machine-cad-manifest small,
.machine-bend-notes span,
.machine-bend-notes p {
  display: block;
  overflow-wrap: anywhere;
}

.machine-cad-summary span,
.machine-cad-manifest span,
.machine-cad-manifest small,
.machine-bend-notes p {
  color: var(--muted);
  font-size: 12px;
}

.machine-bend-notes span {
  color: var(--teal);
  font-weight: 900;
}

@media (max-width: 960px) {
  .machine-cad-head,
  .machine-cad-summary,
  .machine-cad-manifest,
  .machine-bend-notes {
    grid-template-columns: 1fr;
  }
}



.cabinet-3d-viewer {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.cabinet-3d-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.cabinet-3d-head h3,
.cabinet-3d-head p { margin: 0; }

.cabinet-3d-head h3 { color: var(--deep); }

.cabinet-3d-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.cabinet-3d-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.cabinet-3d-controls,
.cabinet-3d-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.cabinet-3d-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.cabinet-3d-controls input,
.cabinet-3d-controls select {
  min-height: 38px;
  border: 1px solid #d8e1e5;
  padding: 8px;
  font: inherit;
}

.cabinet-3d-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.cabinet-3d-stage svg {
  display: block;
  width: 100%;
  min-height: 320px;
}

.cabinet-3d-summary,
.cabinet-3d-callouts {
  display: grid;
  gap: 8px;
}

.cabinet-3d-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cabinet-3d-callouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cabinet-3d-summary div,
.cabinet-3d-callouts article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.cabinet-3d-summary span,
.cabinet-3d-summary strong,
.cabinet-3d-callouts span,
.cabinet-3d-callouts strong,
.cabinet-3d-callouts p {
  display: block;
  overflow-wrap: anywhere;
}

.cabinet-3d-summary span,
.cabinet-3d-callouts p {
  color: var(--muted);
  font-size: 12px;
}

.cabinet-3d-callouts span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 940px) {
  .cabinet-3d-head,
  .cabinet-3d-controls,
  .cabinet-3d-summary,
  .cabinet-3d-callouts { grid-template-columns: 1fr; }
}



.cabinet-clearance-checker {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.clearance-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.clearance-head h3,
.clearance-head p { margin: 0; }
.clearance-head h3 { color: var(--deep); }
.clearance-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.clearance-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.clearance-controls,
.clearance-summary,
.clearance-checks,
.clearance-recommendations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.clearance-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.clearance-controls input,
.clearance-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }

.clearance-stage { background: #fff; border: 1px solid #d8e1e5; overflow: hidden; }
.clearance-stage svg { display: block; width: 100%; min-height: 300px; }

.clearance-summary div,
.clearance-checks article,
.clearance-recommendations article { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.clearance-checks article { border-left: 4px solid #008f9f; }
.clearance-checks article[data-status="warn"] { border-left-color: #c8871f; }
.clearance-checks article[data-status="fail"] { border-left-color: #a84e33; }

.clearance-summary span,
.clearance-summary strong,
.clearance-checks span,
.clearance-checks strong,
.clearance-checks p,
.clearance-recommendations span,
.clearance-recommendations p { display: block; overflow-wrap: anywhere; }
.clearance-summary span,
.clearance-checks p,
.clearance-recommendations p { color: var(--muted); font-size: 12px; }
.clearance-checks span,
.clearance-recommendations span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .clearance-head,
  .clearance-controls,
  .clearance-summary,
  .clearance-checks,
  .clearance-recommendations { grid-template-columns: 1fr; }
}



.plumbing-path-designer {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.plumbing-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.plumbing-head h3,
.plumbing-head p { margin: 0; }
.plumbing-head h3 { color: var(--deep); }
.plumbing-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.plumbing-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.plumbing-controls,
.plumbing-summary,
.plumbing-bom,
.plumbing-tests {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.plumbing-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.plumbing-controls input,
.plumbing-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }

.plumbing-stage { background: #fff; border: 1px solid #d8e1e5; overflow: hidden; }
.plumbing-stage svg { display: block; width: 100%; min-height: 300px; }

.plumbing-summary div,
.plumbing-bom article,
.plumbing-tests article { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.plumbing-tests article { border-left: 4px solid #008f9f; }
.plumbing-tests article[data-status="warn"] { border-left-color: #c8871f; }

.plumbing-summary span,
.plumbing-summary strong,
.plumbing-bom span,
.plumbing-bom strong,
.plumbing-bom p,
.plumbing-bom small,
.plumbing-tests span,
.plumbing-tests strong,
.plumbing-tests p { display: block; overflow-wrap: anywhere; }
.plumbing-summary span,
.plumbing-bom p,
.plumbing-bom small,
.plumbing-tests p { color: var(--muted); font-size: 12px; }
.plumbing-bom span,
.plumbing-tests span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .plumbing-head,
  .plumbing-controls,
  .plumbing-summary,
  .plumbing-bom,
  .plumbing-tests { grid-template-columns: 1fr; }
}



.sanitation-cycle-designer {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.sanitation-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.sanitation-head h3,
.sanitation-head p { margin: 0; }
.sanitation-head h3 { color: var(--deep); }
.sanitation-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.sanitation-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.sanitation-controls,
.sanitation-summary,
.sanitation-timeline,
.sanitation-dosage,
.sanitation-verification {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sanitation-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.sanitation-controls input,
.sanitation-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }

.sanitation-summary div,
.sanitation-timeline article,
.sanitation-dosage div,
.sanitation-verification article { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.sanitation-verification article { border-left: 4px solid #008f9f; }
.sanitation-verification article[data-status="warn"] { border-left-color: #c8871f; }

.sanitation-summary span,
.sanitation-summary strong,
.sanitation-timeline span,
.sanitation-timeline strong,
.sanitation-timeline p,
.sanitation-timeline small,
.sanitation-dosage span,
.sanitation-dosage strong,
.sanitation-verification span,
.sanitation-verification strong,
.sanitation-verification p { display: block; overflow-wrap: anywhere; }
.sanitation-summary span,
.sanitation-timeline p,
.sanitation-timeline small,
.sanitation-dosage span,
.sanitation-verification p { color: var(--muted); font-size: 12px; }
.sanitation-timeline span,
.sanitation-verification span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .sanitation-head,
  .sanitation-controls,
  .sanitation-summary,
  .sanitation-timeline,
  .sanitation-dosage,
  .sanitation-verification { grid-template-columns: 1fr; }
}



.dispense-bay-matrix {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.bay-matrix-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.bay-matrix-head h3,
.bay-matrix-head p { margin: 0; }
.bay-matrix-head h3 { color: var(--deep); }
.bay-matrix-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.bay-matrix-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.bay-matrix-controls,
.bay-matrix-summary,
.bay-matrix-grid,
.bay-calibration-checks,
.bay-revenue-plan {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.bay-matrix-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.bay-matrix-controls input { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }
.bay-matrix-summary div,
.bay-matrix-grid article,
.bay-calibration-checks article,
.bay-revenue-plan div { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.bay-calibration-checks article { border-left: 4px solid #008f9f; }
.bay-calibration-checks article[data-status="warn"] { border-left-color: #c8871f; }
.bay-calibration-checks article[data-status="fail"] { border-left-color: #a84e33; }
.bay-matrix-summary span,
.bay-matrix-summary strong,
.bay-matrix-grid span,
.bay-matrix-grid strong,
.bay-matrix-grid p,
.bay-matrix-grid small,
.bay-calibration-checks span,
.bay-calibration-checks strong,
.bay-calibration-checks p,
.bay-revenue-plan span,
.bay-revenue-plan strong { display: block; overflow-wrap: anywhere; }
.bay-matrix-summary span,
.bay-matrix-grid p,
.bay-matrix-grid small,
.bay-calibration-checks p,
.bay-revenue-plan span { color: var(--muted); font-size: 12px; }
.bay-matrix-grid span,
.bay-calibration-checks span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .bay-matrix-head,
  .bay-matrix-controls,
  .bay-matrix-summary,
  .bay-matrix-grid,
  .bay-calibration-checks,
  .bay-revenue-plan { grid-template-columns: 1fr; }
}



.payment-reconciliation-module {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.payment-reconcile-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.payment-reconcile-head h3,
.payment-reconcile-head p { margin: 0; }
.payment-reconcile-head h3 { color: var(--deep); }
.payment-reconcile-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.payment-reconcile-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.payment-reconcile-controls,
.payment-reconcile-summary,
.payment-settlement-rows,
.payment-fraud-checks,
.payment-lockout-rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.payment-reconcile-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.payment-reconcile-controls input,
.payment-reconcile-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }
.payment-reconcile-summary div,
.payment-settlement-rows article,
.payment-fraud-checks article,
.payment-lockout-rules article { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.payment-settlement-rows article,
.payment-fraud-checks article { border-left: 4px solid #008f9f; }
.payment-settlement-rows article[data-status="review"],
.payment-fraud-checks article[data-status="warn"] { border-left-color: #c8871f; }
.payment-fraud-checks article[data-status="fail"] { border-left-color: #a84e33; }
.payment-reconcile-summary span,
.payment-reconcile-summary strong,
.payment-settlement-rows span,
.payment-settlement-rows strong,
.payment-settlement-rows p,
.payment-settlement-rows small,
.payment-fraud-checks span,
.payment-fraud-checks strong,
.payment-fraud-checks p,
.payment-lockout-rules span,
.payment-lockout-rules strong,
.payment-lockout-rules p { display: block; overflow-wrap: anywhere; }
.payment-reconcile-summary span,
.payment-settlement-rows p,
.payment-settlement-rows small,
.payment-fraud-checks p,
.payment-lockout-rules p { color: var(--muted); font-size: 12px; }
.payment-settlement-rows span,
.payment-fraud-checks span,
.payment-lockout-rules span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .payment-reconcile-head,
  .payment-reconcile-controls,
  .payment-reconcile-summary,
  .payment-settlement-rows,
  .payment-fraud-checks,
  .payment-lockout-rules { grid-template-columns: 1fr; }
}



.spares-replenishment-planner {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.spares-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.spares-head h3,
.spares-head p { margin: 0; }
.spares-head h3 { color: var(--deep); }
.spares-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.spares-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.spares-controls,
.spares-summary,
.spares-kit-rows,
.spares-reorder-checks,
.spares-recurring-revenue {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.spares-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.spares-controls input,
.spares-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }
.spares-summary div,
.spares-kit-rows article,
.spares-reorder-checks article,
.spares-recurring-revenue div { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.spares-reorder-checks article { border-left: 4px solid #008f9f; }
.spares-reorder-checks article[data-status="warn"] { border-left-color: #c8871f; }
.spares-summary span,
.spares-summary strong,
.spares-kit-rows span,
.spares-kit-rows strong,
.spares-kit-rows p,
.spares-kit-rows small,
.spares-reorder-checks span,
.spares-reorder-checks strong,
.spares-reorder-checks p,
.spares-recurring-revenue span,
.spares-recurring-revenue strong { display: block; overflow-wrap: anywhere; }
.spares-summary span,
.spares-kit-rows p,
.spares-kit-rows small,
.spares-reorder-checks p,
.spares-recurring-revenue span { color: var(--muted); font-size: 12px; }
.spares-kit-rows span,
.spares-reorder-checks span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .spares-head,
  .spares-controls,
  .spares-summary,
  .spares-kit-rows,
  .spares-reorder-checks,
  .spares-recurring-revenue { grid-template-columns: 1fr; }
}


.cabinet-parts-library {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.cabinet-parts-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.cabinet-parts-head h3,
.cabinet-parts-head p { margin: 0; }

.cabinet-parts-head h3 { color: var(--deep); }

.cabinet-parts-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.cabinet-parts-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.cabinet-parts-controls,
.cabinet-parts-summary,
.cabinet-parts-markup {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.cabinet-parts-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.cabinet-parts-controls input,
.cabinet-parts-controls select {
  min-height: 38px;
  border: 1px solid #d8e1e5;
  padding: 8px;
  font: inherit;
}

.cabinet-parts-summary div,
.cabinet-parts-markup div,
.cabinet-parts-grid article,
.cabinet-parts-fabrication article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.cabinet-parts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cabinet-parts-fabrication {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.cabinet-parts-fabrication article { border-left: 4px solid #008f9f; }
.cabinet-parts-fabrication article[data-status="warn"] { border-left-color: #c8871f; }

.cabinet-parts-summary span,
.cabinet-parts-summary strong,
.cabinet-parts-markup span,
.cabinet-parts-markup strong,
.cabinet-parts-grid span,
.cabinet-parts-grid strong,
.cabinet-parts-grid p,
.cabinet-parts-grid small,
.cabinet-parts-fabrication span,
.cabinet-parts-fabrication strong,
.cabinet-parts-fabrication p {
  display: block;
  overflow-wrap: anywhere;
}

.cabinet-parts-summary span,
.cabinet-parts-markup span,
.cabinet-parts-grid p,
.cabinet-parts-grid small,
.cabinet-parts-fabrication p {
  color: var(--muted);
  font-size: 12px;
}

.cabinet-parts-grid span,
.cabinet-parts-fabrication span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 940px) {
  .cabinet-parts-head,
  .cabinet-parts-controls,
  .cabinet-parts-summary,
  .cabinet-parts-markup,
  .cabinet-parts-grid,
  .cabinet-parts-fabrication { grid-template-columns: 1fr; }
}


.machine-exploded-assembly {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
  border-radius: 8px;
}

.machine-exploded-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.machine-exploded-head h3,
.machine-exploded-head p {
  margin: 0;
}

.machine-exploded-head p {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.machine-exploded-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.machine-exploded-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.machine-exploded-stage svg {
  display: block;
  width: 100%;
  min-height: 320px;
}

.machine-cut-list,
.machine-hardware-list,
.machine-assembly-sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.machine-cut-list div,
.machine-hardware-list article,
.machine-assembly-sequence div {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.machine-cut-list strong,
.machine-cut-list span,
.machine-cut-list small,
.machine-hardware-list strong,
.machine-hardware-list span,
.machine-hardware-list p,
.machine-assembly-sequence p {
  display: block;
  overflow-wrap: anywhere;
}

.machine-cut-list span,
.machine-cut-list small,
.machine-hardware-list p {
  color: var(--muted);
  font-size: 12px;
}

.machine-hardware-list span,
.machine-assembly-sequence span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.machine-assembly-sequence p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 960px) {
  .machine-exploded-head,
  .machine-cut-list,
  .machine-hardware-list,
  .machine-assembly-sequence {
    grid-template-columns: 1fr;
  }
}

.machine-3d-configurator {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
  border-radius: 8px;
}

.machine-3d-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.machine-3d-head h3 {
  margin: 0;
  color: var(--deep);
  font-size: 22px;
}

.machine-3d-head p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.machine-3d-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.machine-3d-stage {
  min-width: 0;
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.machine-3d-stage svg {
  display: block;
  width: 100%;
  min-height: 360px;
}

.machine-3d-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.machine-3d-specs div {
  min-width: 0;
  padding: 9px;
  background: #eef5f7;
}

.machine-3d-specs span,
.machine-3d-specs strong {
  display: block;
  overflow-wrap: anywhere;
}

.machine-3d-specs span {
  color: var(--muted);
  font-size: 11px;
}

.machine-3d-layers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.machine-3d-layers article {
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.machine-3d-layers span,
.machine-3d-layers strong,
.machine-3d-layers p,
.machine-3d-layers small {
  display: block;
  overflow-wrap: anywhere;
}

.machine-3d-layers span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.machine-3d-layers p {
  margin: 5px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.machine-3d-layers small {
  color: var(--deep);
  font-weight: 900;
}

@media (max-width: 960px) {
  .machine-3d-head,
  .machine-3d-specs,
  .machine-3d-layers {
    grid-template-columns: 1fr;
  }
}

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

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

@media (max-width: 680px) {
  .tinker-controls {
    grid-template-columns: 1fr;
  }

  .tinker-stage svg {
    min-height: 270px;
  }
}

@media (max-width: 1080px) {
  .machine-renderer-grid {
    grid-template-columns: 1fr;
  }

  .machine-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .machine-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .machine-stage svg {
    min-height: 260px;
  }
}


.knowledge-hub {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.knowledge-layout {
  display: grid;
  gap: 16px;
}

.knowledge-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .34fr);
  gap: 16px;
  align-items: center;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.knowledge-intro p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.knowledge-search label {
  display: grid;
  gap: 7px;
  color: var(--deep);
  font-weight: 850;
}

.knowledge-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  padding: 10px 12px;
  font: inherit;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.guide-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 100%;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 5px solid var(--teal);
  box-shadow: var(--shadow);
}

.guide-card span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.guide-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 21px;
  line-height: 1.16;
}

.guide-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.guide-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  line-height: 1.42;
}

.guide-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.guide-links a {
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--deep);
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 980px) {
  .guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .knowledge-intro {
    grid-template-columns: 1fr;
  }
}

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


.procurement-pack {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.procurement-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
}

.procurement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.procurement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.procurement-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.procurement-panel.wide {
  grid-column: span 3;
}

.procurement-panel h3 {
  margin: 0;
  color: var(--deep);
}

.procurement-scope {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.scope-line {
  display: grid;
  gap: 5px;
  min-height: 130px;
  padding: 12px;
  background: var(--soft);
  border-top: 4px solid var(--teal);
}

.scope-line span,
.scope-table-head,
.procurement-list article strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.scope-line strong {
  color: var(--deep);
  line-height: 1.18;
}

.scope-line p,
.procurement-list article p {
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
}

.scope-table {
  grid-column: 1 / -1;
  display: grid;
  border: 1px solid var(--line);
}

.scope-table-head,
.scope-table a {
  display: grid;
  grid-template-columns: .8fr 1.7fr .5fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.scope-table-head {
  background: var(--deep);
  color: #fff;
}

.scope-table a {
  background: #fff;
}

.scope-table a:last-child {
  border-bottom: 0;
}

.scope-table a strong {
  color: var(--deep);
}

.procurement-list {
  display: grid;
  gap: 10px;
}

.procurement-list article {
  display: grid;
  gap: 5px;
  padding: 12px;
  background: #f9fcfd;
  border-left: 4px solid var(--gold);
}

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

.acceptance-grid label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px;
  background: var(--soft);
  color: var(--deep);
  font-weight: 750;
  line-height: 1.35;
}

@media (max-width: 1080px) {
  .procurement-grid,
  .procurement-scope {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .procurement-panel.wide {
    grid-column: span 2;
  }
}

@media (max-width: 680px) {
  .procurement-toolbar {
    display: grid;
  }

  .procurement-grid,
  .procurement-scope,
  .acceptance-grid {
    grid-template-columns: 1fr;
  }

  .procurement-panel.wide {
    grid-column: span 1;
  }

  .scope-table-head,
  .scope-table a {
    grid-template-columns: 1fr;
  }
}

.project-blueprint {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(20px, 3vw, 34px);
  background: #f7fbfc;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.blueprint-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.blueprint-toolbar h2 {
  max-width: 720px;
}

.blueprint-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.blueprint-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.blueprint-panel {
  min-width: 0;
  border: 1px solid var(--line);
  background: #fff;
  padding: 16px;
}

.blueprint-main {
  background: #10222b;
  color: #fff;
}

.blueprint-wide {
  grid-column: 1 / -1;
}

.blueprint-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #e8f3f5;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.blueprint-panel h3 {
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 1.25;
}

.blueprint-main h3 {
  color: #fff;
  font-size: clamp(22px, 2.4vw, 30px);
}

.blueprint-main p {
  color: #d9e9ed;
  line-height: 1.55;
}

.blueprint-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.blueprint-metrics span {
  min-height: 70px;
  padding: 12px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
}

.blueprint-metrics strong,
.blueprint-metrics small {
  display: block;
}

.blueprint-metrics strong {
  color: #fff;
  font-size: 20px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.blueprint-metrics small {
  margin-top: 6px;
  color: #b9d2d8;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.blueprint-list {
  display: grid;
  gap: 9px;
}

.blueprint-list article {
  padding: 11px;
  background: #f8fbfc;
  border-left: 4px solid var(--teal);
}

.blueprint-list span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.blueprint-list strong {
  display: block;
  margin-top: 4px;
  color: var(--deep);
  line-height: 1.25;
}

.blueprint-list p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.blueprint-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.blueprint-action-grid article {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  min-height: 104px;
  padding: 13px;
  background: #f8fbfc;
  border: 1px solid var(--line);
}

.blueprint-action-grid b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--deep);
  color: #fff;
}

.blueprint-action-grid strong {
  color: var(--deep);
  line-height: 1.25;
}

.blueprint-action-grid p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 1080px) {
  .blueprint-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blueprint-main {
    grid-column: 1 / -1;
  }

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

@media (max-width: 680px) {
  .blueprint-toolbar {
    display: grid;
  }

  .blueprint-actions {
    justify-content: stretch;
  }

  .blueprint-actions .button {
    flex: 1 1 150px;
  }

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

.manual-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: 14px;
  align-items: stretch;
}

.configurator-summary {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  background: #10222b;
  color: #fff;
  padding: 16px;
}

.configurator-summary h3 {
  color: #fff;
  margin: 0;
  font-size: 18px;
}

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

.configurator-totals span {
  min-height: 74px;
  padding: 11px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
}

.configurator-totals strong,
.configurator-totals small {
  display: block;
}

.configurator-totals strong {
  color: #fff;
  font-size: 20px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.configurator-totals small {
  margin-top: 6px;
  color: #b9d2d8;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.configurator-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.configurator-panel {
  min-width: 0;
  border: 1px solid var(--line);
  background: #fff;
  padding: 15px;
}

.configurator-panel h3 {
  margin-bottom: 12px;
  font-size: 17px;
}

.configurator-list {
  display: grid;
  gap: 9px;
}

.configurator-list a,
.configurator-list article {
  display: block;
  min-height: 92px;
  padding: 11px;
  background: #f8fbfc;
  border: 1px solid var(--line);
  color: var(--ink);
}

.configurator-list a:hover {
  border-color: var(--teal);
}

.configurator-list span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.configurator-list strong {
  display: block;
  margin-top: 5px;
  color: var(--deep);
  line-height: 1.24;
}

.configurator-list p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.configurator-list.gates article {
  border-left: 4px solid #c8871f;
}

.configurator-list.gates .gate-started,
.configurator-list.gates .gate-set,
.configurator-list.gates .gate-included,
.configurator-list.gates .gate-training-included {
  border-left-color: #0d6b5f;
}

.configurator-list.gates .gate-required,
.configurator-list.gates .gate-confirm {
  border-left-color: #a84e33;
}

@media (max-width: 1180px) {
  .manual-layout {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 680px) {
  .configurator-grid,
  .configurator-totals {
    grid-template-columns: 1fr;
  }
}

.parts-matrix-head {
  margin-top: 22px;
}

.parts-matrix {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.parts-row {
  display: grid;
  grid-template-columns: minmax(340px, .95fr) minmax(0, 1.05fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

.parts-selected {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 13px;
  min-width: 0;
}

.parts-selected img {
  width: 104px;
  height: 104px;
  object-fit: cover;
  background: #f0f5f6;
  border: 1px solid var(--line);
}

.parts-selected span,
.parts-alternatives span,
.parts-alternatives small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.parts-selected h3 {
  margin: 5px 0 6px;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.2;
}

.parts-selected strong {
  display: block;
  color: #0d6b5f;
  font-size: 18px;
}

.parts-selected p {
  margin: 7px 0 9px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

.parts-selected a {
  color: var(--deep);
  font-weight: 900;
}

.parts-alternatives {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
}

.parts-alternatives h4 {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--deep);
  font-size: 14px;
}

.parts-alternatives a,
.parts-alternatives article {
  min-height: 118px;
  padding: 11px;
  border: 1px solid var(--line);
  background: #f8fbfc;
  color: var(--ink);
}

.parts-alternatives a:hover {
  border-color: var(--teal);
}

.parts-alternatives strong {
  display: block;
  margin-bottom: 5px;
  color: var(--deep);
  font-size: 13px;
  line-height: 1.25;
}

.parts-alternatives b {
  display: block;
  margin: 8px 0 5px;
  color: #0d6b5f;
  font-size: 14px;
}

.parts-alternatives small {
  text-transform: none;
  line-height: 1.35;
}

@media (max-width: 980px) {
  .parts-row,
  .parts-selected,
  .parts-alternatives {
    grid-template-columns: 1fr;
  }

  .parts-selected img {
    width: 100%;
    height: 180px;
  }
}


.batch-traceability {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: #f8fbfc;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.batch-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.batch-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.batch-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--deep);
  background: #fff;
}

.batch-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.batch-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.batch-traceability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 12px;
}

.batch-card {
  display: grid;
  gap: 8px;
  min-height: 230px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--green);
}

.batch-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.batch-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.batch-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}


.quality-log {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.quality-toolbar {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.quality-grid {
  display: grid;
  grid-template-columns: minmax(260px, .42fr) minmax(0, 1fr);
  gap: 16px;
}

.quality-panel {
  border: 1px solid var(--line);
  background: #f8fbfc;
  padding: 16px;
  min-width: 0;
}

.quality-panel.wide {
  overflow-x: auto;
}

.quality-summary {
  display: grid;
  gap: 10px;
}

.quality-summary span {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: #fff;
  border-left: 4px solid var(--teal);
}

.quality-summary strong {
  color: var(--deep);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.quality-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.quality-log-table {
  min-width: 820px;
  border: 1px solid var(--line);
  background: #fff;
}

.quality-head,
.quality-row {
  display: grid;
  grid-template-columns: .75fr 1fr 1.35fr .9fr 1.6fr;
  gap: 1px;
  border-bottom: 1px solid var(--line);
}

.quality-head {
  background: var(--deep);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.quality-head span,
.quality-row span,
.quality-row strong {
  padding: 11px;
  line-height: 1.35;
}

.quality-row strong {
  color: var(--deep);
  background: #f8fbfc;
}

.quality-row span {
  color: var(--muted);
}


.finance-plan {
  margin: 0 0 24px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--line);
  background: #f8fbfc;
}

.finance-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.finance-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.finance-card {
  min-height: 132px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
}

.finance-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.finance-card strong {
  display: block;
  margin: 8px 0;
  color: var(--deep);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.finance-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.finance-scenarios {
  min-width: 900px;
  overflow-x: auto;
  border: 1px solid var(--line);
  background: #fff;
}

.finance-scenario-head,
.finance-scenario {
  display: grid;
  grid-template-columns: 1.25fr .7fr .9fr .9fr 1fr .65fr;
  gap: 1px;
  border-bottom: 1px solid var(--line);
}

.finance-scenario-head {
  background: var(--deep);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.finance-scenario-head span,
.finance-scenario span,
.finance-scenario strong {
  padding: 11px;
  line-height: 1.35;
}

.finance-scenario strong {
  color: var(--deep);
  background: #f8fbfc;
}

.finance-scenario small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 600;
}

.finance-scenario span {
  color: var(--muted);
}


.troubleshooting {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.troubleshooting-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.troubleshooting-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.troubleshooting-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--alert);
  background: #f8fbfc;
}

.troubleshooting-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.troubleshooting-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

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

.troubleshooting-card {
  display: grid;
  gap: 8px;
  min-height: 210px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
}

.troubleshooting-card span {
  color: var(--alert);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.troubleshooting-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.troubleshooting-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}


.stock-planner {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.stock-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.stock-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.stock-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  background: #f8fbfc;
}

.stock-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.stock-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

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

.stock-card {
  display: grid;
  gap: 8px;
  min-height: 220px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
}

.stock-card.high {
  border-top-color: var(--alert);
}

.stock-card.medium {
  border-top-color: var(--gold);
}

.stock-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.stock-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.stock-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}


.compliance-planner {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.compliance-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.compliance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.compliance-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--deep);
  background: #f8fbfc;
}

.compliance-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.compliance-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

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

.compliance-plan-card {
  display: grid;
  gap: 8px;
  min-height: 220px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
}

.compliance-plan-card.required {
  border-top-color: var(--alert);
}

.compliance-plan-card.review,
.compliance-plan-card.customer-to-confirm {
  border-top-color: var(--gold);
}

.compliance-plan-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.compliance-plan-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.compliance-plan-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}


.training-sop {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.training-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.training-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.training-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  background: #f8fbfc;
}

.training-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.training-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

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

.training-card {
  display: grid;
  gap: 8px;
  min-height: 250px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--green);
}

.training-card.checks {
  border-top-color: var(--gold);
}

.training-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.training-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.training-card p,
.training-card li {
  color: var(--muted);
  line-height: 1.45;
}

.training-card ul {
  margin: 0;
  padding-left: 18px;
}


.civil-works {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.civil-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.civil-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.civil-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  background: #f8fbfc;
}

.civil-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.civil-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

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

.civil-card {
  display: grid;
  gap: 8px;
  min-height: 240px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--deep);
}

.civil-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.civil-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.civil-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}


.warranty-sla {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.warranty-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.warranty-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.warranty-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--deep);
  background: #f8fbfc;
}

.warranty-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.warranty-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

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

.warranty-card {
  display: grid;
  gap: 8px;
  min-height: 210px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
}

.warranty-card.exclusion,
.warranty-card.coverage-boundary {
  border-top-color: var(--alert);
}

.warranty-card.condition,
.warranty-card.customer-duty {
  border-top-color: var(--gold);
}

.warranty-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.warranty-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.warranty-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}


.amc-contract {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: #f8fbfc;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.amc-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.amc-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.amc-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  background: #fff;
}

.amc-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.amc-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.amc-contract-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 12px;
}

.amc-card {
  display: grid;
  gap: 8px;
  min-height: 225px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
}

.amc-card.exclusion,
.amc-card.coverage-boundary {
  border-top-color: var(--alert);
}

.amc-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.amc-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.amc-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}


.logistics-planner {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.logistics-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.logistics-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.logistics-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  background: #f8fbfc;
}

.logistics-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.logistics-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

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

.logistics-card {
  display: grid;
  gap: 8px;
  min-height: 200px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--deep);
}

.logistics-card.packing {
  border-top-color: var(--teal);
}

.logistics-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.logistics-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.logistics-card p,
.logistics-card li {
  color: var(--muted);
  line-height: 1.45;
}

.logistics-card ul {
  margin: 0;
  padding-left: 18px;
}


.site-survey-report {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: #fbfcf8;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.site-survey-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.site-survey-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.site-survey-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  background: #fff;
}

.site-survey-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.site-survey-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.site-survey-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 12px;
}

.site-survey-card {
  display: grid;
  gap: 8px;
  min-height: 250px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
}

.site-survey-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.site-survey-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.site-survey-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}


.commissioning-report {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.commissioning-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.commissioning-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.commissioning-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  background: #f8fbfc;
}

.commissioning-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.commissioning-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.commissioning-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 12px;
}

.commissioning-card {
  display: grid;
  gap: 8px;
  min-height: 245px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
}

.commissioning-card.review,
.commissioning-card.required,
.commissioning-card.pending-site-reading,
.commissioning-card.pending-sanitation-log {
  border-top-color: var(--gold);
}

.commissioning-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.commissioning-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.commissioning-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}


.milestone-schedule {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.milestone-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.milestone-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.milestone-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  background: #f8fbfc;
}

.milestone-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.milestone-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.milestone-schedule-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(190px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.milestone-card {
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr;
  gap: 8px;
  min-height: 280px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
}

.milestone-card b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--deep);
  color: #fff;
}

.milestone-card span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.milestone-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.2;
}

.milestone-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
}


.google-coverage {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: #f8fbfc;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.google-coverage-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.coverage-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.coverage-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  background: #fff;
}

.coverage-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.coverage-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.coverage-issue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 12px;
}

.coverage-card {
  display: grid;
  gap: 8px;
  min-height: 250px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
}

.coverage-card.critical,
.coverage-card.high {
  border-top-color: var(--alert);
}

.coverage-card.medium,
.coverage-card.monitor {
  border-top-color: var(--gold);
}

.coverage-card.action {
  background: #fffaf1;
  border-top-color: var(--deep);
}

.coverage-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.coverage-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.coverage-card p,
.coverage-card li {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.coverage-card ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}


.risk-register {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: #fbfcf8;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.risk-register-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.risk-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.risk-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--alert);
  background: #fff;
}

.risk-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.risk-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.risk-register-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 12px;
}

.risk-register .risk-card {
  display: grid;
  gap: 8px;
  min-height: 260px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
}

.risk-register .risk-card.high {
  border-top-color: var(--alert);
}

.risk-register .risk-card.medium {
  border-top-color: var(--gold);
}

.risk-register .risk-card.low {
  border-top-color: var(--green);
}

.risk-register .risk-card.decision {
  background: #f4f9fb;
  border-top-color: var(--teal);
}

.risk-register .risk-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.risk-register .risk-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.risk-register .risk-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}


.lead-pipeline {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.lead-pipeline-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.lead-pipeline-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.lead-pipeline-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  background: #f8fbfc;
}

.lead-pipeline-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.lead-pipeline-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.lead-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 12px;
}

.lead-card {
  display: grid;
  gap: 8px;
  min-height: 220px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
}

.lead-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lead-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.lead-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}



.consumables-renewal {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.renewal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.renewal-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.renewal-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  background: #f8fbfc;
}

.renewal-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.renewal-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.renewal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 12px;
}

.renewal-card {
  display: grid;
  gap: 8px;
  min-height: 210px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--green);
}

.renewal-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.renewal-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.renewal-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.renewal-card strong {
  color: var(--deep);
}


.payment-tracker {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.payment-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.payment-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.payment-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  background: #f8fbfc;
}

.payment-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.payment-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.payment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 12px;
}

.payment-card {
  display: grid;
  gap: 8px;
  min-height: 230px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
}

.payment-card span,
.payment-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.payment-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.payment-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.payment-card strong {
  color: var(--deep);
}


.customer-success {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.success-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.success-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.success-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  background: #f8fbfc;
}

.success-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.success-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.success-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(190px, 1fr));
  gap: 12px;
}

.success-card {
  display: grid;
  gap: 8px;
  min-height: 220px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
}

.success-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.success-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.success-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.success-card strong {
  color: var(--deep);
}


.dispatch-board {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.dispatch-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.dispatch-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.dispatch-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--deep);
  background: #f8fbfc;
}

.dispatch-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.dispatch-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.dispatch-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(190px, 1fr));
  gap: 12px;
}

.dispatch-card {
  display: grid;
  gap: 8px;
  min-height: 220px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--deep);
}

.dispatch-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.dispatch-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.dispatch-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.dispatch-card strong {
  color: var(--deep);
}


.stock-reservation {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.reservation-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.reservation-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.reservation-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  background: #f8fbfc;
}

.reservation-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.reservation-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.reservation-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(190px, 1fr));
  gap: 12px;
}

.reservation-card {
  display: grid;
  gap: 8px;
  min-height: 220px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--green);
}

.reservation-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.reservation-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.reservation-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.reservation-card strong {
  color: var(--deep);
}


.supplier-po {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.supplier-po-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.supplier-po-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.supplier-po-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  background: #f8fbfc;
}

.supplier-po-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.supplier-po-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.supplier-po-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: 12px;
}

.supplier-po-card {
  display: grid;
  gap: 8px;
  min-height: 210px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
}

.supplier-po-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.supplier-po-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.supplier-po-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.supplier-po-card strong {
  color: var(--deep);
}

.handoff-notes {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.handoff-notes-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.handoff-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.handoff-summary span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--deep);
  background: #f8fbfc;
}

.handoff-summary strong {
  color: var(--deep);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.handoff-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.handoff-notes-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(190px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.handoff-card {
  display: grid;
  gap: 8px;
  min-height: 220px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
}

.handoff-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.handoff-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
  line-height: 1.25;
}

.handoff-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}


/* Responsive machine/controller workbench polish */
.machine-tinker,
.plc-simulator {
  width: min(1180px, calc(100% - 28px));
  gap: 14px;
}

.tinker-toolbar,
.plc-toolbar {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.tinker-toolbar h2,
.plc-toolbar h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.12;
}







.machine-cad-exporter {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
  border-radius: 8px;
}

.machine-cad-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.machine-cad-head h3,
.machine-cad-head p {
  margin: 0;
}

.machine-cad-head p {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.machine-cad-head strong {
  padding: 7px 9px;
  background: #a84e33;
  color: #fff;
  font-size: 12px;
}

.machine-cad-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.machine-cad-stage svg {
  display: block;
  width: 100%;
  min-height: 320px;
}

.machine-cad-summary,
.machine-cad-manifest,
.machine-bend-notes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.machine-cad-summary div,
.machine-cad-manifest div,
.machine-bend-notes article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.machine-cad-summary span,
.machine-cad-summary strong,
.machine-cad-manifest strong,
.machine-cad-manifest span,
.machine-cad-manifest small,
.machine-bend-notes span,
.machine-bend-notes p {
  display: block;
  overflow-wrap: anywhere;
}

.machine-cad-summary span,
.machine-cad-manifest span,
.machine-cad-manifest small,
.machine-bend-notes p {
  color: var(--muted);
  font-size: 12px;
}

.machine-bend-notes span {
  color: var(--teal);
  font-weight: 900;
}

@media (max-width: 960px) {
  .machine-cad-head,
  .machine-cad-summary,
  .machine-cad-manifest,
  .machine-bend-notes {
    grid-template-columns: 1fr;
  }
}



.cabinet-3d-viewer {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.cabinet-3d-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.cabinet-3d-head h3,
.cabinet-3d-head p { margin: 0; }

.cabinet-3d-head h3 { color: var(--deep); }

.cabinet-3d-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.cabinet-3d-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.cabinet-3d-controls,
.cabinet-3d-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.cabinet-3d-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.cabinet-3d-controls input,
.cabinet-3d-controls select {
  min-height: 38px;
  border: 1px solid #d8e1e5;
  padding: 8px;
  font: inherit;
}

.cabinet-3d-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.cabinet-3d-stage svg {
  display: block;
  width: 100%;
  min-height: 320px;
}

.cabinet-3d-summary,
.cabinet-3d-callouts {
  display: grid;
  gap: 8px;
}

.cabinet-3d-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cabinet-3d-callouts { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cabinet-3d-summary div,
.cabinet-3d-callouts article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.cabinet-3d-summary span,
.cabinet-3d-summary strong,
.cabinet-3d-callouts span,
.cabinet-3d-callouts strong,
.cabinet-3d-callouts p {
  display: block;
  overflow-wrap: anywhere;
}

.cabinet-3d-summary span,
.cabinet-3d-callouts p {
  color: var(--muted);
  font-size: 12px;
}

.cabinet-3d-callouts span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 940px) {
  .cabinet-3d-head,
  .cabinet-3d-controls,
  .cabinet-3d-summary,
  .cabinet-3d-callouts { grid-template-columns: 1fr; }
}



.cabinet-clearance-checker {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.clearance-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.clearance-head h3,
.clearance-head p { margin: 0; }
.clearance-head h3 { color: var(--deep); }
.clearance-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.clearance-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.clearance-controls,
.clearance-summary,
.clearance-checks,
.clearance-recommendations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.clearance-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.clearance-controls input,
.clearance-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }

.clearance-stage { background: #fff; border: 1px solid #d8e1e5; overflow: hidden; }
.clearance-stage svg { display: block; width: 100%; min-height: 300px; }

.clearance-summary div,
.clearance-checks article,
.clearance-recommendations article { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.clearance-checks article { border-left: 4px solid #008f9f; }
.clearance-checks article[data-status="warn"] { border-left-color: #c8871f; }
.clearance-checks article[data-status="fail"] { border-left-color: #a84e33; }

.clearance-summary span,
.clearance-summary strong,
.clearance-checks span,
.clearance-checks strong,
.clearance-checks p,
.clearance-recommendations span,
.clearance-recommendations p { display: block; overflow-wrap: anywhere; }
.clearance-summary span,
.clearance-checks p,
.clearance-recommendations p { color: var(--muted); font-size: 12px; }
.clearance-checks span,
.clearance-recommendations span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .clearance-head,
  .clearance-controls,
  .clearance-summary,
  .clearance-checks,
  .clearance-recommendations { grid-template-columns: 1fr; }
}



.plumbing-path-designer {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.plumbing-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.plumbing-head h3,
.plumbing-head p { margin: 0; }
.plumbing-head h3 { color: var(--deep); }
.plumbing-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.plumbing-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.plumbing-controls,
.plumbing-summary,
.plumbing-bom,
.plumbing-tests {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.plumbing-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.plumbing-controls input,
.plumbing-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }

.plumbing-stage { background: #fff; border: 1px solid #d8e1e5; overflow: hidden; }
.plumbing-stage svg { display: block; width: 100%; min-height: 300px; }

.plumbing-summary div,
.plumbing-bom article,
.plumbing-tests article { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.plumbing-tests article { border-left: 4px solid #008f9f; }
.plumbing-tests article[data-status="warn"] { border-left-color: #c8871f; }

.plumbing-summary span,
.plumbing-summary strong,
.plumbing-bom span,
.plumbing-bom strong,
.plumbing-bom p,
.plumbing-bom small,
.plumbing-tests span,
.plumbing-tests strong,
.plumbing-tests p { display: block; overflow-wrap: anywhere; }
.plumbing-summary span,
.plumbing-bom p,
.plumbing-bom small,
.plumbing-tests p { color: var(--muted); font-size: 12px; }
.plumbing-bom span,
.plumbing-tests span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .plumbing-head,
  .plumbing-controls,
  .plumbing-summary,
  .plumbing-bom,
  .plumbing-tests { grid-template-columns: 1fr; }
}



.sanitation-cycle-designer {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.sanitation-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.sanitation-head h3,
.sanitation-head p { margin: 0; }
.sanitation-head h3 { color: var(--deep); }
.sanitation-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.sanitation-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.sanitation-controls,
.sanitation-summary,
.sanitation-timeline,
.sanitation-dosage,
.sanitation-verification {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sanitation-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.sanitation-controls input,
.sanitation-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }

.sanitation-summary div,
.sanitation-timeline article,
.sanitation-dosage div,
.sanitation-verification article { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.sanitation-verification article { border-left: 4px solid #008f9f; }
.sanitation-verification article[data-status="warn"] { border-left-color: #c8871f; }

.sanitation-summary span,
.sanitation-summary strong,
.sanitation-timeline span,
.sanitation-timeline strong,
.sanitation-timeline p,
.sanitation-timeline small,
.sanitation-dosage span,
.sanitation-dosage strong,
.sanitation-verification span,
.sanitation-verification strong,
.sanitation-verification p { display: block; overflow-wrap: anywhere; }
.sanitation-summary span,
.sanitation-timeline p,
.sanitation-timeline small,
.sanitation-dosage span,
.sanitation-verification p { color: var(--muted); font-size: 12px; }
.sanitation-timeline span,
.sanitation-verification span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .sanitation-head,
  .sanitation-controls,
  .sanitation-summary,
  .sanitation-timeline,
  .sanitation-dosage,
  .sanitation-verification { grid-template-columns: 1fr; }
}



.dispense-bay-matrix {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.bay-matrix-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.bay-matrix-head h3,
.bay-matrix-head p { margin: 0; }
.bay-matrix-head h3 { color: var(--deep); }
.bay-matrix-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.bay-matrix-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.bay-matrix-controls,
.bay-matrix-summary,
.bay-matrix-grid,
.bay-calibration-checks,
.bay-revenue-plan {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.bay-matrix-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.bay-matrix-controls input { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }
.bay-matrix-summary div,
.bay-matrix-grid article,
.bay-calibration-checks article,
.bay-revenue-plan div { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.bay-calibration-checks article { border-left: 4px solid #008f9f; }
.bay-calibration-checks article[data-status="warn"] { border-left-color: #c8871f; }
.bay-calibration-checks article[data-status="fail"] { border-left-color: #a84e33; }
.bay-matrix-summary span,
.bay-matrix-summary strong,
.bay-matrix-grid span,
.bay-matrix-grid strong,
.bay-matrix-grid p,
.bay-matrix-grid small,
.bay-calibration-checks span,
.bay-calibration-checks strong,
.bay-calibration-checks p,
.bay-revenue-plan span,
.bay-revenue-plan strong { display: block; overflow-wrap: anywhere; }
.bay-matrix-summary span,
.bay-matrix-grid p,
.bay-matrix-grid small,
.bay-calibration-checks p,
.bay-revenue-plan span { color: var(--muted); font-size: 12px; }
.bay-matrix-grid span,
.bay-calibration-checks span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .bay-matrix-head,
  .bay-matrix-controls,
  .bay-matrix-summary,
  .bay-matrix-grid,
  .bay-calibration-checks,
  .bay-revenue-plan { grid-template-columns: 1fr; }
}



.payment-reconciliation-module {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.payment-reconcile-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.payment-reconcile-head h3,
.payment-reconcile-head p { margin: 0; }
.payment-reconcile-head h3 { color: var(--deep); }
.payment-reconcile-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.payment-reconcile-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.payment-reconcile-controls,
.payment-reconcile-summary,
.payment-settlement-rows,
.payment-fraud-checks,
.payment-lockout-rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.payment-reconcile-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.payment-reconcile-controls input,
.payment-reconcile-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }
.payment-reconcile-summary div,
.payment-settlement-rows article,
.payment-fraud-checks article,
.payment-lockout-rules article { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.payment-settlement-rows article,
.payment-fraud-checks article { border-left: 4px solid #008f9f; }
.payment-settlement-rows article[data-status="review"],
.payment-fraud-checks article[data-status="warn"] { border-left-color: #c8871f; }
.payment-fraud-checks article[data-status="fail"] { border-left-color: #a84e33; }
.payment-reconcile-summary span,
.payment-reconcile-summary strong,
.payment-settlement-rows span,
.payment-settlement-rows strong,
.payment-settlement-rows p,
.payment-settlement-rows small,
.payment-fraud-checks span,
.payment-fraud-checks strong,
.payment-fraud-checks p,
.payment-lockout-rules span,
.payment-lockout-rules strong,
.payment-lockout-rules p { display: block; overflow-wrap: anywhere; }
.payment-reconcile-summary span,
.payment-settlement-rows p,
.payment-settlement-rows small,
.payment-fraud-checks p,
.payment-lockout-rules p { color: var(--muted); font-size: 12px; }
.payment-settlement-rows span,
.payment-fraud-checks span,
.payment-lockout-rules span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .payment-reconcile-head,
  .payment-reconcile-controls,
  .payment-reconcile-summary,
  .payment-settlement-rows,
  .payment-fraud-checks,
  .payment-lockout-rules { grid-template-columns: 1fr; }
}



.spares-replenishment-planner {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.spares-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.spares-head h3,
.spares-head p { margin: 0; }
.spares-head h3 { color: var(--deep); }
.spares-head p { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.spares-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }

.spares-controls,
.spares-summary,
.spares-kit-rows,
.spares-reorder-checks,
.spares-recurring-revenue {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.spares-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.spares-controls input,
.spares-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }
.spares-summary div,
.spares-kit-rows article,
.spares-reorder-checks article,
.spares-recurring-revenue div { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.spares-reorder-checks article { border-left: 4px solid #008f9f; }
.spares-reorder-checks article[data-status="warn"] { border-left-color: #c8871f; }
.spares-summary span,
.spares-summary strong,
.spares-kit-rows span,
.spares-kit-rows strong,
.spares-kit-rows p,
.spares-kit-rows small,
.spares-reorder-checks span,
.spares-reorder-checks strong,
.spares-reorder-checks p,
.spares-recurring-revenue span,
.spares-recurring-revenue strong { display: block; overflow-wrap: anywhere; }
.spares-summary span,
.spares-kit-rows p,
.spares-kit-rows small,
.spares-reorder-checks p,
.spares-recurring-revenue span { color: var(--muted); font-size: 12px; }
.spares-kit-rows span,
.spares-reorder-checks span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 940px) {
  .spares-head,
  .spares-controls,
  .spares-summary,
  .spares-kit-rows,
  .spares-reorder-checks,
  .spares-recurring-revenue { grid-template-columns: 1fr; }
}


.cabinet-parts-library {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.cabinet-parts-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.cabinet-parts-head h3,
.cabinet-parts-head p { margin: 0; }

.cabinet-parts-head h3 { color: var(--deep); }

.cabinet-parts-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.cabinet-parts-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.cabinet-parts-controls,
.cabinet-parts-summary,
.cabinet-parts-markup {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.cabinet-parts-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.cabinet-parts-controls input,
.cabinet-parts-controls select {
  min-height: 38px;
  border: 1px solid #d8e1e5;
  padding: 8px;
  font: inherit;
}

.cabinet-parts-summary div,
.cabinet-parts-markup div,
.cabinet-parts-grid article,
.cabinet-parts-fabrication article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.cabinet-parts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cabinet-parts-fabrication {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.cabinet-parts-fabrication article { border-left: 4px solid #008f9f; }
.cabinet-parts-fabrication article[data-status="warn"] { border-left-color: #c8871f; }

.cabinet-parts-summary span,
.cabinet-parts-summary strong,
.cabinet-parts-markup span,
.cabinet-parts-markup strong,
.cabinet-parts-grid span,
.cabinet-parts-grid strong,
.cabinet-parts-grid p,
.cabinet-parts-grid small,
.cabinet-parts-fabrication span,
.cabinet-parts-fabrication strong,
.cabinet-parts-fabrication p {
  display: block;
  overflow-wrap: anywhere;
}

.cabinet-parts-summary span,
.cabinet-parts-markup span,
.cabinet-parts-grid p,
.cabinet-parts-grid small,
.cabinet-parts-fabrication p {
  color: var(--muted);
  font-size: 12px;
}

.cabinet-parts-grid span,
.cabinet-parts-fabrication span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 940px) {
  .cabinet-parts-head,
  .cabinet-parts-controls,
  .cabinet-parts-summary,
  .cabinet-parts-markup,
  .cabinet-parts-grid,
  .cabinet-parts-fabrication { grid-template-columns: 1fr; }
}


.machine-exploded-assembly {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
  border-radius: 8px;
}

.machine-exploded-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.machine-exploded-head h3,
.machine-exploded-head p {
  margin: 0;
}

.machine-exploded-head p {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.machine-exploded-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.machine-exploded-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.machine-exploded-stage svg {
  display: block;
  width: 100%;
  min-height: 320px;
}

.machine-cut-list,
.machine-hardware-list,
.machine-assembly-sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.machine-cut-list div,
.machine-hardware-list article,
.machine-assembly-sequence div {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.machine-cut-list strong,
.machine-cut-list span,
.machine-cut-list small,
.machine-hardware-list strong,
.machine-hardware-list span,
.machine-hardware-list p,
.machine-assembly-sequence p {
  display: block;
  overflow-wrap: anywhere;
}

.machine-cut-list span,
.machine-cut-list small,
.machine-hardware-list p {
  color: var(--muted);
  font-size: 12px;
}

.machine-hardware-list span,
.machine-assembly-sequence span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.machine-assembly-sequence p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 960px) {
  .machine-exploded-head,
  .machine-cut-list,
  .machine-hardware-list,
  .machine-assembly-sequence {
    grid-template-columns: 1fr;
  }
}

.machine-3d-configurator {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
  border-radius: 8px;
}

.machine-3d-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.machine-3d-head h3 {
  margin: 0;
  color: var(--deep);
  font-size: 22px;
}

.machine-3d-head p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.machine-3d-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.machine-3d-stage {
  min-width: 0;
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.machine-3d-stage svg {
  display: block;
  width: 100%;
  min-height: 360px;
}

.machine-3d-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.machine-3d-specs div {
  min-width: 0;
  padding: 9px;
  background: #eef5f7;
}

.machine-3d-specs span,
.machine-3d-specs strong {
  display: block;
  overflow-wrap: anywhere;
}

.machine-3d-specs span {
  color: var(--muted);
  font-size: 11px;
}

.machine-3d-layers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.machine-3d-layers article {
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.machine-3d-layers span,
.machine-3d-layers strong,
.machine-3d-layers p,
.machine-3d-layers small {
  display: block;
  overflow-wrap: anywhere;
}

.machine-3d-layers span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.machine-3d-layers p {
  margin: 5px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.machine-3d-layers small {
  color: var(--deep);
  font-weight: 900;
}

@media (max-width: 960px) {
  .machine-3d-head,
  .machine-3d-specs,
  .machine-3d-layers {
    grid-template-columns: 1fr;
  }
}

.tinker-grid {
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  grid-template-areas:
    "controls stage"
    "output output";
  gap: 14px;
  align-items: start;
}

.plc-grid {
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  grid-template-areas:
    "controls stage"
    "output output";
  gap: 14px;
  align-items: start;
}

.tinker-controls,
.plc-controls {
  grid-area: controls;
  box-shadow: none;
  border-radius: 6px;
  position: sticky;
  top: 82px;
}

.tinker-stage,
.plc-board {
  grid-area: stage;
  box-shadow: none;
  border-radius: 6px;
}

.tinker-output,
.plc-output {
  grid-area: output;
  box-shadow: none;
  border-radius: 6px;
}

.tinker-output {
  grid-template-columns: minmax(220px, .35fr) minmax(260px, .65fr);
}

.tinker-output h3,
.tinker-output > p {
  grid-column: 1;
}

.tinker-bom,
.tinker-automation {
  align-self: start;
}

.tinker-stage svg {
  min-height: 300px;
  max-height: 520px;
}

.plc-board {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.plc-output {
  grid-template-columns: minmax(220px, .28fr) minmax(240px, .32fr) minmax(320px, .4fr);
}

.plc-output h3 {
  grid-column: 1 / -1;
}





.hmi-touchscreen-designer {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.hmi-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.hmi-head h4,
.hmi-head p {
  margin: 0;
}

.hmi-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.hmi-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

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

.hmi-screen-preview {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  background: #10222b;
  color: #fff;
  border: 6px solid #1d343d;
}

.hmi-screen-preview h5 {
  margin: 0;
  color: #d9e9ed;
}

.hmi-screen-preview article {
  display: grid;
  gap: 5px;
  padding: 9px;
  background: #f8fcfd;
  color: var(--deep);
}

.hmi-screen-preview span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hmi-screen-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.hmi-screen-preview button {
  min-height: 32px;
  border: 0;
  background: var(--teal);
  color: #fff;
  font-weight: 900;
}

.hmi-screen-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hmi-screen-flow span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
  font-size: 12px;
  font-weight: 850;
}

.hmi-screen-flow b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: var(--deep);
  color: #fff;
  font-size: 10px;
}

.hmi-copy-deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hmi-copy-deck div {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.hmi-copy-deck span,
.hmi-copy-deck strong,
.hmi-copy-deck p {
  display: block;
  overflow-wrap: anywhere;
}

.hmi-copy-deck span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.hmi-copy-deck p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 760px) {
  .hmi-head,
  .hmi-screen-grid,
  .hmi-copy-deck {
    grid-template-columns: 1fr;
  }
}



.sensor-calibration-lab {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.sensor-calibration-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.sensor-calibration-head h4,
.sensor-calibration-head p {
  margin: 0;
}

.sensor-calibration-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.sensor-calibration-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.sensor-calibration-controls,
.sensor-calibration-summary,
.sensor-calibration-table {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sensor-calibration-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.sensor-calibration-controls input {
  min-height: 38px;
  border: 1px solid #d8e1e5;
  padding: 8px;
  font: inherit;
}

.sensor-calibration-summary div,
.sensor-calibration-table article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.sensor-calibration-summary span,
.sensor-calibration-summary strong,
.sensor-calibration-table strong,
.sensor-calibration-table span,
.sensor-calibration-table p {
  display: block;
  overflow-wrap: anywhere;
}

.sensor-calibration-summary span,
.sensor-calibration-table span,
.sensor-calibration-table p {
  color: var(--muted);
  font-size: 12px;
}

.sensor-calibration-constants {
  margin: 0;
  padding: 10px;
  background: #10222b;
  color: #d9e9ed;
  overflow: auto;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .sensor-calibration-head,
  .sensor-calibration-controls,
  .sensor-calibration-summary,
  .sensor-calibration-table {
    grid-template-columns: 1fr;
  }
}


.firmware-lab {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.firmware-lab-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.firmware-lab-head h4,
.firmware-lab-head p {
  margin: 0;
}

.firmware-lab-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.firmware-lab-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.firmware-lab-summary div,
.firmware-pin-assertions div {
  min-width: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.firmware-lab-summary span,
.firmware-lab-summary small,
.firmware-pin-assertions span,
.firmware-pin-assertions small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.firmware-lab-summary strong,
.firmware-pin-assertions strong {
  display: block;
  overflow-wrap: anywhere;
}

.firmware-lab-tests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.firmware-lab-tests article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border-left: 4px solid #008f9f;
}

.firmware-lab-tests article[data-status="warn"] {
  border-left-color: #c8871f;
}

.firmware-lab-tests article[data-status="fail"] {
  border-left-color: #a84e33;
}

.firmware-lab-tests span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.firmware-lab-tests p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.firmware-pin-assertions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.firmware-state-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.firmware-state-timeline span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: #10222b;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.firmware-state-timeline b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: #008f9f;
  color: #fff;
  font-size: 10px;
}

@media (max-width: 760px) {
  .firmware-lab-head,
  .firmware-lab-summary,
  .firmware-lab-tests,
  .firmware-pin-assertions {
    grid-template-columns: 1fr;
  }
}

.plc-code {
  max-height: 320px;
}

.plc-module,
.plc-io-map div,
.plc-revenue,
.tinker-bom div,
.tinker-automation article {
  border-radius: 4px;
  overflow-wrap: anywhere;
}

@media (max-width: 920px) {
  .topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px;
  }

  .brand {
    min-width: 0;
  }

  .topbar nav {
    max-width: 100%;
    justify-content: flex-start;
  }

  .tinker-toolbar,
  .plc-toolbar,
  .tinker-grid,
  .plc-grid,
  .tinker-output,
  .plc-output {
    grid-template-columns: 1fr;
  }

  .tinker-grid,
  .plc-grid {
    grid-template-areas:
      "controls"
      "stage"
      "output";
  }

  .tinker-controls,
  .plc-controls {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tinker-output h3,
  .tinker-output > p,
  .plc-output h3 {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .machine-tinker,
  .plc-simulator {
    width: min(100% - 18px, 1180px);
  }

  nav a {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .tinker-toolbar .button,
  .plc-toolbar .button {
    width: 100%;
  }

  .tinker-controls,
  .plc-controls,
  .plc-board {
    grid-template-columns: 1fr;
  }

  .tinker-stage,
  .plc-board,
  .tinker-output,
  .plc-output,
  .tinker-controls,
  .plc-controls {
    padding: 10px;
  }

  .tinker-stage svg {
    min-height: 220px;
  }
}

.hmi-touchscreen-designer {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.hmi-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.hmi-head h4,
.hmi-head p {
  margin: 0;
}

.hmi-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.hmi-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

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

.hmi-screen-preview {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  background: #10222b;
  color: #fff;
  border: 6px solid #1d343d;
}

.hmi-screen-preview h5 {
  margin: 0;
  color: #d9e9ed;
}

.hmi-screen-preview article {
  display: grid;
  gap: 5px;
  padding: 9px;
  background: #f8fcfd;
  color: var(--deep);
}

.hmi-screen-preview span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hmi-screen-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.hmi-screen-preview button {
  min-height: 32px;
  border: 0;
  background: var(--teal);
  color: #fff;
  font-weight: 900;
}

.hmi-screen-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hmi-screen-flow span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
  font-size: 12px;
  font-weight: 850;
}

.hmi-screen-flow b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: var(--deep);
  color: #fff;
  font-size: 10px;
}

.hmi-copy-deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hmi-copy-deck div {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.hmi-copy-deck span,
.hmi-copy-deck strong,
.hmi-copy-deck p {
  display: block;
  overflow-wrap: anywhere;
}

.hmi-copy-deck span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.hmi-copy-deck p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 760px) {
  .hmi-head,
  .hmi-screen-grid,
  .hmi-copy-deck {
    grid-template-columns: 1fr;
  }
}



.sensor-calibration-lab {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.sensor-calibration-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.sensor-calibration-head h4,
.sensor-calibration-head p {
  margin: 0;
}

.sensor-calibration-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.sensor-calibration-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.sensor-calibration-controls,
.sensor-calibration-summary,
.sensor-calibration-table {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sensor-calibration-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.sensor-calibration-controls input {
  min-height: 38px;
  border: 1px solid #d8e1e5;
  padding: 8px;
  font: inherit;
}

.sensor-calibration-summary div,
.sensor-calibration-table article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.sensor-calibration-summary span,
.sensor-calibration-summary strong,
.sensor-calibration-table strong,
.sensor-calibration-table span,
.sensor-calibration-table p {
  display: block;
  overflow-wrap: anywhere;
}

.sensor-calibration-summary span,
.sensor-calibration-table span,
.sensor-calibration-table p {
  color: var(--muted);
  font-size: 12px;
}

.sensor-calibration-constants {
  margin: 0;
  padding: 10px;
  background: #10222b;
  color: #d9e9ed;
  overflow: auto;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .sensor-calibration-head,
  .sensor-calibration-controls,
  .sensor-calibration-summary,
  .sensor-calibration-table {
    grid-template-columns: 1fr;
  }
}


.firmware-lab {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.firmware-lab-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.firmware-lab-head h4,
.firmware-lab-head p {
  margin: 0;
}

.firmware-lab-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.firmware-lab-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.firmware-lab-summary div,
.firmware-pin-assertions div {
  min-width: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.firmware-lab-summary span,
.firmware-lab-summary small,
.firmware-pin-assertions span,
.firmware-pin-assertions small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.firmware-lab-summary strong,
.firmware-pin-assertions strong {
  display: block;
  overflow-wrap: anywhere;
}

.firmware-lab-tests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.firmware-lab-tests article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border-left: 4px solid #008f9f;
}

.firmware-lab-tests article[data-status="warn"] {
  border-left-color: #c8871f;
}

.firmware-lab-tests article[data-status="fail"] {
  border-left-color: #a84e33;
}

.firmware-lab-tests span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.firmware-lab-tests p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.firmware-pin-assertions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.firmware-state-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.firmware-state-timeline span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: #10222b;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.firmware-state-timeline b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: #008f9f;
  color: #fff;
  font-size: 10px;
}

@media (max-width: 760px) {
  .firmware-lab-head,
  .firmware-lab-summary,
  .firmware-lab-tests,
  .firmware-pin-assertions {
    grid-template-columns: 1fr;
  }
}

.plc-code {
    max-height: 260px;
    font-size: 11px;
  }

/* Complete machine studio redesign */

.topbar {
  align-items: center;
}

.topbar nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  max-width: min(980px, 64vw);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.topbar nav a {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.machine-studio {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  gap: 14px;
  scroll-margin-top: 96px;
}

.studio-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  padding: clamp(18px, 2.4vw, 26px);
  background: #10222b;
  color: #fff;
  border: 1px solid #10222b;
}

.studio-head h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.08;
}

.studio-head p:not(.eyebrow) {
  max-width: 820px;
  margin: 9px 0 0;
  color: #d9e9ed;
  line-height: 1.55;
}

.studio-head .button {
  border-color: rgba(255,255,255,.28);
}

.studio-layout {
  display: grid;
  gap: 14px;
  align-items: start;
}

.tinker-grid,
.plc-grid {
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) minmax(300px, 380px);
  grid-template-areas: "controls stage output";
}

.studio-controls,
.studio-stage,
.studio-output {
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: none;
  border-radius: 6px;
  min-width: 0;
}

.studio-controls {
  grid-area: controls;
  display: grid;
  gap: 10px;
  padding: 12px;
  position: sticky;
  top: 86px;
}

.studio-controls label {
  display: grid;
  gap: 6px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.studio-controls input,
.studio-controls select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  padding: 8px 9px;
  background: #f8fcfd;
  color: var(--deep);
  font: inherit;
}

.studio-controls .check {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  min-height: 32px;
  padding: 7px 8px;
  background: #f8fcfd;
  border: 1px solid var(--line);
}

.studio-stage {
  grid-area: stage;
  padding: 12px;
}

.tinker-stage svg {
  display: block;
  width: 100%;
  aspect-ratio: 980 / 540;
  min-height: 300px;
  max-height: 500px;
}

.plc-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 9px;
  align-content: start;
}

.studio-output {
  grid-area: output;
  display: grid;
  gap: 12px;
  padding: 12px;
}

.studio-output h3,
.studio-output h4 {
  margin: 0;
  color: var(--deep);
  line-height: 1.15;
}

.studio-output h3 {
  font-size: 20px;
}

.studio-output h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.studio-output p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.tinker-bom,
.tinker-automation,
.plc-io-map {
  display: grid;
  gap: 8px;
}

.tinker-bom div,
.tinker-automation article,
.plc-module,
.plc-io-map div,
.plc-revenue {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  background: #f8fcfd;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

.tinker-bom span,
.tinker-bom small,
.tinker-automation p,
.plc-module span,
.plc-module small,
.plc-io-map span,
.plc-io-map small,
.plc-revenue span,
.plc-revenue small {
  color: var(--muted);
  font-size: 12px;
}

.tinker-bom strong,
.tinker-automation strong,
.plc-module strong,
.plc-io-map strong,
.plc-revenue strong {
  color: var(--deep);
  font-size: 14px;
}

.plc-revenue strong {
  font-size: 22px;
}





.hmi-touchscreen-designer {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.hmi-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.hmi-head h4,
.hmi-head p {
  margin: 0;
}

.hmi-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.hmi-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

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

.hmi-screen-preview {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  background: #10222b;
  color: #fff;
  border: 6px solid #1d343d;
}

.hmi-screen-preview h5 {
  margin: 0;
  color: #d9e9ed;
}

.hmi-screen-preview article {
  display: grid;
  gap: 5px;
  padding: 9px;
  background: #f8fcfd;
  color: var(--deep);
}

.hmi-screen-preview span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hmi-screen-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.hmi-screen-preview button {
  min-height: 32px;
  border: 0;
  background: var(--teal);
  color: #fff;
  font-weight: 900;
}

.hmi-screen-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hmi-screen-flow span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
  font-size: 12px;
  font-weight: 850;
}

.hmi-screen-flow b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: var(--deep);
  color: #fff;
  font-size: 10px;
}

.hmi-copy-deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hmi-copy-deck div {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.hmi-copy-deck span,
.hmi-copy-deck strong,
.hmi-copy-deck p {
  display: block;
  overflow-wrap: anywhere;
}

.hmi-copy-deck span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.hmi-copy-deck p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 760px) {
  .hmi-head,
  .hmi-screen-grid,
  .hmi-copy-deck {
    grid-template-columns: 1fr;
  }
}



.sensor-calibration-lab {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.sensor-calibration-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.sensor-calibration-head h4,
.sensor-calibration-head p {
  margin: 0;
}

.sensor-calibration-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.sensor-calibration-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.sensor-calibration-controls,
.sensor-calibration-summary,
.sensor-calibration-table {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sensor-calibration-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.sensor-calibration-controls input {
  min-height: 38px;
  border: 1px solid #d8e1e5;
  padding: 8px;
  font: inherit;
}

.sensor-calibration-summary div,
.sensor-calibration-table article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.sensor-calibration-summary span,
.sensor-calibration-summary strong,
.sensor-calibration-table strong,
.sensor-calibration-table span,
.sensor-calibration-table p {
  display: block;
  overflow-wrap: anywhere;
}

.sensor-calibration-summary span,
.sensor-calibration-table span,
.sensor-calibration-table p {
  color: var(--muted);
  font-size: 12px;
}

.sensor-calibration-constants {
  margin: 0;
  padding: 10px;
  background: #10222b;
  color: #d9e9ed;
  overflow: auto;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .sensor-calibration-head,
  .sensor-calibration-controls,
  .sensor-calibration-summary,
  .sensor-calibration-table {
    grid-template-columns: 1fr;
  }
}


.firmware-lab {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.firmware-lab-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.firmware-lab-head h4,
.firmware-lab-head p {
  margin: 0;
}

.firmware-lab-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.firmware-lab-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.firmware-lab-summary div,
.firmware-pin-assertions div {
  min-width: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.firmware-lab-summary span,
.firmware-lab-summary small,
.firmware-pin-assertions span,
.firmware-pin-assertions small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.firmware-lab-summary strong,
.firmware-pin-assertions strong {
  display: block;
  overflow-wrap: anywhere;
}

.firmware-lab-tests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.firmware-lab-tests article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border-left: 4px solid #008f9f;
}

.firmware-lab-tests article[data-status="warn"] {
  border-left-color: #c8871f;
}

.firmware-lab-tests article[data-status="fail"] {
  border-left-color: #a84e33;
}

.firmware-lab-tests span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.firmware-lab-tests p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.firmware-pin-assertions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.firmware-state-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.firmware-state-timeline span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: #10222b;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.firmware-state-timeline b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: #008f9f;
  color: #fff;
  font-size: 10px;
}

@media (max-width: 760px) {
  .firmware-lab-head,
  .firmware-lab-summary,
  .firmware-lab-tests,
  .firmware-pin-assertions {
    grid-template-columns: 1fr;
  }
}

.plc-code {
  width: 100%;
  max-height: 320px;
  overflow: auto;
  margin: 0;
  padding: 11px;
  background: #10222b;
  color: #e9fbff;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
}

@media (max-width: 1120px) {
  .topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px;
  }

  .brand {
    min-width: 0;
  }

  .topbar nav {
    max-width: 100%;
  }

  .tinker-grid,
  .plc-grid {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    grid-template-areas:
      "controls stage"
      "output output";
  }

  .studio-controls {
    position: static;
  }

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

  .plc-output {
    grid-template-columns: minmax(200px, .28fr) minmax(240px, .32fr) minmax(320px, .4fr);
  }
}

@media (max-width: 760px) {
  .machine-studio {
    width: min(100% - 18px, 1180px);
    scroll-margin-top: 118px;
  }

  .studio-head {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 16px;
  }

  .studio-head .button {
    width: 100%;
  }

  .tinker-grid,
  .plc-grid,
  .studio-output,
  .plc-output {
    grid-template-columns: 1fr;
    grid-template-areas:
      "controls"
      "stage"
      "output";
  }

  .studio-controls {
    grid-template-columns: 1fr;
  }

  .tinker-stage svg {
    min-height: 230px;
  }

  .plc-board {
    grid-template-columns: 1fr;
  }

  



}

.hmi-touchscreen-designer {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.hmi-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.hmi-head h4,
.hmi-head p {
  margin: 0;
}

.hmi-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.hmi-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

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

.hmi-screen-preview {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  background: #10222b;
  color: #fff;
  border: 6px solid #1d343d;
}

.hmi-screen-preview h5 {
  margin: 0;
  color: #d9e9ed;
}

.hmi-screen-preview article {
  display: grid;
  gap: 5px;
  padding: 9px;
  background: #f8fcfd;
  color: var(--deep);
}

.hmi-screen-preview span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hmi-screen-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.hmi-screen-preview button {
  min-height: 32px;
  border: 0;
  background: var(--teal);
  color: #fff;
  font-weight: 900;
}

.hmi-screen-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hmi-screen-flow span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
  font-size: 12px;
  font-weight: 850;
}

.hmi-screen-flow b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: var(--deep);
  color: #fff;
  font-size: 10px;
}

.hmi-copy-deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hmi-copy-deck div {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.hmi-copy-deck span,
.hmi-copy-deck strong,
.hmi-copy-deck p {
  display: block;
  overflow-wrap: anywhere;
}

.hmi-copy-deck span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.hmi-copy-deck p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 760px) {
  .hmi-head,
  .hmi-screen-grid,
  .hmi-copy-deck {
    grid-template-columns: 1fr;
  }
}



.sensor-calibration-lab {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.sensor-calibration-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.sensor-calibration-head h4,
.sensor-calibration-head p {
  margin: 0;
}

.sensor-calibration-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.sensor-calibration-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.sensor-calibration-controls,
.sensor-calibration-summary,
.sensor-calibration-table {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sensor-calibration-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.sensor-calibration-controls input {
  min-height: 38px;
  border: 1px solid #d8e1e5;
  padding: 8px;
  font: inherit;
}

.sensor-calibration-summary div,
.sensor-calibration-table article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.sensor-calibration-summary span,
.sensor-calibration-summary strong,
.sensor-calibration-table strong,
.sensor-calibration-table span,
.sensor-calibration-table p {
  display: block;
  overflow-wrap: anywhere;
}

.sensor-calibration-summary span,
.sensor-calibration-table span,
.sensor-calibration-table p {
  color: var(--muted);
  font-size: 12px;
}

.sensor-calibration-constants {
  margin: 0;
  padding: 10px;
  background: #10222b;
  color: #d9e9ed;
  overflow: auto;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .sensor-calibration-head,
  .sensor-calibration-controls,
  .sensor-calibration-summary,
  .sensor-calibration-table {
    grid-template-columns: 1fr;
  }
}


.firmware-lab {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.firmware-lab-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.firmware-lab-head h4,
.firmware-lab-head p {
  margin: 0;
}

.firmware-lab-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.firmware-lab-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.firmware-lab-summary div,
.firmware-pin-assertions div {
  min-width: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.firmware-lab-summary span,
.firmware-lab-summary small,
.firmware-pin-assertions span,
.firmware-pin-assertions small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.firmware-lab-summary strong,
.firmware-pin-assertions strong {
  display: block;
  overflow-wrap: anywhere;
}

.firmware-lab-tests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.firmware-lab-tests article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border-left: 4px solid #008f9f;
}

.firmware-lab-tests article[data-status="warn"] {
  border-left-color: #c8871f;
}

.firmware-lab-tests article[data-status="fail"] {
  border-left-color: #a84e33;
}

.firmware-lab-tests span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.firmware-lab-tests p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.firmware-pin-assertions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.firmware-state-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.firmware-state-timeline span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: #10222b;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.firmware-state-timeline b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: #008f9f;
  color: #fff;
  font-size: 10px;
}

@media (max-width: 760px) {
  .firmware-lab-head,
  .firmware-lab-summary,
  .firmware-lab-tests,
  .firmware-pin-assertions {
    grid-template-columns: 1fr;
  }
}

.plc-code {
    max-height: 260px;
  }

.more-nav {
  position: relative;
  flex: 0 0 auto;
}

.more-nav summary {
  display: grid;
  place-items: center;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--deep);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.more-nav summary::-webkit-details-marker {
  display: none;
}

.more-nav[open] summary {
  background: var(--deep);
  color: #fff;
  border-color: var(--deep);
}

.more-nav div {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: min(520px, calc(100vw - 28px));
  max-height: min(520px, calc(100vh - 110px));
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.more-nav div a {
  min-height: 34px;
  padding: 8px 9px;
  font-size: 12px;
}

@media (max-width: 680px) {
  .more-nav div {
    left: 0;
    right: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


.machine-revenue,
.machine-module-grid div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  background: #fffaf0;
  border-radius: 4px;
}

.machine-revenue strong,
.machine-module-grid strong {
  color: var(--deep);
}

.machine-revenue strong {
  font-size: 24px;
}

.machine-revenue span,
.machine-revenue small,
.machine-module-grid span,
.machine-module-grid small {
  color: var(--muted);
  font-size: 12px;
}

.machine-module-grid {
  display: grid;
  gap: 8px;
}

/* Studio UX completion pass */

.machine-studio {
  gap: 16px;
}

.studio-head {
  border-radius: 8px;
  background: linear-gradient(135deg, #10222b 0%, #123c4a 58%, #0f5964 100%);
}

.studio-head .eyebrow {
  color: #9ee5df;
}

.studio-layout {
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.tinker-grid,
.plc-grid {
  grid-template-columns: minmax(240px, 290px) minmax(0, 1.05fr) minmax(330px, .95fr);
}

.studio-controls,
.studio-stage,
.studio-output {
  border-radius: 8px;
}

.studio-controls {
  padding: 14px;
  background: #f8fcfd;
  border-color: #d7e6ea;
}

.studio-controls label:not(.check) {
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.studio-controls label:not(.check) select,
.studio-controls label:not(.check) input {
  margin-top: 2px;
}

.studio-controls .check {
  position: relative;
  min-height: 42px;
  padding: 9px 10px 9px 42px;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}

.studio-controls .check input {
  position: absolute;
  left: 10px;
  width: 22px;
  height: 22px;
  min-height: 0;
  accent-color: var(--teal);
}

.studio-stage {
  min-height: 100%;
  background:
    linear-gradient(180deg, rgba(0,143,159,.08), rgba(255,255,255,0) 52%),
    #f8fcfd;
  border-color: #d7e6ea;
}

.tinker-stage svg {
  min-height: 360px;
  filter: drop-shadow(0 12px 18px rgba(16,34,43,.12));
}

.plc-board {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: #f8fcfd;
}

.studio-output {
  background: #fff;
  border-color: #d7e6ea;
}

.studio-summary {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fcfd;
}

.machine-revenue,
.plc-revenue {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.machine-revenue div,
.plc-revenue div {
  display: grid;
  gap: 2px;
  min-height: 68px;
  padding: 10px;
  background: #10222b;
  color: #fff;
  border-radius: 6px;
}

.machine-revenue span,
.plc-revenue span {
  color: #9ee5df;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.machine-revenue strong,
.plc-revenue strong {
  color: #fff;
  font-size: clamp(16px, 1.7vw, 22px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.machine-module-grid,
.tinker-bom,
.tinker-automation,
.plc-io-map {
  margin-top: 8px;
}

.machine-module-grid article,
.tinker-bom div,
.tinker-automation article,
.plc-module,
.plc-io-map div {
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  box-shadow: 0 8px 18px rgba(17,52,64,.06);
}

.machine-module-grid article div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.machine-module-grid article span {
  flex: 0 0 auto;
  color: var(--deep);
  font-weight: 900;
}

.tinker-bom div em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.plc-module {
  min-height: 90px;
}





.hmi-touchscreen-designer {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.hmi-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.hmi-head h4,
.hmi-head p {
  margin: 0;
}

.hmi-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.hmi-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

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

.hmi-screen-preview {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  background: #10222b;
  color: #fff;
  border: 6px solid #1d343d;
}

.hmi-screen-preview h5 {
  margin: 0;
  color: #d9e9ed;
}

.hmi-screen-preview article {
  display: grid;
  gap: 5px;
  padding: 9px;
  background: #f8fcfd;
  color: var(--deep);
}

.hmi-screen-preview span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hmi-screen-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.hmi-screen-preview button {
  min-height: 32px;
  border: 0;
  background: var(--teal);
  color: #fff;
  font-weight: 900;
}

.hmi-screen-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hmi-screen-flow span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
  font-size: 12px;
  font-weight: 850;
}

.hmi-screen-flow b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: var(--deep);
  color: #fff;
  font-size: 10px;
}

.hmi-copy-deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hmi-copy-deck div {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.hmi-copy-deck span,
.hmi-copy-deck strong,
.hmi-copy-deck p {
  display: block;
  overflow-wrap: anywhere;
}

.hmi-copy-deck span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.hmi-copy-deck p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 760px) {
  .hmi-head,
  .hmi-screen-grid,
  .hmi-copy-deck {
    grid-template-columns: 1fr;
  }
}



.sensor-calibration-lab {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.sensor-calibration-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.sensor-calibration-head h4,
.sensor-calibration-head p {
  margin: 0;
}

.sensor-calibration-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.sensor-calibration-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.sensor-calibration-controls,
.sensor-calibration-summary,
.sensor-calibration-table {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sensor-calibration-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.sensor-calibration-controls input {
  min-height: 38px;
  border: 1px solid #d8e1e5;
  padding: 8px;
  font: inherit;
}

.sensor-calibration-summary div,
.sensor-calibration-table article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.sensor-calibration-summary span,
.sensor-calibration-summary strong,
.sensor-calibration-table strong,
.sensor-calibration-table span,
.sensor-calibration-table p {
  display: block;
  overflow-wrap: anywhere;
}

.sensor-calibration-summary span,
.sensor-calibration-table span,
.sensor-calibration-table p {
  color: var(--muted);
  font-size: 12px;
}

.sensor-calibration-constants {
  margin: 0;
  padding: 10px;
  background: #10222b;
  color: #d9e9ed;
  overflow: auto;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .sensor-calibration-head,
  .sensor-calibration-controls,
  .sensor-calibration-summary,
  .sensor-calibration-table {
    grid-template-columns: 1fr;
  }
}


.firmware-lab {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.firmware-lab-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.firmware-lab-head h4,
.firmware-lab-head p {
  margin: 0;
}

.firmware-lab-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.firmware-lab-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.firmware-lab-summary div,
.firmware-pin-assertions div {
  min-width: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.firmware-lab-summary span,
.firmware-lab-summary small,
.firmware-pin-assertions span,
.firmware-pin-assertions small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.firmware-lab-summary strong,
.firmware-pin-assertions strong {
  display: block;
  overflow-wrap: anywhere;
}

.firmware-lab-tests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.firmware-lab-tests article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border-left: 4px solid #008f9f;
}

.firmware-lab-tests article[data-status="warn"] {
  border-left-color: #c8871f;
}

.firmware-lab-tests article[data-status="fail"] {
  border-left-color: #a84e33;
}

.firmware-lab-tests span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.firmware-lab-tests p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.firmware-pin-assertions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.firmware-state-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.firmware-state-timeline span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: #10222b;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.firmware-state-timeline b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: #008f9f;
  color: #fff;
  font-size: 10px;
}

@media (max-width: 760px) {
  .firmware-lab-head,
  .firmware-lab-summary,
  .firmware-lab-tests,
  .firmware-pin-assertions {
    grid-template-columns: 1fr;
  }
}

.plc-code {
  border: 1px solid #1a4652;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

@media (max-width: 1180px) {
  .tinker-grid,
  .plc-grid {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .studio-layout {
    padding: 10px;
  }

  .machine-revenue,
  .plc-revenue {
    grid-template-columns: 1fr;
  }

  .tinker-stage svg {
    min-height: 250px;
  }

  .machine-module-grid article div {
    display: grid;
  }
}


.circuit-studio {
  scroll-margin-top: 96px;
}
.circuit-studio-nav{position:sticky;top:82px;z-index:8;display:flex;flex-wrap:wrap;gap:8px;padding:10px 0;background:linear-gradient(180deg,#fff 78%,transparent);scroll-margin-top:110px}.circuit-studio-nav a{display:inline-flex;align-items:center;min-height:34px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--deep);font-size:11px;font-weight:850;text-decoration:none}.circuit-studio-nav a:hover,.circuit-studio-nav a:focus-visible{border-color:var(--teal);color:var(--teal);outline:none}@media(max-width:760px){.circuit-studio-nav{position:static;overflow-x:auto;flex-wrap:nowrap;padding:8px 0}.circuit-studio-nav a{white-space:nowrap}}










.pcb-order-router {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.pcb-order-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.pcb-order-head h3,
.pcb-order-head p { margin: 0; }

.pcb-order-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.pcb-order-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.pcb-order-controls,
.pcb-order-summary,
.pcb-order-files,
.pcb-order-gates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pcb-order-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.pcb-order-controls input,
.pcb-order-controls select {
  min-height: 38px;
  border: 1px solid #d8e1e5;
  padding: 8px;
  font: inherit;
}

.pcb-order-summary div,
.pcb-order-files article,
.pcb-order-gates article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.pcb-order-files article,
.pcb-order-gates article { border-left: 4px solid #008f9f; }
.pcb-order-files article[data-status="blocked"],
.pcb-order-gates article[data-status="blocked"] { border-left-color: #a84e33; }
.pcb-order-files article[data-status="warn"],
.pcb-order-gates article[data-status="warn"] { border-left-color: #c8871f; }

.pcb-order-summary span,
.pcb-order-summary strong,
.pcb-order-summary small,
.pcb-order-files span,
.pcb-order-files strong,
.pcb-order-files p,
.pcb-order-gates span,
.pcb-order-gates strong,
.pcb-order-gates p {
  display: block;
  overflow-wrap: anywhere;
}

.pcb-order-summary span,
.pcb-order-summary small,
.pcb-order-files p,
.pcb-order-gates p {
  color: var(--muted);
  font-size: 12px;
}

.pcb-order-files span,
.pcb-order-gates span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.pcb-order-payload {
  max-height: 280px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  background: #10222b;
  color: #d9e9ed;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .pcb-order-head,
  .pcb-order-controls,
  .pcb-order-summary,
  .pcb-order-files,
  .pcb-order-gates { grid-template-columns: 1fr; }
}


.wiring-harness-designer {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.wiring-harness-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.wiring-harness-head h3,
.wiring-harness-head p {
  margin: 0;
}

.wiring-harness-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.wiring-harness-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.wiring-harness-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.wiring-harness-stage svg {
  display: block;
  width: 100%;
  min-height: 300px;
}

.wiring-harness-summary,
.wiring-cable-table,
.wiring-connector-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.wiring-harness-summary div,
.wiring-cable-table div,
.wiring-connector-map article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.wiring-harness-summary span,
.wiring-harness-summary strong,
.wiring-cable-table strong,
.wiring-cable-table span,
.wiring-cable-table small,
.wiring-connector-map span,
.wiring-connector-map strong,
.wiring-connector-map p {
  display: block;
  overflow-wrap: anywhere;
}

.wiring-harness-summary span,
.wiring-cable-table span,
.wiring-cable-table small,
.wiring-connector-map p {
  color: var(--muted);
  font-size: 12px;
}

.wiring-connector-map span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 960px) {
  .wiring-harness-head,
  .wiring-harness-summary,
  .wiring-cable-table,
  .wiring-connector-map {
    grid-template-columns: 1fr;
  }
}

.pcb-api-console {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.pcb-api-console-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.pcb-api-console-head h3,
.pcb-api-console-head p {
  margin: 0;
}

.pcb-api-console-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.pcb-api-console-head strong {
  padding: 7px 9px;
  background: #a84e33;
  color: #fff;
  font-size: 12px;
}

.pcb-api-console-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pcb-api-console-summary div {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.pcb-api-console-summary span,
.pcb-api-console-summary strong {
  display: block;
  overflow-wrap: anywhere;
}

.pcb-api-console-summary span {
  color: var(--muted);
  font-size: 11px;
}

.pcb-api-readiness-gates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pcb-api-readiness-gates article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border-left: 4px solid #008f9f;
}

.pcb-api-readiness-gates article[data-status="blocked"] {
  border-left-color: #a84e33;
}

.pcb-api-readiness-gates span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.pcb-api-readiness-gates p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.pcb-api-payload-preview {
  max-height: 320px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  background: #10222b;
  color: #d9e9ed;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .pcb-api-console-head,
  .pcb-api-console-summary,
  .pcb-api-readiness-gates {
    grid-template-columns: 1fr;
  }
}

.pcb-trace-router {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.pcb-trace-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.pcb-trace-head h3,
.pcb-trace-head p {
  margin: 0;
}

.pcb-trace-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.pcb-trace-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.pcb-trace-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.pcb-trace-stage svg {
  display: block;
  width: 100%;
  min-height: 300px;
}

.pcb-trace-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pcb-trace-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
  color: var(--deep);
  font-size: 12px;
  font-weight: 850;
}

.pcb-trace-legend i {
  width: 18px;
  height: 6px;
  display: inline-block;
}

.pcb-trace-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pcb-trace-table div {
  min-width: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.pcb-trace-table strong,
.pcb-trace-table span,
.pcb-trace-table small {
  display: block;
  overflow-wrap: anywhere;
}

.pcb-trace-table span,
.pcb-trace-table small {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 760px) {
  .pcb-trace-head,
  .pcb-trace-table {
    grid-template-columns: 1fr;
  }
}

.module-marketplace-bom {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.module-marketplace-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.module-marketplace-head h3,
.module-marketplace-bom h4 {
  margin: 0;
  color: var(--deep);
}

.module-marketplace-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.module-marketplace-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.module-bom-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.module-bom-summary div {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.module-bom-summary span,
.module-bom-summary small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.module-bom-summary strong {
  display: block;
  margin: 3px 0;
  overflow-wrap: anywhere;
}

.module-marketplace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.module-marketplace-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.module-marketplace-card span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.module-marketplace-card small,
.module-marketplace-card em,
.module-marketplace-card p {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  overflow-wrap: anywhere;
}

.module-marketplace-card div {
  display: grid;
  gap: 2px;
  padding: 7px;
  background: #eef5f7;
}

.module-fabrication-nets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.module-fabrication-nets div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  background: #10222b;
  color: #fff;
}

.module-fabrication-nets span,
.module-fabrication-nets small {
  color: #d9e9ed;
  font-size: 12px;
  overflow-wrap: anywhere;
}

@media (max-width: 960px) {
  .module-marketplace-head,
  .module-bom-summary,
  .module-marketplace-grid,
  .module-fabrication-nets {
    grid-template-columns: 1fr;
  }

  .module-marketplace-head strong {
    white-space: normal;
  }
}

.circuit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr);
  grid-template-areas:
    "circuit output"
    "pcb output"
    "footprint output"
    "smt output"
    "dfm output"
    "jig output"
    "burnin output"
    "traveler output"
    "quote output"
    "po output"
    "handover output"
    "servicecontract output"
    "fleet output"
    "telemetrycash output"
    "breadboard output";
  gap: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.circuit-board,
.circuit-output {
  background: #f8fcfd;
  border: 1px solid #d7e6ea;
  border-radius: 8px;
  padding: 12px;
  min-width: 0;
}

.circuit-board:first-child { grid-area: circuit; }
.circuit-board:nth-child(2) { grid-area: pcb; }
.pcb-footprint-inspector { grid-area: footprint; }
.smt-assembly-exporter { grid-area: smt; }
.pcb-dfm-rule-checker { grid-area: dfm; }
.programming-jig-planner { grid-area: jig; }
.burn-in-qa-tracker { grid-area: burnin; }
.machine-assembly-traveler { grid-area: traveler; }
.factory-quote-pack { grid-area: quote; }
.production-order-pack { grid-area: po; }
.commissioning-handover-pack { grid-area: handover; }
.service-contract-uptime-pack { grid-area: servicecontract; }
.fleet-dispatch-scheduler {
  display: grid; gap: 12px; background: #f7fbfb;
}
.fleet-dispatch-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.fleet-dispatch-head h3, .fleet-dispatch-head p { margin: 0; }
.fleet-dispatch-head p { color: #547078; margin-top: 4px; }
.fleet-dispatch-head strong { color: #008f9f; white-space: nowrap; }
.fleet-dispatch-controls, .dispatch-scheduler-summary, .dispatch-route-rows, .dispatch-capacity-gates { display: grid; gap: 10px; }
.fleet-dispatch-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fleet-dispatch-controls label { display: grid; gap: 5px; color: #547078; font-size: .78rem; }
.fleet-dispatch-controls input, .fleet-dispatch-controls select { width: 100%; border: 1px solid #bfd8dd; border-radius: 6px; padding: 8px; background: #fff; }
.dispatch-scheduler-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dispatch-scheduler-summary div { background: #eaf7f8; border: 1px solid #c8e6e8; border-radius: 7px; padding: 10px; }
.dispatch-scheduler-summary span, .dispatch-route-rows span, .dispatch-route-rows small, .dispatch-capacity-gates span { display: block; color: #547078; font-size: .74rem; }
.dispatch-scheduler-summary strong { display: block; color: #073b4c; font-size: 1.1rem; margin-top: 3px; }
.dispatch-route-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dispatch-route-rows article, .dispatch-capacity-gates article { border: 1px solid #d7e6ea; border-radius: 7px; padding: 10px; background: #fff; }
.dispatch-route-rows article[data-status="urgent"], .dispatch-capacity-gates article[data-status="warn"] { border-color: #e5b9a8; background: #fff8f5; }
.dispatch-route-rows strong, .dispatch-capacity-gates strong { display: block; color: #073b4c; margin-top: 4px; }
.dispatch-route-rows p, .dispatch-capacity-gates p { color: #547078; font-size: .82rem; margin: 6px 0 0; }
.dispatch-capacity-gates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dispatch-capacity-gates article[data-status="pass"] span { color: #16805c; }
.empty-state { color: #547078; }
@media (max-width: 760px) { .fleet-dispatch-controls, .dispatch-scheduler-summary, .dispatch-route-rows, .dispatch-capacity-gates { grid-template-columns: 1fr; } .fleet-dispatch-head { display: grid; } }

.fleet-rollout-revenue-pack { grid-area: fleet; }
.fleet-telemetry-cash-pack { grid-area: telemetrycash; }
.fleet-dispatch-scheduler { grid-area: dispatchscheduler; }
.factory-quote-pack {
  display: grid;
  gap: 12px;
  background: #f7fbfb;
}

.quote-pack-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.quote-pack-head h3,
.quote-pack-head p {
  margin: 0;
}

.quote-pack-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.quote-pack-head strong {
  padding: 7px 9px;
  background: #12312f;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.quote-pack-controls,
.quote-pack-summary,
.quote-pack-cost-rows,
.quote-pack-payment-plan,
.quote-pack-sales-hooks {
  display: grid;
  gap: 8px;
}

.quote-pack-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quote-pack-controls label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.quote-pack-controls input {
  min-height: 38px;
  border: 1px solid #d7e6ea;
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.quote-pack-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quote-pack-cost-rows,
.quote-pack-payment-plan,
.quote-pack-sales-hooks {
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}

.quote-pack-summary div,
.quote-pack-cost-rows article,
.quote-pack-payment-plan article,
.quote-pack-sales-hooks article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid #26765c;
  border-radius: 5px;
}

.quote-pack-sales-hooks article[data-status="warn"] {
  border-left-color: #c8871f;
}

.quote-pack-summary span,
.quote-pack-cost-rows span,
.quote-pack-cost-rows p,
.quote-pack-payment-plan span,
.quote-pack-payment-plan p,
.quote-pack-sales-hooks span {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.quote-pack-summary strong,
.quote-pack-cost-rows strong,
.quote-pack-payment-plan strong,
.quote-pack-sales-hooks strong {
  color: var(--deep);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .quote-pack-head,
  .quote-pack-controls,
  .quote-pack-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .quote-pack-head strong {
    white-space: normal;
  }
}

.production-order-pack {
  display: grid;
  gap: 12px;
  background: #f8fcfd;
}

.po-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.po-head h3,
.po-head p {
  margin: 0;
}

.po-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.po-head strong {
  padding: 7px 9px;
  background: #162832;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.po-controls,
.po-summary,
.po-work-orders,
.po-procurement-rows,
.po-risk-gates {
  display: grid;
  gap: 8px;
}

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

.po-controls label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.po-controls input,
.po-controls select {
  min-height: 38px;
  border: 1px solid #d7e6ea;
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.po-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.po-work-orders,
.po-procurement-rows,
.po-risk-gates {
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}

.po-summary div,
.po-work-orders article,
.po-procurement-rows article,
.po-risk-gates article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 5px;
}

.po-risk-gates article[data-status="warn"] {
  border-left-color: #c8871f;
}

.po-risk-gates article[data-status="fail"] {
  border-left-color: #a84e33;
}

.po-summary span,
.po-work-orders span,
.po-work-orders p,
.po-work-orders small,
.po-procurement-rows span,
.po-procurement-rows p,
.po-procurement-rows small,
.po-risk-gates span,
.po-risk-gates p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.po-summary strong,
.po-work-orders strong,
.po-procurement-rows strong,
.po-risk-gates strong {
  color: var(--deep);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .po-head,
  .po-controls,
  .po-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .po-head strong {
    white-space: normal;
  }
}

.commissioning-handover-pack {
  display: grid;
  gap: 12px;
  background: #f7fbfb;
}

.handover-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.handover-head h3,
.handover-head p {
  margin: 0;
}

.handover-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.handover-head strong {
  padding: 7px 9px;
  background: #12312f;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.handover-controls,
.handover-summary,
.handover-checklist,
.handover-training-rows,
.handover-signoff-gates {
  display: grid;
  gap: 8px;
}

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

.handover-controls label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.handover-controls input,
.handover-controls select {
  min-height: 38px;
  border: 1px solid #d7e6ea;
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.handover-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.handover-checklist,
.handover-training-rows,
.handover-signoff-gates {
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}

.handover-summary div,
.handover-checklist article,
.handover-training-rows article,
.handover-signoff-gates article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid #26765c;
  border-radius: 5px;
}

.handover-checklist article[data-status="warn"],
.handover-signoff-gates article[data-status="warn"] {
  border-left-color: #c8871f;
}

.handover-checklist article[data-status="fail"],
.handover-signoff-gates article[data-status="fail"] {
  border-left-color: #a84e33;
}

.handover-summary span,
.handover-checklist span,
.handover-checklist p,
.handover-training-rows span,
.handover-training-rows p,
.handover-training-rows small,
.handover-signoff-gates span,
.handover-signoff-gates p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.handover-summary strong,
.handover-checklist strong,
.handover-training-rows strong,
.handover-signoff-gates strong {
  color: var(--deep);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .handover-head,
  .handover-controls,
  .handover-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .handover-head strong {
    white-space: normal;
  }
}

.service-contract-uptime-pack {
  display: grid;
  gap: 12px;
  background: #f8fcfd;
}

.service-contract-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.service-contract-head h3,
.service-contract-head p {
  margin: 0;
}

.service-contract-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.service-contract-head strong {
  padding: 7px 9px;
  background: #162832;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.service-contract-controls,
.service-contract-summary,
.service-contract-visit-plan,
.service-contract-spares-reserve,
.service-contract-sla-gates {
  display: grid;
  gap: 8px;
}

.service-contract-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-contract-controls label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.service-contract-controls input,
.service-contract-controls select {
  min-height: 38px;
  border: 1px solid #d7e6ea;
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.service-contract-controls .check {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  min-height: 38px;
}

.service-contract-controls .check input {
  min-height: 0;
  accent-color: var(--teal);
}

.service-contract-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-contract-visit-plan,
.service-contract-spares-reserve,
.service-contract-sla-gates {
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}

.service-contract-summary div,
.service-contract-visit-plan article,
.service-contract-spares-reserve article,
.service-contract-sla-gates article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 5px;
}

.service-contract-sla-gates article[data-status="warn"] {
  border-left-color: #c8871f;
}

.service-contract-sla-gates article[data-status="fail"] {
  border-left-color: #a84e33;
}

.service-contract-summary span,
.service-contract-visit-plan span,
.service-contract-visit-plan p,
.service-contract-visit-plan small,
.service-contract-spares-reserve span,
.service-contract-spares-reserve p,
.service-contract-spares-reserve small,
.service-contract-sla-gates span,
.service-contract-sla-gates p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.service-contract-summary strong,
.service-contract-visit-plan strong,
.service-contract-spares-reserve strong,
.service-contract-sla-gates strong {
  color: var(--deep);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .service-contract-head,
  .service-contract-controls,
  .service-contract-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .service-contract-head strong {
    white-space: normal;
  }
}

.fleet-rollout-revenue-pack {
  display: grid;
  gap: 12px;
  background: #f7fbfb;
}

.fleet-rollout-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.fleet-rollout-head h3,
.fleet-rollout-head p {
  margin: 0;
}

.fleet-rollout-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.fleet-rollout-head strong {
  padding: 7px 9px;
  background: #12312f;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.fleet-rollout-controls,
.fleet-rollout-summary,
.fleet-site-rows,
.fleet-revenue-rows,
.fleet-ops-gates {
  display: grid;
  gap: 8px;
}

.fleet-rollout-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fleet-rollout-controls label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.fleet-rollout-controls input,
.fleet-rollout-controls select {
  min-height: 38px;
  border: 1px solid #d7e6ea;
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.fleet-rollout-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fleet-site-rows,
.fleet-revenue-rows,
.fleet-ops-gates {
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}

.fleet-rollout-summary div,
.fleet-site-rows article,
.fleet-revenue-rows article,
.fleet-ops-gates article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid #26765c;
  border-radius: 5px;
}

.fleet-ops-gates article[data-status="warn"] {
  border-left-color: #c8871f;
}

.fleet-ops-gates article[data-status="fail"] {
  border-left-color: #a84e33;
}

.fleet-rollout-summary span,
.fleet-site-rows span,
.fleet-site-rows p,
.fleet-site-rows small,
.fleet-revenue-rows span,
.fleet-revenue-rows p,
.fleet-ops-gates span,
.fleet-ops-gates p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.fleet-rollout-summary strong,
.fleet-site-rows strong,
.fleet-revenue-rows strong,
.fleet-ops-gates strong {
  color: var(--deep);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .fleet-rollout-head,
  .fleet-rollout-controls,
  .fleet-rollout-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .fleet-rollout-head strong {
    white-space: normal;
  }
}

.fleet-telemetry-cash-pack {
  display: grid;
  gap: 12px;
  background: #f8fcfd;
}

.fleet-telemetry-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.fleet-telemetry-head h3,
.fleet-telemetry-head p {
  margin: 0;
}

.fleet-telemetry-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.fleet-telemetry-head strong {
  padding: 7px 9px;
  background: #162832;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.fleet-telemetry-controls,
.fleet-telemetry-summary,
.fleet-telemetry-rows,
.fleet-cash-rows,
.fleet-dispatch-gates {
  display: grid;
  gap: 8px;
}

.fleet-telemetry-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fleet-telemetry-controls label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.fleet-telemetry-controls input {
  min-height: 38px;
  border: 1px solid #d7e6ea;
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.fleet-telemetry-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fleet-telemetry-rows,
.fleet-cash-rows,
.fleet-dispatch-gates {
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}

.fleet-telemetry-summary div,
.fleet-telemetry-rows article,
.fleet-cash-rows article,
.fleet-dispatch-gates article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 5px;
}

.fleet-telemetry-rows article[data-status="refill"],
.fleet-dispatch-gates article[data-status="warn"] {
  border-left-color: #c8871f;
}

.fleet-telemetry-rows article[data-status="signal"],
.fleet-dispatch-gates article[data-status="fail"] {
  border-left-color: #a84e33;
}

.fleet-telemetry-summary span,
.fleet-telemetry-rows span,
.fleet-telemetry-rows p,
.fleet-telemetry-rows small,
.fleet-cash-rows span,
.fleet-cash-rows p,
.fleet-dispatch-gates span,
.fleet-dispatch-gates p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.fleet-telemetry-summary strong,
.fleet-telemetry-rows strong,
.fleet-cash-rows strong,
.fleet-dispatch-gates strong {
  color: var(--deep);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .fleet-telemetry-head,
  .fleet-telemetry-controls,
  .fleet-telemetry-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .fleet-telemetry-head strong {
    white-space: normal;
  }
}

.breadboard-assembly-bench { grid-area: breadboard; }
.circuit-output { grid-area: output; display: grid; gap: 14px; align-content: start; }

.circuit-board h3,
.circuit-output h3 {
  margin: 0 0 10px;
  color: var(--deep);
}

.circuit-board svg {
  display: block;
  width: 100%;
  aspect-ratio: 980 / 520;
  min-height: 300px;
}


.pcb-footprint-inspector {
  display: grid;
  gap: 12px;
}

.footprint-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.footprint-head h3,
.footprint-head p {
  margin: 0;
}

.footprint-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.footprint-head strong {
  padding: 7px 9px;
  background: #10222b;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.footprint-controls,
.footprint-placement-summary,
.footprint-placement-table,
.footprint-manufacturing-checks {
  display: grid;
  gap: 8px;
}

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

.footprint-controls label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.footprint-controls input,
.footprint-controls select {
  min-height: 38px;
  border: 1px solid #d7e6ea;
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.footprint-controls .check {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  min-height: 38px;
}

.footprint-controls .check input {
  min-height: 0;
  accent-color: var(--teal);
}

.footprint-stage {
  overflow: hidden;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-radius: 8px;
}

.footprint-stage svg {
  display: block;
  width: 100%;
  aspect-ratio: 980 / 560;
  min-height: 280px;
}

.footprint-placement-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.footprint-placement-table {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.footprint-placement-summary div,
.footprint-placement-table article,
.footprint-manufacturing-checks article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 5px;
}

.footprint-manufacturing-checks article[data-status="warn"] {
  border-left-color: #c8871f;
}

.footprint-placement-summary span,
.footprint-placement-table span,
.footprint-placement-table p,
.footprint-placement-table small,
.footprint-manufacturing-checks span,
.footprint-manufacturing-checks p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.footprint-placement-summary strong,
.footprint-placement-table strong,
.footprint-manufacturing-checks strong {
  color: var(--deep);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .footprint-head,
  .footprint-controls,
  .footprint-placement-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .footprint-head strong {
    white-space: normal;
  }
}


.smt-assembly-exporter {
  display: grid;
  gap: 12px;
}

.smt-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.smt-head h3,
.smt-head p {
  margin: 0;
}

.smt-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.smt-head strong {
  padding: 7px 9px;
  background: #10222b;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.smt-controls,
.smt-assembly-summary,
.smt-cpl-rows,
.smt-bom-rows,
.smt-assembly-checks {
  display: grid;
  gap: 8px;
}

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

.smt-controls label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.smt-controls input,
.smt-controls select {
  min-height: 38px;
  border: 1px solid #d7e6ea;
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.smt-controls .check {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  min-height: 38px;
}

.smt-controls .check input {
  min-height: 0;
  accent-color: var(--teal);
}

.smt-assembly-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.smt-cpl-rows,
.smt-bom-rows {
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.smt-assembly-summary div,
.smt-cpl-rows article,
.smt-bom-rows article,
.smt-assembly-checks article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 5px;
}

.smt-assembly-checks article[data-status="warn"] {
  border-left-color: #c8871f;
}

.smt-assembly-checks article[data-status="blocked"] {
  border-left-color: #a84e33;
}

.smt-assembly-summary span,
.smt-cpl-rows span,
.smt-cpl-rows p,
.smt-cpl-rows small,
.smt-bom-rows span,
.smt-bom-rows p,
.smt-bom-rows small,
.smt-assembly-checks span,
.smt-assembly-checks p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.smt-assembly-summary strong,
.smt-cpl-rows strong,
.smt-bom-rows strong,
.smt-assembly-checks strong {
  color: var(--deep);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .smt-head,
  .smt-controls,
  .smt-assembly-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .smt-head strong {
    white-space: normal;
  }
}


.pcb-dfm-rule-checker {
  display: grid;
  gap: 12px;
}

.dfm-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.dfm-head h3,
.dfm-head p {
  margin: 0;
}

.dfm-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.dfm-head strong {
  padding: 7px 9px;
  background: #10222b;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.dfm-controls,
.dfm-rule-summary,
.dfm-rule-checks,
.dfm-risk-matrix,
.dfm-fix-list {
  display: grid;
  gap: 8px;
}

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

.dfm-controls label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.dfm-controls input,
.dfm-controls select {
  min-height: 38px;
  border: 1px solid #d7e6ea;
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.dfm-controls .check {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  min-height: 38px;
}

.dfm-controls .check input {
  min-height: 0;
  accent-color: var(--teal);
}

.dfm-rule-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dfm-rule-checks,
.dfm-risk-matrix,
.dfm-fix-list {
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}

.dfm-rule-summary div,
.dfm-rule-checks article,
.dfm-risk-matrix article,
.dfm-fix-list article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 5px;
}

.dfm-rule-checks article[data-status="warn"],
.dfm-risk-matrix article[data-risk="medium"] {
  border-left-color: #c8871f;
}

.dfm-rule-checks article[data-status="fail"],
.dfm-risk-matrix article[data-risk="high"] {
  border-left-color: #a84e33;
}

.dfm-rule-summary span,
.dfm-rule-checks span,
.dfm-rule-checks p,
.dfm-rule-checks small,
.dfm-risk-matrix span,
.dfm-risk-matrix p,
.dfm-fix-list p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.dfm-rule-summary strong,
.dfm-rule-checks strong,
.dfm-risk-matrix strong,
.dfm-fix-list strong {
  color: var(--deep);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .dfm-head,
  .dfm-controls,
  .dfm-rule-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .dfm-head strong {
    white-space: normal;
  }
}


.programming-jig-planner {
  display: grid;
  gap: 12px;
}

.jig-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.jig-head h3,
.jig-head p {
  margin: 0;
}

.jig-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.jig-head strong {
  padding: 7px 9px;
  background: #10222b;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.jig-controls,
.jig-plan-summary,
.jig-test-point-map,
.jig-fixture-steps,
.jig-acceptance-checks {
  display: grid;
  gap: 8px;
}

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

.jig-controls label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.jig-controls input,
.jig-controls select {
  min-height: 38px;
  border: 1px solid #d7e6ea;
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.jig-controls .check {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  min-height: 38px;
}

.jig-controls .check input {
  min-height: 0;
  accent-color: var(--teal);
}

.jig-plan-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jig-test-point-map,
.jig-fixture-steps,
.jig-acceptance-checks {
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.jig-plan-summary div,
.jig-test-point-map article,
.jig-fixture-steps article,
.jig-acceptance-checks article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 5px;
}

.jig-test-point-map article[data-required="false"],
.jig-acceptance-checks article[data-status="warn"] {
  border-left-color: #c8871f;
}

.jig-acceptance-checks article[data-status="fail"] {
  border-left-color: #a84e33;
}

.jig-fixture-steps article > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: #10222b;
  color: #fff;
  border-radius: 50%;
  font-weight: 900;
}

.jig-plan-summary span,
.jig-test-point-map span,
.jig-test-point-map p,
.jig-fixture-steps p,
.jig-acceptance-checks span,
.jig-acceptance-checks p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.jig-plan-summary strong,
.jig-test-point-map strong,
.jig-fixture-steps strong,
.jig-acceptance-checks strong {
  color: var(--deep);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .jig-head,
  .jig-controls,
  .jig-plan-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .jig-head strong {
    white-space: normal;
  }
}


.burn-in-qa-tracker {
  display: grid;
  gap: 12px;
}

.burn-in-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.burn-in-head h3,
.burn-in-head p {
  margin: 0;
}

.burn-in-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.burn-in-head strong {
  padding: 7px 9px;
  background: #10222b;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.burn-in-controls,
.burn-in-qa-summary,
.burn-in-board-rows,
.burn-in-fault-counters,
.burn-in-release-gates {
  display: grid;
  gap: 8px;
}

.burn-in-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.burn-in-controls label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.burn-in-controls input,
.burn-in-controls select {
  min-height: 38px;
  border: 1px solid #d7e6ea;
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.burn-in-qa-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.burn-in-board-rows,
.burn-in-fault-counters,
.burn-in-release-gates {
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.burn-in-qa-summary div,
.burn-in-board-rows article,
.burn-in-fault-counters article,
.burn-in-release-gates article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 5px;
}

.burn-in-board-rows article[data-status="hold"],
.burn-in-release-gates article[data-status="warn"] {
  border-left-color: #c8871f;
}

.burn-in-release-gates article[data-status="fail"] {
  border-left-color: #a84e33;
}

.burn-in-qa-summary span,
.burn-in-board-rows span,
.burn-in-board-rows p,
.burn-in-board-rows small,
.burn-in-fault-counters span,
.burn-in-fault-counters p,
.burn-in-release-gates span,
.burn-in-release-gates p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.burn-in-qa-summary strong,
.burn-in-board-rows strong,
.burn-in-fault-counters strong,
.burn-in-release-gates strong {
  color: var(--deep);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .burn-in-head,
  .burn-in-controls,
  .burn-in-qa-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .burn-in-head strong {
    white-space: normal;
  }
}


.machine-assembly-traveler {
  display: grid;
  gap: 12px;
}

.traveler-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.traveler-head h3,
.traveler-head p {
  margin: 0;
}

.traveler-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.traveler-head strong {
  padding: 7px 9px;
  background: #10222b;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.traveler-controls,
.traveler-summary,
.traveler-station-rows,
.traveler-kitting-list,
.traveler-release-checks {
  display: grid;
  gap: 8px;
}

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

.traveler-controls label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.traveler-controls input,
.traveler-controls select {
  min-height: 38px;
  border: 1px solid #d7e6ea;
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.traveler-controls .check {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  min-height: 38px;
}

.traveler-controls .check input {
  min-height: 0;
  accent-color: var(--teal);
}

.traveler-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.traveler-station-rows,
.traveler-kitting-list,
.traveler-release-checks {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.traveler-summary div,
.traveler-station-rows article,
.traveler-kitting-list article,
.traveler-release-checks article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 5px;
}

.traveler-release-checks article[data-status="warn"] {
  border-left-color: #c8871f;
}

.traveler-release-checks article[data-status="fail"] {
  border-left-color: #a84e33;
}

.traveler-summary span,
.traveler-station-rows span,
.traveler-station-rows p,
.traveler-station-rows small,
.traveler-kitting-list span,
.traveler-kitting-list p,
.traveler-release-checks span,
.traveler-release-checks p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.traveler-summary strong,
.traveler-station-rows strong,
.traveler-kitting-list strong,
.traveler-release-checks strong {
  color: var(--deep);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .traveler-head,
  .traveler-controls,
  .traveler-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .traveler-head strong {
    white-space: normal;
  }
}

.breadboard-assembly-bench {
  display: grid;
  gap: 12px;
}

.breadboard-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.breadboard-head h3,
.breadboard-head p {
  margin: 0;
}

.breadboard-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.breadboard-head strong {
  padding: 7px 9px;
  background: #10222b;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.breadboard-controls,
.breadboard-assembly-summary,
.breadboard-jumper-table,
.breadboard-hazard-checks {
  display: grid;
  gap: 8px;
}

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

.breadboard-controls label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.breadboard-controls input,
.breadboard-controls select {
  min-height: 38px;
  border: 1px solid #d7e6ea;
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.breadboard-stage {
  overflow: hidden;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-radius: 8px;
}

.breadboard-stage svg {
  display: block;
  width: 100%;
  aspect-ratio: 980 / 560;
  min-height: 280px;
}

.breadboard-assembly-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.breadboard-jumper-table {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.breadboard-assembly-summary div,
.breadboard-jumper-table article,
.breadboard-hazard-checks article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 5px;
}

.breadboard-hazard-checks article[data-status="warn"] {
  border-left-color: #c8871f;
}

.breadboard-hazard-checks article[data-status="blocked"] {
  border-left-color: #a84e33;
}

.breadboard-assembly-summary span,
.breadboard-jumper-table span,
.breadboard-jumper-table p,
.breadboard-jumper-table small,
.breadboard-hazard-checks span,
.breadboard-hazard-checks p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.breadboard-assembly-summary strong,
.breadboard-jumper-table strong,
.breadboard-hazard-checks strong {
  color: var(--deep);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .breadboard-head,
  .breadboard-controls,
  .breadboard-assembly-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .breadboard-head strong {
    white-space: normal;
  }
}


.circuit-netlist,
.pcb-api-targets {
  display: grid;
  gap: 8px;
}

.circuit-netlist div,
.pcb-api-targets article {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 5px;
}

.circuit-netlist strong,
.pcb-api-targets strong {
  color: var(--deep);
}

.circuit-netlist span,
.pcb-api-targets p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 980px) {
  








}

.pcb-order-router {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.pcb-order-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.pcb-order-head h3,
.pcb-order-head p { margin: 0; }

.pcb-order-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.pcb-order-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.pcb-order-controls,
.pcb-order-summary,
.pcb-order-files,
.pcb-order-gates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pcb-order-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.pcb-order-controls input,
.pcb-order-controls select {
  min-height: 38px;
  border: 1px solid #d8e1e5;
  padding: 8px;
  font: inherit;
}

.pcb-order-summary div,
.pcb-order-files article,
.pcb-order-gates article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.pcb-order-files article,
.pcb-order-gates article { border-left: 4px solid #008f9f; }
.pcb-order-files article[data-status="blocked"],
.pcb-order-gates article[data-status="blocked"] { border-left-color: #a84e33; }
.pcb-order-files article[data-status="warn"],
.pcb-order-gates article[data-status="warn"] { border-left-color: #c8871f; }

.pcb-order-summary span,
.pcb-order-summary strong,
.pcb-order-summary small,
.pcb-order-files span,
.pcb-order-files strong,
.pcb-order-files p,
.pcb-order-gates span,
.pcb-order-gates strong,
.pcb-order-gates p {
  display: block;
  overflow-wrap: anywhere;
}

.pcb-order-summary span,
.pcb-order-summary small,
.pcb-order-files p,
.pcb-order-gates p {
  color: var(--muted);
  font-size: 12px;
}

.pcb-order-files span,
.pcb-order-gates span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.pcb-order-payload {
  max-height: 280px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  background: #10222b;
  color: #d9e9ed;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .pcb-order-head,
  .pcb-order-controls,
  .pcb-order-summary,
  .pcb-order-files,
  .pcb-order-gates { grid-template-columns: 1fr; }
}


.wiring-harness-designer {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.wiring-harness-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.wiring-harness-head h3,
.wiring-harness-head p {
  margin: 0;
}

.wiring-harness-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.wiring-harness-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.wiring-harness-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.wiring-harness-stage svg {
  display: block;
  width: 100%;
  min-height: 300px;
}

.wiring-harness-summary,
.wiring-cable-table,
.wiring-connector-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.wiring-harness-summary div,
.wiring-cable-table div,
.wiring-connector-map article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.wiring-harness-summary span,
.wiring-harness-summary strong,
.wiring-cable-table strong,
.wiring-cable-table span,
.wiring-cable-table small,
.wiring-connector-map span,
.wiring-connector-map strong,
.wiring-connector-map p {
  display: block;
  overflow-wrap: anywhere;
}

.wiring-harness-summary span,
.wiring-cable-table span,
.wiring-cable-table small,
.wiring-connector-map p {
  color: var(--muted);
  font-size: 12px;
}

.wiring-connector-map span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 960px) {
  .wiring-harness-head,
  .wiring-harness-summary,
  .wiring-cable-table,
  .wiring-connector-map {
    grid-template-columns: 1fr;
  }
}

.pcb-api-console {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.pcb-api-console-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.pcb-api-console-head h3,
.pcb-api-console-head p {
  margin: 0;
}

.pcb-api-console-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.pcb-api-console-head strong {
  padding: 7px 9px;
  background: #a84e33;
  color: #fff;
  font-size: 12px;
}

.pcb-api-console-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pcb-api-console-summary div {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.pcb-api-console-summary span,
.pcb-api-console-summary strong {
  display: block;
  overflow-wrap: anywhere;
}

.pcb-api-console-summary span {
  color: var(--muted);
  font-size: 11px;
}

.pcb-api-readiness-gates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pcb-api-readiness-gates article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border-left: 4px solid #008f9f;
}

.pcb-api-readiness-gates article[data-status="blocked"] {
  border-left-color: #a84e33;
}

.pcb-api-readiness-gates span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.pcb-api-readiness-gates p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.pcb-api-payload-preview {
  max-height: 320px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  background: #10222b;
  color: #d9e9ed;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .pcb-api-console-head,
  .pcb-api-console-summary,
  .pcb-api-readiness-gates {
    grid-template-columns: 1fr;
  }
}

.pcb-trace-router {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.pcb-trace-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.pcb-trace-head h3,
.pcb-trace-head p {
  margin: 0;
}

.pcb-trace-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.pcb-trace-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.pcb-trace-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.pcb-trace-stage svg {
  display: block;
  width: 100%;
  min-height: 300px;
}

.pcb-trace-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pcb-trace-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
  color: var(--deep);
  font-size: 12px;
  font-weight: 850;
}

.pcb-trace-legend i {
  width: 18px;
  height: 6px;
  display: inline-block;
}

.pcb-trace-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pcb-trace-table div {
  min-width: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.pcb-trace-table strong,
.pcb-trace-table span,
.pcb-trace-table small {
  display: block;
  overflow-wrap: anywhere;
}

.pcb-trace-table span,
.pcb-trace-table small {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 760px) {
  .pcb-trace-head,
  .pcb-trace-table {
    grid-template-columns: 1fr;
  }
}

.module-marketplace-bom {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.module-marketplace-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.module-marketplace-head h3,
.module-marketplace-bom h4 {
  margin: 0;
  color: var(--deep);
}

.module-marketplace-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.module-marketplace-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.module-bom-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.module-bom-summary div {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.module-bom-summary span,
.module-bom-summary small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.module-bom-summary strong {
  display: block;
  margin: 3px 0;
  overflow-wrap: anywhere;
}

.module-marketplace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.module-marketplace-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.module-marketplace-card span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.module-marketplace-card small,
.module-marketplace-card em,
.module-marketplace-card p {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  overflow-wrap: anywhere;
}

.module-marketplace-card div {
  display: grid;
  gap: 2px;
  padding: 7px;
  background: #eef5f7;
}

.module-fabrication-nets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.module-fabrication-nets div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  background: #10222b;
  color: #fff;
}

.module-fabrication-nets span,
.module-fabrication-nets small {
  color: #d9e9ed;
  font-size: 12px;
  overflow-wrap: anywhere;
}

@media (max-width: 960px) {
  .module-marketplace-head,
  .module-bom-summary,
  .module-marketplace-grid,
  .module-fabrication-nets {
    grid-template-columns: 1fr;
  }

  .module-marketplace-head strong {
    white-space: normal;
  }
}

@media (max-width: 960px) {
.circuit-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "circuit"
      "pcb"
      "footprint"
      "smt"
      "dfm"
      "jig"
      "burnin"
      "traveler"
      "quote"
      "po"
      "handover"
      "servicecontract"
      "fleet"
      "telemetrycash"
      "breadboard"
      "output";
  }
}

  








.pcb-order-router {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.pcb-order-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.pcb-order-head h3,
.pcb-order-head p { margin: 0; }

.pcb-order-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.pcb-order-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.pcb-order-controls,
.pcb-order-summary,
.pcb-order-files,
.pcb-order-gates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pcb-order-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.pcb-order-controls input,
.pcb-order-controls select {
  min-height: 38px;
  border: 1px solid #d8e1e5;
  padding: 8px;
  font: inherit;
}

.pcb-order-summary div,
.pcb-order-files article,
.pcb-order-gates article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.pcb-order-files article,
.pcb-order-gates article { border-left: 4px solid #008f9f; }
.pcb-order-files article[data-status="blocked"],
.pcb-order-gates article[data-status="blocked"] { border-left-color: #a84e33; }
.pcb-order-files article[data-status="warn"],
.pcb-order-gates article[data-status="warn"] { border-left-color: #c8871f; }

.pcb-order-summary span,
.pcb-order-summary strong,
.pcb-order-summary small,
.pcb-order-files span,
.pcb-order-files strong,
.pcb-order-files p,
.pcb-order-gates span,
.pcb-order-gates strong,
.pcb-order-gates p {
  display: block;
  overflow-wrap: anywhere;
}

.pcb-order-summary span,
.pcb-order-summary small,
.pcb-order-files p,
.pcb-order-gates p {
  color: var(--muted);
  font-size: 12px;
}

.pcb-order-files span,
.pcb-order-gates span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.pcb-order-payload {
  max-height: 280px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  background: #10222b;
  color: #d9e9ed;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .pcb-order-head,
  .pcb-order-controls,
  .pcb-order-summary,
  .pcb-order-files,
  .pcb-order-gates { grid-template-columns: 1fr; }
}


.wiring-harness-designer {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.wiring-harness-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.wiring-harness-head h3,
.wiring-harness-head p {
  margin: 0;
}

.wiring-harness-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.wiring-harness-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.wiring-harness-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.wiring-harness-stage svg {
  display: block;
  width: 100%;
  min-height: 300px;
}

.wiring-harness-summary,
.wiring-cable-table,
.wiring-connector-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.wiring-harness-summary div,
.wiring-cable-table div,
.wiring-connector-map article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.wiring-harness-summary span,
.wiring-harness-summary strong,
.wiring-cable-table strong,
.wiring-cable-table span,
.wiring-cable-table small,
.wiring-connector-map span,
.wiring-connector-map strong,
.wiring-connector-map p {
  display: block;
  overflow-wrap: anywhere;
}

.wiring-harness-summary span,
.wiring-cable-table span,
.wiring-cable-table small,
.wiring-connector-map p {
  color: var(--muted);
  font-size: 12px;
}

.wiring-connector-map span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 960px) {
  .wiring-harness-head,
  .wiring-harness-summary,
  .wiring-cable-table,
  .wiring-connector-map {
    grid-template-columns: 1fr;
  }
}

.pcb-api-console {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.pcb-api-console-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.pcb-api-console-head h3,
.pcb-api-console-head p {
  margin: 0;
}

.pcb-api-console-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.pcb-api-console-head strong {
  padding: 7px 9px;
  background: #a84e33;
  color: #fff;
  font-size: 12px;
}

.pcb-api-console-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pcb-api-console-summary div {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.pcb-api-console-summary span,
.pcb-api-console-summary strong {
  display: block;
  overflow-wrap: anywhere;
}

.pcb-api-console-summary span {
  color: var(--muted);
  font-size: 11px;
}

.pcb-api-readiness-gates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pcb-api-readiness-gates article {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border-left: 4px solid #008f9f;
}

.pcb-api-readiness-gates article[data-status="blocked"] {
  border-left-color: #a84e33;
}

.pcb-api-readiness-gates span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.pcb-api-readiness-gates p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.pcb-api-payload-preview {
  max-height: 320px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  background: #10222b;
  color: #d9e9ed;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .pcb-api-console-head,
  .pcb-api-console-summary,
  .pcb-api-readiness-gates {
    grid-template-columns: 1fr;
  }
}

.pcb-trace-router {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.pcb-trace-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.pcb-trace-head h3,
.pcb-trace-head p {
  margin: 0;
}

.pcb-trace-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.pcb-trace-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
}

.pcb-trace-stage {
  background: #fff;
  border: 1px solid #d8e1e5;
  overflow: hidden;
}

.pcb-trace-stage svg {
  display: block;
  width: 100%;
  min-height: 300px;
}

.pcb-trace-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pcb-trace-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
  color: var(--deep);
  font-size: 12px;
  font-weight: 850;
}

.pcb-trace-legend i {
  width: 18px;
  height: 6px;
  display: inline-block;
}

.pcb-trace-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pcb-trace-table div {
  min-width: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.pcb-trace-table strong,
.pcb-trace-table span,
.pcb-trace-table small {
  display: block;
  overflow-wrap: anywhere;
}

.pcb-trace-table span,
.pcb-trace-table small {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 760px) {
  .pcb-trace-head,
  .pcb-trace-table {
    grid-template-columns: 1fr;
  }
}

.module-marketplace-bom {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fcfd;
  border: 1px solid #d8e1e5;
}

.module-marketplace-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.module-marketplace-head h3,
.module-marketplace-bom h4 {
  margin: 0;
  color: var(--deep);
}

.module-marketplace-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.module-marketplace-head strong {
  padding: 7px 9px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.module-bom-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.module-bom-summary div {
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.module-bom-summary span,
.module-bom-summary small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.module-bom-summary strong {
  display: block;
  margin: 3px 0;
  overflow-wrap: anywhere;
}

.module-marketplace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.module-marketplace-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #d8e1e5;
}

.module-marketplace-card span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.module-marketplace-card small,
.module-marketplace-card em,
.module-marketplace-card p {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  overflow-wrap: anywhere;
}

.module-marketplace-card div {
  display: grid;
  gap: 2px;
  padding: 7px;
  background: #eef5f7;
}

.module-fabrication-nets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.module-fabrication-nets div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  background: #10222b;
  color: #fff;
}

.module-fabrication-nets span,
.module-fabrication-nets small {
  color: #d9e9ed;
  font-size: 12px;
  overflow-wrap: anywhere;
}

@media (max-width: 960px) {
  .module-marketplace-head,
  .module-bom-summary,
  .module-marketplace-grid,
  .module-fabrication-nets {
    grid-template-columns: 1fr;
  }

  .module-marketplace-head strong {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .circuit-layout {
    padding: 10px;
  }

  .circuit-board svg {
    min-height: 230px;
  }
}


.circuit-sim-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #10222b;
  color: #fff;
  border-radius: 8px;
}

.circuit-sim-panel h3 {
  color: #fff;
  margin: 0;
}

.sim-controls {
  display: grid;
  gap: 8px;
}

.sim-controls label {
  display: grid;
  gap: 5px;
  color: #d9e9ed;
  font-size: 13px;
  font-weight: 800;
}

.sim-controls input {
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.1);
  color: #fff;
  padding: 8px;
  font: inherit;
}

.sim-controls .check {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  min-height: 36px;
}

.sim-controls .check input {
  min-height: 0;
  accent-color: #4fd1c5;
}

.sim-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sim-actions .button {
  min-height: 36px;
  padding: 7px 8px;
}

.sim-state-card {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: #fff;
  color: var(--deep);
  border-radius: 6px;
}

.sim-state-card strong {
  font-size: 19px;
}

.sim-state-card span,
.sim-state-card small {
  color: var(--muted);
}

.sim-log {
  display: grid;
  gap: 5px;
  max-height: 180px;
  overflow: auto;
}

.sim-log div {
  padding: 7px 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  color: #e9fbff;
  font-size: 12px;
  border-radius: 4px;
}

@media (max-width: 560px) {
  .sim-actions {
    grid-template-columns: 1fr;
  }
}


.circuit-export-actions {
  display: grid;
  gap: 8px;
}

.circuit-export-actions .button {
  width: 100%;
  justify-content: center;
}


.firmware-block-builder {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d7e6ea;
  border-radius: 8px;
}

.firmware-block-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
}

.firmware-block-head h4,
.firmware-block-head p {
  margin: 0;
}

.firmware-block-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.firmware-block-head strong {
  padding: 6px 8px;
  background: #10222b;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.firmware-block-controls,
.firmware-block-summary,
.firmware-block-stack,
.firmware-block-checklist {
  display: grid;
  gap: 8px;
}

.firmware-block-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.firmware-block-controls label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.firmware-block-controls input,
.firmware-block-controls select {
  min-height: 36px;
  border: 1px solid #d7e6ea;
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.firmware-block-controls .check {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  min-height: 36px;
}

.firmware-block-controls .check input {
  min-height: 0;
  accent-color: var(--teal);
}

.firmware-block-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.firmware-block-summary div,
.firmware-block-stack article,
.firmware-block-checklist article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 5px;
}

.firmware-block-checklist article[data-status="blocked"] {
  border-left-color: #a84e33;
}

.firmware-block-checklist article[data-status="warn"] {
  border-left-color: #c8871f;
}

.firmware-block-summary span,
.firmware-block-stack span,
.firmware-block-stack p,
.firmware-block-stack small,
.firmware-block-checklist span,
.firmware-block-checklist p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.firmware-block-summary strong,
.firmware-block-stack strong,
.firmware-block-checklist strong {
  color: var(--deep);
  overflow-wrap: anywhere;
}

.firmware-block-stack {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.firmware-block-sketch {
  max-height: 300px;
  overflow: auto;
  padding: 11px;
  background: #10222b;
  color: #e9fbff;
  border: 1px solid #10222b;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

@media (max-width: 720px) {
  .firmware-block-head,
  .firmware-block-controls,
  .firmware-block-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .firmware-block-head strong {
    white-space: normal;
  }
}


.pcb-quote-planner {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #fffaf0;
  border: 1px solid #ead7a8;
  border-radius: 8px;
}

.pcb-quote-controls,
.pcb-quote-summary {
  display: grid;
  gap: 8px;
}

.pcb-quote-controls label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.pcb-quote-controls input,
.pcb-quote-controls select {
  min-height: 36px;
  border: 1px solid #ead7a8;
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.pcb-quote-summary div,
.pcb-readiness article {
  display: grid;
  gap: 4px;
  padding: 9px;
  background: #fff;
  border: 1px solid #ead7a8;
  border-left: 5px solid var(--gold);
  border-radius: 5px;
}

.pcb-quote-summary span,
.pcb-quote-summary small,
.pcb-readiness p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.pcb-quote-summary strong,
.pcb-readiness strong {
  color: var(--deep);
}

.pcb-readiness {
  display: grid;
  gap: 8px;
}


.manufacturing-job-board {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d7e6ea;
  border-radius: 8px;
}

.manufacturing-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.manufacturing-job-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.manufacturing-job-summary div {
  display: grid;
  gap: 3px;
  padding: 9px;
  background: #10222b;
  color: #fff;
  border-radius: 5px;
}

.manufacturing-job-summary span {
  color: #9ee5df;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.manufacturing-job-summary strong {
  color: #fff;
}

.manufacturing-steps {
  display: grid;
  gap: 8px;
}

.manufacturing-steps article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  padding: 9px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-radius: 5px;
}

.manufacturing-steps article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--teal);
  color: #fff;
  border-radius: 50%;
  font-weight: 900;
}

.manufacturing-steps strong {
  color: var(--deep);
}

.manufacturing-steps small,
.manufacturing-steps p,
.manufacturing-steps em {
  display: block;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  font-style: normal;
}

.manufacturing-steps em {
  color: var(--alert);
  font-weight: 850;
}

@media (max-width: 560px) {
  .manufacturing-board-head,
  .manufacturing-job-summary {
    display: grid;
    grid-template-columns: 1fr;
  }
}


.bench-test-logger {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #f8fcfd;
  border: 1px solid #d7e6ea;
  border-radius: 8px;
}

.bench-test-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.bench-test-inputs,
.bench-test-summary,
.bench-test-grid {
  display: grid;
  gap: 8px;
}

.bench-test-inputs label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.bench-test-inputs input {
  min-height: 36px;
  border: 1px solid #d7e6ea;
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.bench-test-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bench-test-summary div,
.bench-test-grid article {
  display: grid;
  gap: 4px;
  padding: 9px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--green);
  border-radius: 5px;
}

.bench-test-summary span,
.bench-test-grid span,
.bench-test-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.bench-test-summary strong,
.bench-test-grid strong {
  color: var(--deep);
}

@media (max-width: 560px) {
  .bench-test-head,
  .bench-test-summary {
    display: grid;
    grid-template-columns: 1fr;
  }
}


.controller-commissioning {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-radius: 8px;
}

.commissioning-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.commissioning-inputs,
.commissioning-slot-grid,
.commissioning-acceptance {
  display: grid;
  gap: 8px;
}

.commissioning-inputs label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.commissioning-inputs input {
  min-height: 36px;
  border: 1px solid #d7e6ea;
  background: #f8fcfd;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.commissioning-slot-grid {
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
}

.commissioning-slot-grid article,
.commissioning-acceptance article {
  display: grid;
  gap: 4px;
  padding: 9px;
  background: #f8fcfd;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 5px;
}

.commissioning-slot-grid strong,
.commissioning-acceptance strong {
  color: var(--deep);
}

.commissioning-slot-grid span,
.commissioning-slot-grid small,
.commissioning-slot-grid em,
.commissioning-acceptance span,
.commissioning-acceptance p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  font-style: normal;
}

.commissioning-slot-grid em {
  color: var(--green);
  font-weight: 850;
}

@media (max-width: 560px) {
  .commissioning-head {
    display: grid;
  }
}


.remote-monitoring {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #10222b;
  color: #fff;
  border-radius: 8px;
}

.remote-monitoring-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.remote-monitoring h3 {
  color: #fff;
}

.remote-monitoring-inputs,
.remote-monitoring-summary,
.remote-alert-grid {
  display: grid;
  gap: 8px;
}

.remote-monitoring-inputs label {
  display: grid;
  gap: 5px;
  color: #d9e9ed;
  font-size: 13px;
  font-weight: 850;
}

.remote-monitoring-inputs input {
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.1);
  color: #fff;
  padding: 8px;
  font: inherit;
}

.remote-monitoring-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.remote-monitoring-summary div,
.remote-alert-grid article {
  display: grid;
  gap: 4px;
  padding: 9px;
  background: #fff;
  color: var(--deep);
  border-radius: 5px;
}

.remote-monitoring-summary span,
.remote-alert-grid span,
.remote-alert-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.remote-monitoring-summary strong,
.remote-alert-grid strong {
  color: var(--deep);
}

@media (max-width: 560px) {
  .remote-monitoring-head,
  .remote-monitoring-summary {
    display: grid;
    grid-template-columns: 1fr;
  }
}


.alert-service-ticket {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #fffaf0;
  border: 1px solid #ead7a8;
  border-radius: 8px;
}

.service-ticket-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.service-ticket-inputs,
.service-ticket-summary,
.service-ticket-actions {
  display: grid;
  gap: 8px;
}

.service-ticket-inputs label {
  display: grid;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.service-ticket-inputs input {
  min-height: 36px;
  border: 1px solid #ead7a8;
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.service-ticket-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-ticket-summary div,
.service-ticket-actions article {
  display: grid;
  gap: 4px;
  padding: 9px;
  background: #fff;
  border: 1px solid #ead7a8;
  border-left: 5px solid var(--alert);
  border-radius: 5px;
}

.service-ticket-summary span,
.service-ticket-actions span,
.service-ticket-actions p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.service-ticket-summary strong,
.service-ticket-actions strong {
  color: var(--deep);
}

@media (max-width: 560px) {
  .service-ticket-head,
  .service-ticket-summary {
    display: grid;
    grid-template-columns: 1fr;
  }
}


.automation-studio {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  display: grid;
  gap: 16px;
  padding: clamp(18px, 2.6vw, 28px);
  background: #10222b;
  color: #fff;
  border: 1px solid #10222b;
  box-shadow: var(--shadow);
}

.automation-studio-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
}

.automation-studio .eyebrow {
  color: #9ee5df;
}

.automation-studio h2 {
  max-width: 840px;
  margin: 0;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.04;
}

.automation-studio p {
  margin: 10px 0 0;
  color: #d9e9ed;
  line-height: 1.55;
}

.automation-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.automation-card-grid a {
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
}

.automation-card-grid span {
  width: fit-content;
  padding: 4px 7px;
  background: #4fd1c5;
  color: #10222b;
  font-size: 12px;
  font-weight: 900;
}

.automation-card-grid strong {
  font-size: 18px;
  line-height: 1.15;
}

.automation-card-grid p {
  margin: 0;
  color: #d9e9ed;
  font-size: 13px;
}

@media (max-width: 900px) {
  .automation-studio-head,
  .automation-card-grid {
    grid-template-columns: 1fr;
  }

  .automation-studio-head .button {
    width: 100%;
  }
}






.remote-command-center {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
}

.remote-command-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.remote-command-head h3,
.remote-command-head p {
  margin: 0;
}

.remote-command-head h3 { color: #fff; }

.remote-command-head p {
  margin-top: 5px;
  color: #d9e9ed;
  font-size: 13px;
  line-height: 1.45;
}

.remote-command-head strong {
  padding: 7px 9px;
  background: #fff;
  color: var(--deep);
  font-size: 12px;
}

.remote-command-controls,
.remote-command-summary,
.remote-command-queue,
.remote-command-gates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.remote-command-controls label {
  display: grid;
  gap: 5px;
  color: #d9e9ed;
  font-size: 12px;
  font-weight: 850;
}

.remote-command-controls input,
.remote-command-controls select {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.22);
  padding: 8px;
  font: inherit;
}

.remote-command-summary div,
.remote-command-queue article,
.remote-command-gates div {
  min-width: 0;
  padding: 10px;
  background: #fff;
  color: var(--deep);
}

.remote-command-summary span,
.remote-command-summary strong,
.remote-command-queue strong,
.remote-command-queue p,
.remote-command-gates span,
.remote-command-gates strong,
.remote-command-gates p {
  display: block;
  overflow-wrap: anywhere;
}

.remote-command-summary span,
.remote-command-queue p,
.remote-command-gates p {
  color: var(--muted);
  font-size: 12px;
}

.remote-command-gates span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.remote-command-gates div[data-status="blocked"] {
  border-left: 4px solid #a84e33;
}

.remote-command-gates div[data-status="ready"] {
  border-left: 4px solid #008f9f;
}

.remote-command-gates div[data-status="warn"] {
  border-left: 4px solid #c8871f;
}

@media (max-width: 760px) {
  .remote-command-head,
  .remote-command-controls,
  .remote-command-summary,
  .remote-command-queue,
  .remote-command-gates {
    grid-template-columns: 1fr;
  }
}



.controller-io-bench {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
}

.io-bench-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.io-bench-head h3,
.io-bench-head p { margin: 0; }

.io-bench-head h3 { color: #fff; }

.io-bench-head p {
  margin-top: 5px;
  color: #d9e9ed;
  font-size: 13px;
  line-height: 1.45;
}

.io-bench-head strong {
  padding: 7px 9px;
  background: #fff;
  color: var(--deep);
  font-size: 12px;
}

.io-bench-controls,
.io-bench-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.io-bench-controls label {
  display: grid;
  gap: 5px;
  color: #d9e9ed;
  font-size: 12px;
  font-weight: 850;
}

.io-bench-controls input,
.io-bench-controls select {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.22);
  padding: 8px;
  font: inherit;
}

.io-bench-summary div {
  min-width: 0;
  padding: 10px;
  background: #fff;
  color: var(--deep);
}

.io-bench-summary span,
.io-bench-summary strong {
  display: block;
  overflow-wrap: anywhere;
}

.io-bench-summary span {
  color: var(--muted);
  font-size: 12px;
}

.io-bench-pins {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.io-bench-pins article {
  min-width: 0;
  min-height: 124px;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 10px;
  background: #fff;
  color: var(--deep);
  border-top: 4px solid #c7d6d8;
}

.io-bench-pins article[data-active="yes"] { border-top-color: #20b6ad; }

.io-bench-pins span,
.io-bench-pins strong,
.io-bench-pins p,
.io-bench-pins small {
  display: block;
  overflow-wrap: anywhere;
}

.io-bench-pins span {
  width: fit-content;
  padding: 3px 6px;
  background: #10222b;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.io-bench-pins p,
.io-bench-pins small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.io-bench-scope {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.io-bench-scope div {
  min-width: 0;
  padding: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
}

.io-bench-scope span,
.io-bench-scope strong,
.io-bench-scope small {
  display: block;
  overflow-wrap: anywhere;
}

.io-bench-scope span,
.io-bench-scope small {
  color: #d9e9ed;
  font-size: 12px;
}

.io-bench-code {
  overflow: auto;
  max-height: 260px;
  margin: 0;
  padding: 12px;
  background: #071318;
  color: #e9fbfc;
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .io-bench-pins,
  .io-bench-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .io-bench-head,
  .io-bench-controls,
  .io-bench-summary,
  .io-bench-pins,
  .io-bench-scope { grid-template-columns: 1fr; }
}


.machine-digital-twin {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
}

.digital-twin-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.digital-twin-head h3,
.digital-twin-head p {
  margin: 0;
}

.digital-twin-head h3 {
  color: #fff;
}

.digital-twin-head p {
  margin-top: 5px;
  color: #d9e9ed;
  font-size: 13px;
  line-height: 1.45;
}

.digital-twin-head strong {
  padding: 7px 9px;
  background: #fff;
  color: var(--deep);
  font-size: 12px;
}

.digital-twin-controls,
.digital-twin-summary,
.digital-twin-state-grid,
.digital-twin-counters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.digital-twin-controls label {
  display: grid;
  gap: 5px;
  color: #d9e9ed;
  font-size: 12px;
  font-weight: 850;
}

.digital-twin-controls input,
.digital-twin-controls select {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.22);
  padding: 8px;
  font: inherit;
}

.digital-twin-summary div,
.digital-twin-state-grid article,
.digital-twin-counters div {
  min-width: 0;
  padding: 10px;
  background: #fff;
  color: var(--deep);
}

.digital-twin-summary span,
.digital-twin-summary strong,
.digital-twin-state-grid span,
.digital-twin-state-grid strong,
.digital-twin-counters span,
.digital-twin-counters strong {
  display: block;
  overflow-wrap: anywhere;
}

.digital-twin-summary span,
.digital-twin-state-grid span,
.digital-twin-counters span {
  color: var(--muted);
  font-size: 11px;
}

.digital-twin-alerts {
  display: grid;
  gap: 6px;
}

.digital-twin-alerts p {
  margin: 0;
  padding: 9px;
  background: #10222b;
  color: #fff;
  font-size: 13px;
}

@media (max-width: 760px) {
  .digital-twin-head,
  .digital-twin-controls,
  .digital-twin-summary,
  .digital-twin-state-grid,
  .digital-twin-counters {
    grid-template-columns: 1fr;
  }
}


.automation-pack-export {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(420px, 1.2fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
}

.automation-pack-export h3 {
  margin: 0;
  color: #fff;
  font-size: 20px;
}

.automation-pack-export p {
  margin: 6px 0 0;
  color: #d9e9ed;
  font-size: 13px;
}

.automation-pack-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.automation-pack-summary div {
  display: grid;
  gap: 3px;
  min-height: 70px;
  padding: 9px;
  background: #fff;
  color: var(--deep);
}

.automation-pack-summary span,
.automation-pack-summary small {
  color: var(--muted);
  font-size: 11px;
}

.automation-pack-summary strong {
  color: var(--deep);
  overflow-wrap: anywhere;
}

.automation-pack-actions {
  display: grid;
  gap: 8px;
}

@media (max-width: 980px) {
  .automation-pack-export,
  .automation-pack-summary {
    grid-template-columns: 1fr;
  }
}


.automation-preset-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
}

.automation-preset-bar button {
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.22);
  background: #fff;
  color: var(--deep);
  padding: 8px 10px;
  font-weight: 850;
  cursor: pointer;
}

.automation-preset-bar span {
  color: #d9e9ed;
  font-size: 13px;
  font-weight: 850;
}


.automation-preset-comparison {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
}

.automation-preset-comparison-head {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.automation-preset-comparison h3 {
  margin: 0;
  color: #fff;
  font-size: 20px;
}

.automation-preset-comparison p {
  margin: 6px 0 0;
  color: #d9e9ed;
  font-size: 13px;
}

.preset-comparison-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  gap: 10px;
}

.preset-comparison-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  background: #fff;
  color: var(--deep);
  border: 1px solid rgba(16,34,43,.12);
}

.preset-comparison-card span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.preset-comparison-card strong {
  line-height: 1.15;
}

.preset-comparison-card small {
  color: var(--muted);
  line-height: 1.25;
}

.preset-comparison-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.preset-comparison-metric {
  min-width: 0;
  padding: 7px;
  background: #eef5f7;
}

.preset-comparison-metric b,
.preset-comparison-metric em {
  display: block;
  overflow-wrap: anywhere;
}

.preset-comparison-metric b {
  font-size: 13px;
}

.preset-comparison-metric em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.preset-comparison-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.preset-comparison-card button {
  min-height: 36px;
  border: 0;
  background: var(--deep);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 1180px) {
  .preset-comparison-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 720px) {
  .automation-preset-comparison-head,
  .preset-comparison-grid {
    grid-template-columns: 1fr;
  }

  .automation-preset-comparison-head .button {
    width: 100%;
  }
}


.automation-monetization-simulator {
  display: grid;
  grid-template-columns: minmax(240px, .75fr) minmax(320px, 1fr);
  gap: 14px;
  padding: 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
}

.monetization-copy h3,
.monetization-upsell-block h4 {
  margin: 0;
  color: #fff;
  font-size: 20px;
}

.monetization-copy p {
  margin: 6px 0 0;
  color: #d9e9ed;
  font-size: 13px;
  line-height: 1.45;
}

.monetization-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 8px;
  grid-column: 1 / -1;
}

.monetization-controls label {
  display: grid;
  gap: 5px;
  color: #d9e9ed;
  font-size: 11px;
  font-weight: 850;
}

.monetization-controls input,
.monetization-controls select {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.22);
  background: #fff;
  color: var(--deep);
  padding: 8px;
  font: inherit;
}

.monetization-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.monetization-summary div {
  min-width: 0;
  padding: 10px;
  background: #fff;
  color: var(--deep);
}

.monetization-summary span,
.monetization-summary small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.monetization-summary strong {
  display: block;
  margin: 3px 0;
  overflow-wrap: anywhere;
}

.monetization-upsell-block {
  display: grid;
  gap: 8px;
}

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

.monetization-upsells article {
  min-width: 0;
  padding: 10px;
  background: rgba(255,255,255,.92);
  color: var(--deep);
}

.monetization-upsells strong,
.monetization-upsells span,
.monetization-upsells p {
  display: block;
  overflow-wrap: anywhere;
}

.monetization-upsells span {
  margin-top: 4px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.monetization-upsells p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 1080px) {
  .automation-monetization-simulator,
  .monetization-controls,
  .monetization-summary,
  .monetization-upsells {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .automation-monetization-simulator,
  .monetization-controls,
  .monetization-summary,
  .monetization-upsells {
    grid-template-columns: 1fr;
  }
}


.client-site-ops {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.site-ops-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.site-ops-toolbar p:not(.eyebrow) {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.site-ops-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.site-ops-controls,
.site-ops-output,
.site-ops-panels > div {
  border: 1px solid var(--line);
  background: #f8fbfc;
  border-radius: 8px;
}

.site-ops-controls {
  display: grid;
  gap: 10px;
  padding: 14px;
  position: sticky;
  top: 82px;
}

.site-ops-controls label:not(.check) {
  display: grid;
  gap: 5px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.site-ops-controls input,
.site-ops-controls select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cfdde1;
  border-radius: 4px;
  padding: 8px;
  color: var(--deep);
  background: #fff;
  font: inherit;
  font-weight: 700;
  text-transform: none;
}

.site-ops-controls .check {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 10px 9px 42px;
  background: #fff;
  border-radius: 6px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 850;
}

.site-ops-controls .check input {
  position: absolute;
  left: 10px;
  width: 22px;
  height: 22px;
  min-height: 0;
  accent-color: var(--teal);
}

.site-ops-output {
  display: grid;
  gap: 14px;
  padding: 14px;
  background: #ffffff;
}

.site-ops-score {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.site-ops-score div {
  display: grid;
  gap: 4px;
  min-height: 86px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--teal);
  background: #10222b;
  color: #fff;
}

.site-ops-score span,
.site-ops-lead-plan span,
.site-ops-checklist span {
  color: #8edfd8;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.site-ops-score strong {
  color: #fff;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.site-ops-score small {
  color: #d9e9ed;
  font-size: 12px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.site-ops-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.site-ops-panels > div {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #f8fbfc;
}

.site-ops-panels h3 {
  margin: 0;
  color: var(--deep);
  font-size: 17px;
}

.site-ops-checklist,
.site-ops-content-plan,
.site-ops-lead-plan {
  display: grid;
  gap: 8px;
}

.site-ops-checklist article,
.site-ops-content-plan article,
.site-ops-lead-plan div {
  display: grid;
  gap: 5px;
  padding: 10px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
}

.site-ops-checklist article[data-status="fix"] {
  border-left-color: #c2410c;
}

.site-ops-checklist article[data-status="warn"] {
  border-left-color: var(--gold);
}

.site-ops-checklist article[data-status="ready"] {
  border-left-color: #26765c;
}

.site-ops-checklist strong,
.site-ops-content-plan strong,
.site-ops-lead-plan strong {
  color: var(--deep);
  line-height: 1.2;
}

.site-ops-checklist p,
.site-ops-content-plan p,
.site-ops-lead-plan p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 980px) {
  .site-ops-layout,
  .site-ops-panels,
  .site-ops-score {
    grid-template-columns: 1fr;
  }

  .site-ops-controls {
    position: static;
  }
}

@media (max-width: 680px) {
  .site-ops-toolbar {
    display: grid;
  }

  .client-site-ops {
    width: min(100% - 20px, 1240px);
    padding: 16px;
  }
}


.crm-workspace {
  width: min(1240px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.crm-workspace-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}

.crm-workspace-head p:not(.eyebrow) {
  max-width: 780px;
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.crm-workspace-controls {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.crm-workspace-controls label {
  display: grid;
  gap: 6px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-workspace-controls input {
  min-height: 42px;
  border: 1px solid #cfdde1;
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--deep);
  font: inherit;
  font-weight: 750;
  text-transform: none;
}

.crm-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crm-view-tab {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff;
  color: var(--deep);
  font-weight: 900;
  cursor: pointer;
}

.crm-view-tab.active,
.crm-view-tab:hover {
  background: #10222b;
  border-color: #10222b;
  color: #fff;
}

.crm-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr) minmax(260px, .8fr);
  gap: 12px;
  align-items: start;
}

.crm-workspace-grid > div {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #f8fbfc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crm-workspace-grid h3 {
  margin: 0;
  color: var(--deep);
  font-size: 18px;
}

.crm-module-groups,
.crm-backend-entities,
.crm-migration-plan {
  display: grid;
  gap: 10px;
}

.crm-module-card,
.crm-backend-entities article,
.crm-migration-plan article {
  display: grid;
  gap: 7px;
  padding: 12px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 7px;
}

.crm-module-card[data-workspace="sales"] { border-left-color: var(--gold); }
.crm-module-card[data-workspace="projects"] { border-left-color: #26765c; }
.crm-module-card[data-workspace="service"] { border-left-color: #008f9f; }
.crm-module-card[data-workspace="factory"] { border-left-color: #a84e33; }
.crm-module-card[data-workspace="admin"] { border-left-color: #455a64; }

.crm-module-card span,
.crm-backend-entities span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-module-card h4,
.crm-backend-entities strong,
.crm-migration-plan strong {
  margin: 0;
  color: var(--deep);
  line-height: 1.2;
}

.crm-module-card p,
.crm-module-card small,
.crm-backend-entities p,
.crm-migration-plan p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.crm-module-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.crm-module-card a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #eef8f9;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.crm-module-card a:hover {
  background: #10222b;
  color: #fff;
}

.crm-migration-plan article {
  grid-template-columns: auto 1fr;
  align-items: start;
}

.crm-migration-plan b {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #10222b;
  color: #fff;
  font-size: 12px;
}

@media (max-width: 1080px) {
  .crm-workspace-grid,
  .crm-workspace-controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .crm-workspace-head {
    display: grid;
  }

  .crm-workspace {
    width: min(100% - 20px, 1240px);
    padding: 16px;
  }
}


.crm-backend-blueprint {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 16px;
  background: #f8fbfc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crm-blueprint-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  padding: 14px;
  background: #10222b;
  color: #fff;
  border-radius: 8px;
}

.crm-blueprint-head h3,
.crm-blueprint-head p {
  margin: 0;
}

.crm-blueprint-head p {
  margin-top: 5px;
  color: #d9e9ed;
  line-height: 1.45;
}

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

.crm-blueprint-layout section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-radius: 8px;
}

.crm-blueprint-layout section.wide {
  grid-column: 1 / -1;
}

.crm-blueprint-layout h4 {
  margin: 0;
  color: var(--deep);
  font-size: 17px;
}

.crm-data-model-grid,
.crm-api-route-grid,
.crm-role-matrix,
.crm-page-split-plan,
.crm-implementation-roadmap {
  display: grid;
  gap: 9px;
}

.crm-data-model-grid,
.crm-api-route-grid,
.crm-role-matrix,
.crm-page-split-plan {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.crm-data-model-grid article,
.crm-api-route-grid article,
.crm-role-matrix article,
.crm-page-split-plan article,
.crm-implementation-roadmap article {
  display: grid;
  gap: 5px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 6px;
}

.crm-api-route-grid article {
  border-left-color: var(--gold);
}

.crm-role-matrix article {
  border-left-color: #26765c;
}

.crm-page-split-plan article {
  border-left-color: #a84e33;
}

.crm-data-model-grid span,
.crm-api-route-grid span,
.crm-role-matrix span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-data-model-grid strong,
.crm-api-route-grid strong,
.crm-page-split-plan strong,
.crm-implementation-roadmap strong {
  color: var(--deep);
  line-height: 1.2;
}

.crm-data-model-grid p,
.crm-api-route-grid p,
.crm-role-matrix p,
.crm-page-split-plan p,
.crm-implementation-roadmap p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

.crm-implementation-roadmap {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.crm-implementation-roadmap article {
  grid-template-columns: auto 1fr;
  align-items: start;
}

.crm-implementation-roadmap b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 28px;
  padding: 4px 8px;
  background: #10222b;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
}

@media (max-width: 1100px) {
  .crm-blueprint-layout,
  .crm-implementation-roadmap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .crm-blueprint-head {
    display: grid;
  }
}


.crm-operations-console {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crm-console-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(135deg, #10222b 0%, #123c4a 60%, #0f5964 100%);
  color: #fff;
  border-radius: 8px;
}

.crm-console-head h3,
.crm-console-head p {
  margin: 0;
}

.crm-console-head p {
  margin-top: 5px;
  color: #d9e9ed;
  line-height: 1.45;
}

.crm-console-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
}

.crm-console-controls label {
  display: grid;
  gap: 6px;
  padding: 10px;
  background: #f8fbfc;
  border: 1px solid #d7e6ea;
  border-radius: 7px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-console-controls select {
  min-height: 40px;
  border: 1px solid #cfdde1;
  border-radius: 5px;
  padding: 8px;
  background: #fff;
  color: var(--deep);
  font: inherit;
  font-weight: 750;
  text-transform: none;
}

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

.crm-console-grid section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #f8fbfc;
  border: 1px solid #d7e6ea;
  border-radius: 8px;
}

.crm-console-grid h4 {
  margin: 0;
  color: var(--deep);
  font-size: 17px;
}

.crm-console-pipeline,
.crm-console-tasks,
.crm-console-timeline,
.crm-console-save-flow {
  display: grid;
  gap: 8px;
}

.crm-console-pipeline article,
.crm-console-tasks article,
.crm-console-timeline article,
.crm-console-save-flow article {
  display: grid;
  gap: 5px;
  padding: 10px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 6px;
}

.crm-console-tasks article[data-priority="high"] {
  border-left-color: #c2410c;
}

.crm-console-tasks article[data-priority="medium"] {
  border-left-color: var(--gold);
}

.crm-console-tasks article[data-priority="low"] {
  border-left-color: #26765c;
}

.crm-console-pipeline span,
.crm-console-tasks span,
.crm-console-save-flow span,
.crm-console-timeline time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-console-pipeline strong,
.crm-console-tasks strong,
.crm-console-timeline strong {
  color: var(--deep);
  line-height: 1.2;
}

.crm-console-pipeline small,
.crm-console-pipeline p,
.crm-console-tasks p,
.crm-console-timeline p,
.crm-console-save-flow p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 1180px) {
  .crm-console-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .crm-console-head,
  .crm-console-controls,
  .crm-console-grid {
    grid-template-columns: 1fr;
    display: grid;
  }
}


/* CRM UI alignment pass: keep dashboard sections readable instead of squeezed. */
.crm-workspace-shell {
  display: grid;
  gap: 18px;
  scroll-margin-top: 92px;
}

.crm-workspace-shell *,
.crm-workspace-shell *::before,
.crm-workspace-shell *::after {
  min-width: 0;
  overflow-wrap: anywhere;
}

.crm-workspace-head,
.crm-blueprint-head,
.crm-console-head {
  align-items: center;
}

.crm-workspace-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr);
  gap: 16px;
}

.crm-workspace-grid > div:first-child {
  grid-row: span 2;
}

.crm-backend-blueprint,
.crm-operations-console {
  margin-top: 0;
}

.crm-blueprint-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.crm-data-model-grid,
.crm-api-route-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.crm-role-matrix,
.crm-page-split-plan {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.crm-implementation-roadmap {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.crm-console-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 16px;
}

.crm-console-grid section,
.crm-blueprint-layout section,
.crm-workspace-grid > div {
  align-content: start;
}

.crm-module-card,
.crm-backend-entities article,
.crm-migration-plan article,
.crm-data-model-grid article,
.crm-api-route-grid article,
.crm-role-matrix article,
.crm-page-split-plan article,
.crm-implementation-roadmap article,
.crm-console-pipeline article,
.crm-console-tasks article,
.crm-console-timeline article,
.crm-console-save-flow article {
  min-height: auto;
}

.topbar {
  align-items: center;
}

.topbar nav {
  min-width: 0;
}

@media (max-width: 1100px) {
  .crm-workspace-grid,
  .crm-console-grid {
    grid-template-columns: 1fr;
  }

  .crm-workspace-grid > div:first-child {
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .crm-workspace-shell {
    width: min(100% - 20px, 1240px);
    padding: 16px;
    gap: 14px;
  }

  .crm-workspace-head,
  .crm-blueprint-head,
  .crm-console-head,
  .crm-workspace-controls,
  .crm-console-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .crm-view-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .crm-view-tab {
    flex: 0 0 auto;
  }

  .crm-data-model-grid,
  .crm-api-route-grid,
  .crm-role-matrix,
  .crm-page-split-plan,
  .crm-implementation-roadmap {
    grid-template-columns: 1fr;
  }
}


.crm-record-workspace {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding: 16px;
  background: #f8fbfc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crm-record-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #10222b;
  color: #fff;
  border-radius: 8px;
}

.crm-record-head h3,
.crm-record-head p {
  margin: 0;
}

.crm-record-head p {
  margin-top: 5px;
  color: #d9e9ed;
  line-height: 1.45;
}

.crm-record-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 10px;
}

.crm-record-controls label {
  display: grid;
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-radius: 7px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-record-controls select {
  min-height: 40px;
  border: 1px solid #cfdde1;
  border-radius: 5px;
  padding: 8px;
  background: #fff;
  color: var(--deep);
  font: inherit;
  font-weight: 750;
  text-transform: none;
}

.crm-record-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.2fr) minmax(280px, .8fr) minmax(280px, .8fr);
  gap: 12px;
  align-items: start;
}

.crm-record-layout section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-radius: 8px;
}

.crm-record-summary-wrap,
.crm-record-next-action-wrap {
  grid-row: span 2;
}

.crm-record-layout h4 {
  margin: 0;
  color: var(--deep);
  font-size: 17px;
}

.crm-record-summary,
.crm-record-tasks,
.crm-record-files,
.crm-record-activity,
.crm-record-next-action {
  display: grid;
  gap: 8px;
}

.crm-record-summary article,
.crm-record-tasks article,
.crm-record-files article,
.crm-record-activity article,
.crm-record-next-action article {
  display: grid;
  gap: 6px;
  padding: 11px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.crm-record-summary article,
.crm-record-next-action article {
  background: #f8fbfc;
}

.crm-record-tasks article[data-status="blocked"] {
  border-left-color: #c2410c;
}

.crm-record-tasks article[data-status="done"] {
  border-left-color: #26765c;
}

.crm-record-summary span,
.crm-record-tasks span,
.crm-record-files span,
.crm-record-next-action span,
.crm-record-activity time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-record-summary h5,
.crm-record-summary strong,
.crm-record-tasks strong,
.crm-record-files strong,
.crm-record-activity strong,
.crm-record-next-action strong {
  margin: 0;
  color: var(--deep);
  line-height: 1.2;
}

.crm-record-summary p,
.crm-record-summary small,
.crm-record-tasks p,
.crm-record-files p,
.crm-record-activity p,
.crm-record-next-action p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

.crm-record-summary div {
  display: grid;
  gap: 5px;
  margin-top: 4px;
}

@media (max-width: 1180px) {
  .crm-record-layout {
    grid-template-columns: 1fr 1fr;
  }

  .crm-record-summary-wrap,
  .crm-record-next-action-wrap {
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .crm-record-head,
  .crm-record-controls,
  .crm-record-layout {
    display: grid;
    grid-template-columns: 1fr;
  }
}


.crm-route-shell {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crm-route-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(135deg, #10222b 0%, #0f5964 100%);
  color: #fff;
  border-radius: 8px;
}

.crm-route-head h3,
.crm-route-head p {
  margin: 0;
}

.crm-route-head p {
  margin-top: 5px;
  color: #d9e9ed;
  line-height: 1.45;
}

.crm-route-controls label {
  display: grid;
  gap: 6px;
  padding: 10px;
  background: #f8fbfc;
  border: 1px solid #d7e6ea;
  border-radius: 7px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-route-controls input {
  min-height: 42px;
  border: 1px solid #cfdde1;
  border-radius: 5px;
  padding: 9px 10px;
  background: #fff;
  color: var(--deep);
  font: inherit;
  font-weight: 750;
  text-transform: none;
}

.crm-route-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.1fr) minmax(280px, .9fr);
  gap: 12px;
  align-items: start;
}

.crm-route-layout section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #f8fbfc;
  border: 1px solid #d7e6ea;
  border-radius: 8px;
}

.crm-route-layout h4 {
  margin: 0;
  color: var(--deep);
  font-size: 17px;
}

.crm-route-list,
.crm-route-preview,
.crm-saved-views,
.crm-module-route-map {
  display: grid;
  gap: 8px;
}

.crm-route-list article,
.crm-route-preview article,
.crm-saved-views article,
.crm-module-route-map article {
  display: grid;
  gap: 5px;
  padding: 10px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.crm-route-preview article {
  border-left-color: var(--gold);
  background: #fffdf6;
}

.crm-saved-views article {
  border-left-color: #26765c;
}

.crm-module-route-map article {
  border-left-color: #a84e33;
}

.crm-route-list span,
.crm-route-preview span,
.crm-saved-views span,
.crm-module-route-map span,
.crm-route-preview small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-route-list strong,
.crm-route-preview strong,
.crm-saved-views strong,
.crm-module-route-map strong {
  color: var(--deep);
  line-height: 1.2;
}

.crm-route-list p,
.crm-route-preview p,
.crm-saved-views p,
.crm-module-route-map p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

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

@media (max-width: 760px) {
  .crm-route-head {
    display: grid;
  }
}


.crm-migration-builder {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding: 16px;
  background: #f8fbfc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crm-migration-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #10222b;
  color: #fff;
  border-radius: 8px;
}

.crm-migration-head h3,
.crm-migration-head p {
  margin: 0;
}

.crm-migration-head p {
  margin-top: 5px;
  color: #d9e9ed;
  line-height: 1.45;
}

.crm-migration-controls label {
  display: grid;
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-radius: 7px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-migration-controls select {
  min-height: 40px;
  border: 1px solid #cfdde1;
  border-radius: 5px;
  padding: 8px;
  background: #fff;
  color: var(--deep);
  font: inherit;
  font-weight: 750;
  text-transform: none;
}

.crm-migration-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 12px;
}

.crm-migration-layout section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-radius: 8px;
  align-content: start;
}

.crm-migration-layout h4 {
  margin: 0;
  color: var(--deep);
  font-size: 17px;
}

.crm-migration-tables,
.crm-model-plan,
.crm-policy-plan,
.crm-seed-plan {
  display: grid;
  gap: 8px;
}

.crm-migration-tables article,
.crm-model-plan article,
.crm-policy-plan article,
.crm-seed-plan article {
  display: grid;
  gap: 5px;
  padding: 10px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.crm-model-plan article {
  border-left-color: var(--gold);
}

.crm-policy-plan article {
  border-left-color: #26765c;
}

.crm-seed-plan article {
  border-left-color: #a84e33;
}

.crm-migration-tables span,
.crm-policy-plan span,
.crm-seed-plan span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-migration-tables strong,
.crm-model-plan strong,
.crm-seed-plan strong {
  color: var(--deep);
  line-height: 1.2;
}

.crm-migration-tables p,
.crm-model-plan p,
.crm-policy-plan p,
.crm-seed-plan p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

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

@media (max-width: 760px) {
  .crm-migration-head {
    display: grid;
  }
}


.crm-api-contracts {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crm-api-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(135deg, #10222b 0%, #123c4a 100%);
  color: #fff;
  border-radius: 8px;
}

.crm-api-head h3,
.crm-api-head p {
  margin: 0;
}

.crm-api-head p {
  margin-top: 5px;
  color: #d9e9ed;
  line-height: 1.45;
}

.crm-api-controls label {
  display: grid;
  gap: 6px;
  padding: 10px;
  background: #f8fbfc;
  border: 1px solid #d7e6ea;
  border-radius: 7px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-api-controls select {
  min-height: 40px;
  border: 1px solid #cfdde1;
  border-radius: 5px;
  padding: 8px;
  background: #fff;
  color: var(--deep);
  font: inherit;
  font-weight: 750;
  text-transform: none;
}

.crm-api-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 12px;
}

.crm-api-layout section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #f8fbfc;
  border: 1px solid #d7e6ea;
  border-radius: 8px;
  align-content: start;
}

.crm-api-layout h4 {
  margin: 0;
  color: var(--deep);
  font-size: 17px;
}

.crm-endpoint-list,
.crm-payload-shape,
.crm-validation-rules,
.crm-frontend-save-map {
  display: grid;
  gap: 8px;
}

.crm-endpoint-list article,
.crm-payload-shape article,
.crm-validation-rules article,
.crm-frontend-save-map article {
  display: grid;
  gap: 5px;
  padding: 10px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.crm-payload-shape article { border-left-color: var(--gold); }
.crm-validation-rules article { border-left-color: #26765c; }
.crm-frontend-save-map article { border-left-color: #a84e33; }

.crm-payload-shape span,
.crm-validation-rules span,
.crm-frontend-save-map span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-endpoint-list strong,
.crm-payload-shape strong,
.crm-frontend-save-map strong {
  color: var(--deep);
  line-height: 1.2;
}

.crm-endpoint-list p,
.crm-payload-shape p,
.crm-validation-rules p,
.crm-frontend-save-map p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

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

@media (max-width: 760px) {
  .crm-api-head {
    display: grid;
  }
}


.crm-analytics-dashboard {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding: 16px;
  background: #f7faf8;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crm-analytics-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #12312a;
  color: #fff;
  border-radius: 8px;
}

.crm-analytics-head h3,
.crm-analytics-head p { margin: 0; }
.crm-analytics-head p { margin-top: 5px; color: #dceee6; line-height: 1.45; }

.crm-analytics-controls label {
  display: grid;
  gap: 6px;
  max-width: 360px;
  padding: 10px;
  background: #fff;
  border: 1px solid #d8e6df;
  border-radius: 7px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-analytics-controls select {
  min-height: 40px;
  border: 1px solid #cfded7;
  border-radius: 5px;
  padding: 8px;
  background: #fff;
  color: var(--deep);
  font: inherit;
  font-weight: 750;
  text-transform: none;
}

.crm-analytics-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 12px;
}

.crm-analytics-layout section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #d8e6df;
  border-radius: 8px;
  align-content: start;
}

.crm-analytics-layout h4 { margin: 0; color: var(--deep); font-size: 17px; }

.crm-kpi-cards,
.crm-funnel-health,
.crm-workload-board,
.crm-saved-reports {
  display: grid;
  gap: 8px;
}

.crm-kpi-cards {
  grid-template-columns: repeat(2, minmax(130px, 1fr));
}

.crm-kpi-cards article,
.crm-funnel-health article,
.crm-workload-board article,
.crm-saved-reports article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #d8e6df;
  border-left: 5px solid #26765c;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.crm-funnel-health article { border-left-color: var(--teal); }
.crm-workload-board article { border-left-color: var(--gold); }
.crm-saved-reports article { border-left-color: #a84e33; }

.crm-kpi-cards span,
.crm-funnel-health span,
.crm-workload-board span,
.crm-saved-reports span,
.crm-kpi-cards small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-kpi-cards strong,
.crm-funnel-health strong,
.crm-workload-board strong,
.crm-saved-reports strong {
  color: var(--deep);
  line-height: 1.2;
}

.crm-kpi-cards p,
.crm-funnel-health p,
.crm-workload-board p,
.crm-saved-reports p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

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

@media (max-width: 760px) {
  .crm-analytics-head {
    display: grid;
  }

  .crm-kpi-cards {
    grid-template-columns: 1fr;
  }
}


.crm-media-library {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding: 16px;
  background: #fbf9f4;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crm-media-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #33251b;
  color: #fff;
  border-radius: 8px;
}

.crm-media-head h3,
.crm-media-head p { margin: 0; }
.crm-media-head p { margin-top: 5px; color: #f3e5d2; line-height: 1.45; }

.crm-media-controls label {
  display: grid;
  gap: 6px;
  max-width: 360px;
  padding: 10px;
  background: #fff;
  border: 1px solid #eadfcc;
  border-radius: 7px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-media-controls select {
  min-height: 40px;
  border: 1px solid #ded0bd;
  border-radius: 5px;
  padding: 8px;
  background: #fff;
  color: var(--deep);
  font: inherit;
  font-weight: 750;
  text-transform: none;
}

.crm-media-layout {
  display: grid;
  grid-template-columns: minmax(300px, 1.25fr) repeat(2, minmax(240px, 1fr));
  gap: 12px;
}

.crm-media-layout section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #eadfcc;
  border-radius: 8px;
  align-content: start;
}

.crm-media-layout h4 { margin: 0; color: var(--deep); font-size: 17px; }

.crm-media-assets,
.crm-media-approval,
.crm-media-publishing {
  display: grid;
  gap: 8px;
}

.crm-media-assets article,
.crm-media-approval article,
.crm-media-publishing article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #eadfcc;
  border-left: 5px solid #a84e33;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.crm-media-approval article { border-left-color: var(--gold); }
.crm-media-publishing article { border-left-color: var(--teal); }

.crm-media-assets span,
.crm-media-approval span,
.crm-media-publishing span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-media-assets strong,
.crm-media-approval strong,
.crm-media-publishing strong {
  color: var(--deep);
  line-height: 1.2;
}

.crm-media-assets p,
.crm-media-approval p,
.crm-media-publishing p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

@media (max-width: 1080px) {
  .crm-media-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .crm-media-head {
    display: grid;
  }
}


.crm-lead-intake {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding: 16px;
  background: #f6f9fb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crm-lead-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #172b3a;
  color: #fff;
  border-radius: 8px;
}

.crm-lead-head h3,
.crm-lead-head p { margin: 0; }
.crm-lead-head p { margin-top: 5px; color: #dbeaf2; line-height: 1.45; }

.crm-lead-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 360px));
  gap: 10px;
}

.crm-lead-controls label {
  display: grid;
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 1px solid #d7e2e8;
  border-radius: 7px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-lead-controls select {
  min-height: 40px;
  border: 1px solid #cad9e0;
  border-radius: 5px;
  padding: 8px;
  background: #fff;
  color: var(--deep);
  font: inherit;
  font-weight: 750;
  text-transform: none;
}

.crm-lead-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.35fr) repeat(2, minmax(240px, 1fr));
  gap: 12px;
}

.crm-lead-layout section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #d7e2e8;
  border-radius: 8px;
  align-content: start;
}

.crm-lead-layout h4 { margin: 0; color: var(--deep); font-size: 17px; }

.crm-lead-inbox,
.crm-lead-qualification,
.crm-lead-next-steps {
  display: grid;
  gap: 8px;
}

.crm-lead-inbox article,
.crm-lead-qualification article,
.crm-lead-next-steps article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #d7e2e8;
  border-left: 5px solid var(--teal);
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.crm-lead-qualification article { border-left-color: #26765c; }
.crm-lead-next-steps article { border-left-color: var(--gold); }

.crm-lead-inbox span,
.crm-lead-qualification span,
.crm-lead-next-steps span,
.crm-lead-inbox small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-lead-inbox strong,
.crm-lead-qualification strong,
.crm-lead-next-steps strong {
  color: var(--deep);
  line-height: 1.2;
}

.crm-lead-inbox p,
.crm-lead-qualification p,
.crm-lead-next-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

@media (max-width: 1080px) {
  .crm-lead-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .crm-lead-head,
  .crm-lead-controls {
    display: grid;
    grid-template-columns: 1fr;
  }
}


.crm-project-delivery {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding: 16px;
  background: #f8faf6;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crm-delivery-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #21311f;
  color: #fff;
  border-radius: 8px;
}

.crm-delivery-head h3,
.crm-delivery-head p { margin: 0; }
.crm-delivery-head p { margin-top: 5px; color: #e0eddc; line-height: 1.45; }

.crm-delivery-controls label {
  display: grid;
  gap: 6px;
  max-width: 360px;
  padding: 10px;
  background: #fff;
  border: 1px solid #dce6d8;
  border-radius: 7px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-delivery-controls select {
  min-height: 40px;
  border: 1px solid #cfddca;
  border-radius: 5px;
  padding: 8px;
  background: #fff;
  color: var(--deep);
  font: inherit;
  font-weight: 750;
  text-transform: none;
}

.crm-delivery-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.3fr) repeat(2, minmax(240px, 1fr));
  gap: 12px;
}

.crm-delivery-layout section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #dce6d8;
  border-radius: 8px;
  align-content: start;
}

.crm-delivery-layout h4 { margin: 0; color: var(--deep); font-size: 17px; }

.crm-delivery-projects,
.crm-delivery-milestones,
.crm-delivery-risks {
  display: grid;
  gap: 8px;
}

.crm-delivery-projects article,
.crm-delivery-milestones article,
.crm-delivery-risks article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #dce6d8;
  border-left: 5px solid #26765c;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.crm-delivery-milestones article { border-left-color: var(--teal); }
.crm-delivery-risks article { border-left-color: #a84e33; }

.crm-delivery-projects span,
.crm-delivery-milestones span,
.crm-delivery-risks span,
.crm-delivery-projects small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-delivery-projects strong,
.crm-delivery-milestones strong,
.crm-delivery-risks strong {
  color: var(--deep);
  line-height: 1.2;
}

.crm-delivery-projects p,
.crm-delivery-milestones p,
.crm-delivery-risks p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

@media (max-width: 1080px) {
  .crm-delivery-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .crm-delivery-head {
    display: grid;
  }
}


.crm-service-assets {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding: 16px;
  background: #f6f8fb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crm-service-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #182a45;
  color: #fff;
  border-radius: 8px;
}

.crm-service-head h3,
.crm-service-head p { margin: 0; }
.crm-service-head p { margin-top: 5px; color: #dce7f5; line-height: 1.45; }

.crm-service-controls label {
  display: grid;
  gap: 6px;
  max-width: 360px;
  padding: 10px;
  background: #fff;
  border: 1px solid #d7e0ec;
  border-radius: 7px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-service-controls select {
  min-height: 40px;
  border: 1px solid #cbd7e4;
  border-radius: 5px;
  padding: 8px;
  background: #fff;
  color: var(--deep);
  font: inherit;
  font-weight: 750;
  text-transform: none;
}

.crm-service-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.3fr) repeat(2, minmax(240px, 1fr));
  gap: 12px;
}

.crm-service-layout section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  align-content: start;
}

.crm-service-layout h4 { margin: 0; color: var(--deep); font-size: 17px; }

.crm-asset-register,
.crm-service-tickets,
.crm-service-schedule {
  display: grid;
  gap: 8px;
}

.crm-asset-register article,
.crm-service-tickets article,
.crm-service-schedule article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #d7e0ec;
  border-left: 5px solid var(--teal);
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.crm-service-tickets article { border-left-color: #a84e33; }
.crm-service-schedule article { border-left-color: var(--gold); }

.crm-asset-register span,
.crm-service-tickets span,
.crm-service-schedule span,
.crm-asset-register small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-asset-register strong,
.crm-service-tickets strong,
.crm-service-schedule strong {
  color: var(--deep);
  line-height: 1.2;
}

.crm-asset-register p,
.crm-service-tickets p,
.crm-service-schedule p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

@media (max-width: 1080px) {
  .crm-service-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .crm-service-head {
    display: grid;
  }
}


.crm-billing-collections {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding: 16px;
  background: #fbf9f2;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crm-billing-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #382b13;
  color: #fff;
  border-radius: 8px;
}

.crm-billing-head h3,
.crm-billing-head p { margin: 0; }
.crm-billing-head p { margin-top: 5px; color: #f1e7ce; line-height: 1.45; }

.crm-billing-controls label {
  display: grid;
  gap: 6px;
  max-width: 360px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e7ddc5;
  border-radius: 7px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-billing-controls select {
  min-height: 40px;
  border: 1px solid #d9ccb1;
  border-radius: 5px;
  padding: 8px;
  background: #fff;
  color: var(--deep);
  font: inherit;
  font-weight: 750;
  text-transform: none;
}

.crm-billing-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.3fr) repeat(2, minmax(240px, 1fr));
  gap: 12px;
}

.crm-billing-layout section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #e7ddc5;
  border-radius: 8px;
  align-content: start;
}

.crm-billing-layout h4 { margin: 0; color: var(--deep); font-size: 17px; }

.crm-invoice-ledger,
.crm-collection-actions,
.crm-release-gates {
  display: grid;
  gap: 8px;
}

.crm-invoice-ledger article,
.crm-collection-actions article,
.crm-release-gates article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #e7ddc5;
  border-left: 5px solid var(--gold);
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.crm-collection-actions article { border-left-color: var(--teal); }
.crm-release-gates article { border-left-color: #a84e33; }

.crm-invoice-ledger span,
.crm-collection-actions span,
.crm-release-gates span,
.crm-invoice-ledger small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-invoice-ledger strong,
.crm-collection-actions strong,
.crm-release-gates strong {
  color: var(--deep);
  line-height: 1.2;
}

.crm-invoice-ledger p,
.crm-collection-actions p,
.crm-release-gates p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

@media (max-width: 1080px) {
  .crm-billing-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .crm-billing-head {
    display: grid;
  }
}


.crm-inventory-procurement {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding: 16px;
  background: #f7fbf9;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crm-inventory-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #123126;
  color: #fff;
  border-radius: 8px;
}

.crm-inventory-head h3,
.crm-inventory-head p { margin: 0; }
.crm-inventory-head p { margin-top: 5px; color: #dcefe7; line-height: 1.45; }

.crm-inventory-controls label {
  display: grid;
  gap: 6px;
  max-width: 360px;
  padding: 10px;
  background: #fff;
  border: 1px solid #d6e8df;
  border-radius: 7px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-inventory-controls select {
  min-height: 40px;
  border: 1px solid #c9dbd2;
  border-radius: 5px;
  padding: 8px;
  background: #fff;
  color: var(--deep);
  font: inherit;
  font-weight: 750;
  text-transform: none;
}

.crm-inventory-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.3fr) repeat(2, minmax(240px, 1fr));
  gap: 12px;
}

.crm-inventory-layout section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #d6e8df;
  border-radius: 8px;
  align-content: start;
}

.crm-inventory-layout h4 { margin: 0; color: var(--deep); font-size: 17px; }

.crm-stock-reservations,
.crm-supplier-orders,
.crm-procurement-blockers {
  display: grid;
  gap: 8px;
}

.crm-stock-reservations article,
.crm-supplier-orders article,
.crm-procurement-blockers article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #d6e8df;
  border-left: 5px solid #26765c;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.crm-supplier-orders article { border-left-color: var(--gold); }
.crm-procurement-blockers article { border-left-color: #a84e33; }

.crm-stock-reservations span,
.crm-supplier-orders span,
.crm-procurement-blockers span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-stock-reservations strong,
.crm-supplier-orders strong,
.crm-procurement-blockers strong {
  color: var(--deep);
  line-height: 1.2;
}

.crm-stock-reservations p,
.crm-supplier-orders p,
.crm-procurement-blockers p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

@media (max-width: 1080px) {
  .crm-inventory-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .crm-inventory-head {
    display: grid;
  }
}


.crm-customer-portal {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding: 16px;
  background: #f8f7fb;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crm-portal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #28243d;
  color: #fff;
  border-radius: 8px;
}

.crm-portal-head h3,
.crm-portal-head p { margin: 0; }
.crm-portal-head p { margin-top: 5px; color: #e5e0f4; line-height: 1.45; }

.crm-portal-controls label {
  display: grid;
  gap: 6px;
  max-width: 360px;
  padding: 10px;
  background: #fff;
  border: 1px solid #dfdbea;
  border-radius: 7px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-portal-controls select {
  min-height: 40px;
  border: 1px solid #d0cada;
  border-radius: 5px;
  padding: 8px;
  background: #fff;
  color: var(--deep);
  font: inherit;
  font-weight: 750;
  text-transform: none;
}

.crm-portal-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.3fr) repeat(2, minmax(240px, 1fr));
  gap: 12px;
}

.crm-portal-layout section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #dfdbea;
  border-radius: 8px;
  align-content: start;
}

.crm-portal-layout h4 { margin: 0; color: var(--deep); font-size: 17px; }

.crm-portal-approvals,
.crm-portal-uploads,
.crm-portal-documents {
  display: grid;
  gap: 8px;
}

.crm-portal-approvals article,
.crm-portal-uploads article,
.crm-portal-documents article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #dfdbea;
  border-left: 5px solid #6f5aa8;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.crm-portal-uploads article { border-left-color: var(--teal); }
.crm-portal-documents article { border-left-color: var(--gold); }

.crm-portal-approvals span,
.crm-portal-uploads span,
.crm-portal-documents span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-portal-approvals strong,
.crm-portal-uploads strong,
.crm-portal-documents strong {
  color: var(--deep);
  line-height: 1.2;
}

.crm-portal-approvals p,
.crm-portal-uploads p,
.crm-portal-documents p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

@media (max-width: 1080px) {
  .crm-portal-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .crm-portal-head {
    display: grid;
  }
}


.crm-permissions-audit {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding: 16px;
  background: #f9f8f7;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crm-audit-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #2f2521;
  color: #fff;
  border-radius: 8px;
}

.crm-audit-head h3,
.crm-audit-head p { margin: 0; }
.crm-audit-head p { margin-top: 5px; color: #eee3df; line-height: 1.45; }

.crm-audit-controls label {
  display: grid;
  gap: 6px;
  max-width: 360px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e3d9d5;
  border-radius: 7px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-audit-controls select {
  min-height: 40px;
  border: 1px solid #d5c9c4;
  border-radius: 5px;
  padding: 8px;
  background: #fff;
  color: var(--deep);
  font: inherit;
  font-weight: 750;
  text-transform: none;
}

.crm-audit-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.3fr) repeat(2, minmax(240px, 1fr));
  gap: 12px;
}

.crm-audit-layout section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #e3d9d5;
  border-radius: 8px;
  align-content: start;
}

.crm-audit-layout h4 { margin: 0; color: var(--deep); font-size: 17px; }

.crm-role-matrix,
.crm-audit-events,
.crm-security-checks {
  display: grid;
  gap: 8px;
}

.crm-role-matrix article,
.crm-audit-events article,
.crm-security-checks article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #e3d9d5;
  border-left: 5px solid #a84e33;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.crm-audit-events article { border-left-color: var(--teal); }
.crm-security-checks article { border-left-color: #26765c; }

.crm-role-matrix span,
.crm-audit-events span,
.crm-security-checks span,
.crm-role-matrix small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-role-matrix strong,
.crm-audit-events strong,
.crm-security-checks strong {
  color: var(--deep);
  line-height: 1.2;
}

.crm-role-matrix p,
.crm-audit-events p,
.crm-security-checks p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

@media (max-width: 1080px) {
  .crm-audit-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .crm-audit-head {
    display: grid;
  }
}


.crm-automation-rules {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding: 16px;
  background: #f8fbfc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.crm-automation-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #10222b;
  color: #fff;
  border-radius: 8px;
}

.crm-automation-head h3,
.crm-automation-head p { margin: 0; }
.crm-automation-head p { margin-top: 5px; color: #d9e9ed; line-height: 1.45; }

.crm-automation-controls label {
  display: grid;
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-radius: 7px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-automation-controls select {
  min-height: 40px;
  border: 1px solid #cfdde1;
  border-radius: 5px;
  padding: 8px;
  background: #fff;
  color: var(--deep);
  font: inherit;
  font-weight: 750;
  text-transform: none;
}

.crm-automation-layout {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 12px;
}

.crm-automation-layout section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-radius: 8px;
  align-content: start;
}

.crm-automation-layout h4 { margin: 0; color: var(--deep); font-size: 17px; }

.crm-rule-summary,
.crm-rule-actions,
.crm-rule-notifications,
.crm-rule-audit {
  display: grid;
  gap: 8px;
}

.crm-rule-summary article,
.crm-rule-actions article,
.crm-rule-notifications article,
.crm-rule-audit article {
  display: grid;
  gap: 5px;
  padding: 10px;
  background: #fff;
  border: 1px solid #d7e6ea;
  border-left: 5px solid var(--teal);
  border-radius: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.crm-rule-actions article { border-left-color: var(--gold); }
.crm-rule-notifications article { border-left-color: #26765c; }
.crm-rule-audit article { border-left-color: #a84e33; }

.crm-rule-summary span,
.crm-rule-summary small,
.crm-rule-notifications span,
.crm-rule-audit span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-rule-summary strong,
.crm-rule-actions strong,
.crm-rule-audit strong { color: var(--deep); line-height: 1.2; }
.crm-rule-summary p,
.crm-rule-actions p,
.crm-rule-notifications p,
.crm-rule-audit p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.42; }

@media (max-width: 1180px) { .crm-automation-layout { grid-template-columns: repeat(2, minmax(260px, 1fr)); } }
@media (max-width: 760px) { .crm-automation-head, .crm-automation-layout { display: grid; grid-template-columns: 1fr; } }


.managed-page-sections {
  display: grid;
  gap: 14px;
  padding: 22px clamp(18px, 4vw, 52px);
  background: #eef5f7;
  border-bottom: 1px solid var(--line);
}

.managed-page-sections .section-head {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

.managed-page-sections-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

.managed-page-sections-list article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid #d8e1e5;
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  overflow-wrap: anywhere;
}

.managed-page-sections-list span,
.managed-page-sections-list small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.managed-page-sections-list strong {
  color: var(--deep);
  line-height: 1.2;
}

.managed-page-sections-list p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .managed-page-sections-list {
    grid-template-columns: 1fr;
  }
}

.managed-hero-subtitle {
  max-width: 58ch;
  margin: 8px 0 0;
  color: var(--muted, #5e6f78);
  line-height: 1.55;
}

.managed-hero-cta {
  width: fit-content;
  margin-top: 12px;
}


.component-app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - 72px);
}

.component-side-menu {
  position: sticky;
  top: 72px;
  z-index: 8;
  height: calc(100vh - 72px);
  overflow-y: auto;
  padding: 16px 12px;
  background: #ffffff;
  border-right: 1px solid var(--line);
}

.component-side-menu-head {
  display: grid;
  gap: 3px;
  padding: 8px 10px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.component-menu-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.component-menu-filters button { padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.component-menu-filters button.is-active { border-color: var(--teal); background: var(--teal); color: #fff; }
.topbar nav > a:nth-of-type(n+2), .topbar nav > .more-nav { display: none; }
.topbar nav::after { content: "Choose a project flow from the menu"; color: var(--muted); font-size: 11px; font-weight: 800; align-self: center; }
#componentSideMenu a[data-hmap-view] { display: none !important; }
body[data-component-page="hmap-explorer"] #componentPages > section:not(#hmap-explorer) { display: none !important; }
/* Industrial control-room surface: graphite, metal, glass and restrained gloss. */
.component-app-shell { background: #101a20; }
.component-side-menu { background: linear-gradient(180deg,#17252d 0%,#0d171d 100%); border-right-color: #304952; box-shadow: 8px 0 28px rgba(3,12,16,.22); }
.component-side-menu-head strong, .component-side-menu a strong { color: #effcff; }
.component-side-menu-head span, .component-side-menu a span { color: #7faeb5; }
.component-side-menu a { border-color: transparent; color: #c5dce0; }
.component-side-menu a:hover, .component-side-menu a.active { background: linear-gradient(135deg,rgba(27,91,101,.72),rgba(17,47,56,.8)); border-color: #3d8790; box-shadow: inset 0 1px rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.16); }
.component-side-menu a.active { border-left-color: #49d5d2; }
.component-side-menu a > span { display: none !important; }
.component-side-menu a strong { display: block !important; min-height: 18px; color: #effcff !important; font-size: 13px; line-height: 1.3; }
.component-menu-filters button { min-width: 92px; min-height: 30px; }
#componentSideMenu a[data-component-route="#managedPageSections"], #componentSideMenu a[data-component-route="#admin-dashboard"], #componentSideMenu a[data-component-route="#productSystemBuilder"] { display: none !important; }
.component-menu-filters button { border-color: #41616a; background: #182a32; color: #a8c8cc; }
.component-menu-filters button.is-active { border-color: #4ed9d5; background: linear-gradient(135deg,#168c91,#0b5e6b); color: #fff; box-shadow: 0 0 14px rgba(52,211,208,.2); }
.component-pages { background: radial-gradient(circle at 80% 0%,rgba(38,111,119,.2),transparent 32%),#eef5f5; }
.component-page-header, .hmap-explorer, .hmap-decision-board, .site-notes-board, .risk-board, .approval-pack { border-radius: 14px; box-shadow: 0 16px 34px rgba(8,34,42,.12), inset 0 1px rgba(255,255,255,.9); }
.hmap-explorer { position: relative; overflow: hidden; border: 1px solid #a7c9cd; background: linear-gradient(145deg,#f7ffff 0%,#e9f4f5 45%,#dcecee 100%); }
.hmap-explorer::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(rgba(21,102,111,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(21,102,111,.28) 1px,transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(135deg,#000,transparent 70%); }
.hmap-explorer > * { position: relative; }
.hmap-focus-toolbar, .location-share-card, .water-atlas-panel, .water-quick-test, .water-test-history, .kebs-investment-panel, .compliance-checklist-panel, .build-checklist-panel { border-radius: 10px; box-shadow: 0 8px 22px rgba(8,57,66,.08), inset 0 1px rgba(255,255,255,.9); }
.hmap-focus-toolbar { border-color: #86bfc3; background: rgba(238,251,251,.9); backdrop-filter: blur(10px); }
.hmap-focus-toolbar button, .button { border-radius: 7px; box-shadow: inset 0 1px rgba(255,255,255,.75),0 3px 8px rgba(8,57,66,.08); }
.hmap-focus-toolbar button[aria-pressed="true"], .button.primary { background: linear-gradient(135deg,#159ca0,#075d6b); box-shadow: 0 0 18px rgba(21,156,160,.22), inset 0 1px rgba(255,255,255,.3); }
.hmap-map-shell { border-radius: 10px; overflow: hidden; box-shadow: 0 12px 26px rgba(7,47,56,.18); }
.hmap-map-head { background: linear-gradient(90deg,#183841,#0d232a); color: #e8ffff; padding: 12px 14px; }
.hmap-map-head span { color: #9ec4c8; }
.hmap-map-stage { background: #15343d; }
.hmap-map-fallback { background: radial-gradient(circle at 58% 34%,#b7e1dc 0,#477d83 56%,#152f38 100%); }
.hmap-fallback-title { background: rgba(10,30,37,.86); color: #e9ffff; border: 1px solid #5ab4b6; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.hmap-town { border-color: #7be1d5; background: rgba(12,43,51,.86); color: #dffffc; }

.component-side-menu-head span,
.component-side-menu a span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.component-side-menu nav {
  display: grid;
  gap: 6px;
}

.component-side-menu a {
  display: grid;
  gap: 3px;
  min-height: 54px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink);
}

.component-side-menu a:hover,
.component-side-menu a.active {
  background: #eef5f7;
  border-color: var(--line);
}

.component-side-menu a.active {
  border-left: 4px solid var(--teal);
}

.component-side-menu a strong {
  font-size: 14px;
  line-height: 1.2;
}

.component-pages {
  min-width: 0;
}

.admin-dashboard-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px clamp(18px, 4vw, 52px);
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.admin-dashboard-link p {
  max-width: 720px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 0;
}

@media (max-width: 980px) {
  .component-app-shell {
    display: block;
  }

  .component-side-menu {
    position: sticky;
    top: 70px;
    height: auto;
    max-height: none;
    padding: 10px clamp(14px, 4vw, 24px);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .component-side-menu-head {
    display: none;
  }

  .component-side-menu nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .component-side-menu a {
    min-width: 148px;
  }

  .admin-dashboard-link {
    display: grid;
  }
}

/* Internal admin/content controls stay out of the public production shell. */
#admin-dashboard { display: none; }
#managedPageSections { display: none; }

#crm-workspace { display: none !important; }

/* Public site shell */
.public-site { background: #f7fafb; color: var(--ink); }
.public-header { position: sticky; top: 0; z-index: 20; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px clamp(20px, 5vw, 72px); background: rgba(247,250,251,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.public-header nav { display: flex; align-items: center; gap: 7px; }
.public-header nav a { padding: 9px 11px; font-size: 13px; font-weight: 800; color: var(--deep); }
.public-header nav a:hover { color: var(--teal); }
.public-header-workspace { border: 1px solid var(--deep); }
.public-hero, .public-section, .public-quote { width: min(1240px, calc(100% - 40px)); margin: 0 auto; }
.public-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); gap: clamp(28px, 6vw, 82px); align-items: center; min-height: 650px; padding: 72px 0; }
.public-hero h1 { max-width: 690px; margin: 14px 0 20px; font-size: clamp(42px, 6vw, 76px); line-height: .98; letter-spacing: -.055em; color: var(--deep); }
.public-hero-copy > p:not(.eyebrow) { max-width: 570px; color: var(--muted); font-size: 18px; line-height: 1.65; }
.public-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 30px 0; }
.public-proof { display: flex; flex-wrap: wrap; gap: 18px; color: var(--muted); font-size: 12px; }
.public-proof span { display: grid; gap: 3px; }
.public-proof strong { color: var(--deep); font-size: 13px; }
.public-hero-image { position: relative; min-height: 490px; display: grid; place-items: center; background: var(--deep); overflow: hidden; }
.public-hero-image::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.28); pointer-events: none; }
.public-hero-image img { width: 100%; height: 100%; min-height: 490px; object-fit: cover; opacity: .82; mix-blend-mode: screen; }
.public-section { padding: 82px 0; }
.public-section-tint { width: 100%; padding-left: max(20px, calc((100% - 1240px) / 2)); padding-right: max(20px, calc((100% - 1240px) / 2)); background: #eef5f7; }
.public-section-dark { width: 100%; padding-left: max(20px, calc((100% - 1240px) / 2)); padding-right: max(20px, calc((100% - 1240px) / 2)); background: var(--deep); color: #fff; }
.public-section-heading { max-width: 700px; margin-bottom: 32px; }
.public-section-heading h2, .public-quote h2 { margin: 8px 0 12px; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.035em; color: var(--deep); }
.public-section-dark .public-section-heading h2 { color: #fff; }
.public-section-heading > p:not(.eyebrow), .public-quote > div > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.public-card-grid, .public-system-grid, .public-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.public-card { min-height: 260px; padding: 26px; background: #fff; border: 1px solid var(--line); }
.public-card-index { color: var(--teal); font-size: 12px; font-weight: 900; }
.public-card h3, .public-system-card h3, .public-service-grid h3 { margin: 24px 0 9px; color: var(--deep); }
.public-card p, .public-system-card p, .public-service-grid p { color: var(--muted); line-height: 1.5; }
.public-card a, .public-system-card a { display: inline-block; margin-top: 14px; color: var(--teal); font-size: 13px; font-weight: 850; }
.public-system-card { display: grid; grid-template-rows: 220px 1fr; background: #fff; }
.public-system-card img { width: 100%; height: 220px; object-fit: cover; }
.public-system-card div { padding: 22px; }
.public-system-card div > span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.public-service-grid > div { padding-top: 18px; border-top: 2px solid var(--teal); }
.public-service-grid strong { color: var(--teal); }
.public-catalog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.25); }
.public-catalog-list span { padding: 18px; background: var(--deep); color: #fff; font-weight: 800; }
.button.light { background: #fff; color: var(--deep); border-color: #fff; display: inline-block; margin-top: 14px; }
.public-quote { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; padding-top: 90px; padding-bottom: 90px; }
.public-quote > div > a { color: var(--teal); font-weight: 800; line-height: 2; }
.public-quote form { display: grid; gap: 14px; padding: 26px; background: #fff; border: 1px solid var(--line); }
.public-quote label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 850; }
.public-quote input, .public-quote select, .public-quote textarea { width: 100%; min-height: 42px; border: 1px solid var(--line); padding: 10px; font: inherit; color: var(--ink); background: #fff; }
.public-quote textarea { resize: vertical; }
.public-quote-status { margin: 0; color: var(--teal); font-size: 13px; }.public-quote-status a{display:inline-block;margin-left:6px;color:var(--deep);font-weight:850;text-underline-offset:3px}
.public-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding: 24px max(20px, calc((100% - 1240px) / 2)); background: #10222b; color: rgba(255,255,255,.72); font-size: 12px; }
.public-footer a { color: #fff; }
@media (max-width: 820px) { .public-header { align-items: flex-start; } .public-header nav { display: none; } .public-hero, .public-quote { grid-template-columns: 1fr; } .public-hero { padding: 48px 0; } .public-hero-image { min-height: 330px; } .public-hero-image img { min-height: 330px; } .public-card-grid, .public-system-grid, .public-service-grid, .public-catalog-list { grid-template-columns: 1fr; } .public-section { padding: 58px 0; } }

/* Public motion and responsive interaction */
.public-menu-toggle { display: none; border: 1px solid var(--deep); background: transparent; color: var(--deep); padding: 9px 12px; font: inherit; font-size: 12px; font-weight: 850; }
.public-hero-image { isolation: isolate; }
.public-hero-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, rgba(0,143,159,.35), transparent 48%), repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 42px), repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 42px); }
.public-hero-orbit { position: absolute; z-index: 1; width: 360px; height: 360px; border: 1px solid rgba(142,238,255,.36); border-radius: 50%; animation: publicFloat 8s ease-in-out infinite; }
.public-orbit-one { transform: rotate(28deg) scaleX(.56); }
.public-orbit-two { width: 250px; height: 250px; transform: rotate(-35deg) scaleX(.56); animation-delay: -2.5s; border-color: rgba(255,255,255,.25); }
.public-live-panel { position: absolute; z-index: 3; right: 22px; bottom: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; width: 178px; padding: 14px; background: rgba(7,31,43,.88); border: 1px solid rgba(142,238,255,.4); color: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.25); backdrop-filter: blur(10px); animation: publicFloat 7s ease-in-out infinite reverse; }
.public-live-panel small, .public-live-panel > span, .public-live-panel div span { color: #8eeeff; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.public-live-panel strong { grid-column: 1 / -1; font-size: 22px; letter-spacing: -.04em; }
.public-live-panel div { display: grid; gap: 3px; }
.public-live-panel b { font-size: 12px; }
.public-live-dot { width: 7px; height: 7px; margin-right: -12px; border-radius: 50%; background: #5de2a4; box-shadow: 0 0 0 5px rgba(93,226,164,.14); }
.public-marquee { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; padding: 15px 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.public-marquee i { color: var(--teal); font-style: normal; }
body.public-site.reveal-ready [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
body.public-site.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
.public-card[data-reveal]:nth-child(2), .public-system-card[data-reveal]:nth-child(2) { transition-delay: .08s; }
.public-card[data-reveal]:nth-child(3), .public-system-card[data-reveal]:nth-child(3) { transition-delay: .16s; }
.public-card, .public-system-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.public-card:hover, .public-system-card:hover { transform: translateY(-7px); border-color: rgba(0,143,159,.45); box-shadow: 0 18px 40px rgba(17,52,64,.14); }
@keyframes publicFloat { 0%, 100% { translate: 0 -7px; } 50% { translate: 0 7px; } }
@keyframes publicReveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) { .public-header { position: sticky; } .public-menu-toggle { display: block; } .public-header nav.public-nav { position: absolute; top: 100%; left: 0; right: 0; z-index: 25; max-height: calc(100vh - 64px); overflow-y: auto; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px 16px; background: rgba(247,250,251,.98); border-bottom: 1px solid var(--line); box-shadow: 0 16px 28px rgba(17,52,64,.1); } .public-header nav.public-nav.is-open { display: flex; } .public-header nav.public-nav a { padding: 13px 4px; border-bottom: 1px solid var(--line); } .public-header nav.public-nav a:last-child { border-bottom: 0; margin-top: 6px; text-align: center; border: 1px solid var(--deep); } .public-live-panel { right: 12px; bottom: 12px; } .public-hero-orbit { width: 270px; height: 270px; } }
@media (prefers-reduced-motion: reduce) { body.public-site [data-reveal] { opacity: 1; transform: none; } *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } [data-reveal] { opacity: 1; transform: none; } }

.operator-mobile-checklist { display: grid; gap: 12px; background: #f7fbfb; }
.operator-checklist-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.operator-checklist-head h3, .operator-checklist-head p { margin: 0; }
.operator-checklist-head p { color: var(--muted); margin-top: 4px; }
.operator-checklist-head strong { color: var(--teal); white-space: nowrap; }
.operator-checklist-controls, .operator-checklist-summary, .operator-checklist-rows, .operator-release-gates { display: grid; gap: 10px; }
.operator-checklist-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.operator-checklist-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.operator-checklist-controls input, .operator-checklist-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }
.operator-checklist-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.operator-checklist-summary div { padding: 10px; background: #eaf7f8; border: 1px solid #c8e6e8; }
.operator-checklist-summary span, .operator-checklist-summary strong, .operator-check-row small, .operator-check-row b, .operator-release-gates span { display: block; }
.operator-checklist-summary span, .operator-check-row small, .operator-check-row b, .operator-release-gates span { color: var(--muted); font-size: 11px; }
.operator-checklist-summary strong { margin-top: 4px; color: var(--deep); }
.operator-checklist-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.operator-check-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: start; gap: 9px; padding: 12px; background: #fff; border: 1px solid #d8e1e5; border-left: 4px solid #c8871f; cursor: pointer; }
.operator-check-row.is-checked { border-left-color: #16805c; background: #f7fffb; }
.operator-check-row input { margin-top: 3px; accent-color: var(--teal); }
.operator-check-row strong { color: var(--deep); }
.operator-check-row b { color: #c8871f; font-weight: 850; }
.operator-check-row.is-checked b { color: #16805c; }
.operator-release-gates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.operator-release-gates article { padding: 10px; background: #fff; border: 1px solid #d8e1e5; }
.operator-release-gates article[data-status="warn"] { border-left: 4px solid #c8871f; background: #fffaf2; }
.operator-release-gates article[data-status="pass"] { border-left: 4px solid #16805c; }
.operator-release-gates strong { display: block; color: var(--deep); margin-top: 4px; }
.operator-release-gates p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
@media (max-width: 760px) { .operator-checklist-head { display: grid; } .operator-checklist-controls, .operator-checklist-summary, .operator-checklist-rows, .operator-release-gates { grid-template-columns: 1fr; } }

.machine-profitability-dashboard { display: grid; gap: 12px; background: #f7fbfb; }
.profitability-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.profitability-head h3, .profitability-head p { margin: 0; }
.profitability-head p { color: var(--muted); margin-top: 4px; }
.profitability-head strong { color: var(--teal); white-space: nowrap; }
.profitability-controls, .profitability-summary, .profitability-scenarios, .profitability-gates { display: grid; gap: 10px; }
.profitability-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profitability-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.profitability-controls input { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }
.profitability-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profitability-summary div, .profitability-scenarios article, .profitability-gates article { padding: 10px; background: #fff; border: 1px solid #d8e1e5; }
.profitability-summary span, .profitability-summary strong, .profitability-scenarios span, .profitability-scenarios strong, .profitability-scenarios p, .profitability-scenarios small, .profitability-gates span, .profitability-gates strong, .profitability-gates p { display: block; }
.profitability-summary span, .profitability-scenarios span, .profitability-scenarios p, .profitability-scenarios small, .profitability-gates span, .profitability-gates p { color: var(--muted); font-size: 12px; }
.profitability-summary strong { margin-top: 4px; color: var(--deep); font-size: 17px; }
.profitability-scenarios, .profitability-gates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profitability-scenarios article[data-status="base"] { border-top: 3px solid var(--teal); box-shadow: 0 8px 20px rgba(0,143,159,.09); }
.profitability-scenarios strong, .profitability-gates strong { color: var(--deep); margin-top: 4px; }
.profitability-scenarios p, .profitability-gates p { margin: 6px 0 0; }
.profitability-gates article[data-status="warn"] { border-left: 4px solid #c8871f; background: #fffaf2; }
.profitability-gates article[data-status="pass"] { border-left: 4px solid #16805c; }
@media (max-width: 760px) { .profitability-head { display: grid; } .profitability-controls, .profitability-summary, .profitability-scenarios, .profitability-gates { grid-template-columns: 1fr; } }

.firmware-ota-rollout { display: grid; gap: 12px; background: #f7fbfb; }
.ota-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.ota-head h3, .ota-head p { margin: 0; }
.ota-head p { color: var(--muted); margin-top: 4px; }
.ota-head strong { color: var(--teal); white-space: nowrap; }
.ota-controls, .ota-summary, .ota-wave-rows, .ota-release-gates { display: grid; gap: 10px; }
.ota-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ota-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.ota-controls input, .ota-controls select { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }
.ota-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ota-summary div, .ota-wave-rows article, .ota-release-gates article { padding: 10px; background: #fff; border: 1px solid #d8e1e5; }
.ota-summary span, .ota-summary strong, .ota-wave-rows span, .ota-wave-rows strong, .ota-wave-rows p, .ota-release-gates span, .ota-release-gates strong, .ota-release-gates p { display: block; }
.ota-summary span, .ota-wave-rows span, .ota-wave-rows p, .ota-release-gates span, .ota-release-gates p { color: var(--muted); font-size: 12px; }
.ota-summary strong { margin-top: 4px; color: var(--deep); font-size: 17px; }
.ota-wave-rows, .ota-release-gates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ota-wave-rows article[data-status="review"] { border-top: 3px solid var(--teal); }
.ota-wave-rows strong, .ota-release-gates strong { margin-top: 4px; color: var(--deep); }
.ota-wave-rows p, .ota-release-gates p { margin: 6px 0 0; }
.ota-release-gates article[data-status="warn"] { border-left: 4px solid #c8871f; background: #fffaf2; }
.ota-release-gates article[data-status="pass"] { border-left: 4px solid #16805c; }
@media (max-width: 760px) { .ota-head { display: grid; } .ota-controls, .ota-summary, .ota-wave-rows, .ota-release-gates { grid-template-columns: 1fr; } }

.fleet-health-monitor { display: grid; gap: 12px; background: #f7fbfb; }
.health-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.health-head h3, .health-head p { margin: 0; }
.health-head p { color: var(--muted); margin-top: 4px; }
.health-head strong { color: var(--teal); white-space: nowrap; }
.health-controls, .health-summary, .health-site-rows, .health-gates { display: grid; gap: 10px; }
.health-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.health-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.health-controls input { min-height: 38px; border: 1px solid #d8e1e5; padding: 8px; font: inherit; }
.health-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.health-summary div, .health-site-rows article, .health-gates article { padding: 10px; background: #fff; border: 1px solid #d8e1e5; }
.health-summary span, .health-summary strong, .health-site-rows span, .health-site-rows strong, .health-site-rows p, .health-site-rows small, .health-gates span, .health-gates strong, .health-gates p { display: block; }
.health-summary span, .health-site-rows span, .health-site-rows p, .health-site-rows small, .health-gates span, .health-gates p { color: var(--muted); font-size: 12px; }
.health-summary strong { margin-top: 4px; color: var(--deep); font-size: 17px; }
.health-site-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.health-site-rows article[data-status="urgent"], .health-gates article[data-status="warn"] { border-left: 4px solid #a84e33; background: #fff8f5; }
.health-site-rows article[data-status="watch"] { border-left: 4px solid #c8871f; background: #fffaf2; }
.health-site-rows article[data-status="healthy"], .health-gates article[data-status="pass"] { border-left: 4px solid #16805c; }
.health-site-rows strong, .health-gates strong { margin-top: 4px; color: var(--deep); }
.health-site-rows p, .health-gates p { margin: 6px 0 0; }
.health-gates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .health-head { display: grid; } .health-controls, .health-summary, .health-site-rows, .health-gates { grid-template-columns: 1fr; } }

.technician-visit-calendar { display: grid; gap: 12px; background: #f7fbfb; }
.visit-head { display:flex; justify-content:space-between; gap:12px; align-items:start; }.visit-head h3,.visit-head p{margin:0}.visit-head p{color:var(--muted);margin-top:4px}.visit-head strong{color:var(--teal);white-space:nowrap}
.visit-controls,.visit-summary,.visit-calendar-rows,.visit-capacity-gates{display:grid;gap:10px}.visit-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.visit-controls label{display:grid;gap:5px;color:var(--muted);font-size:12px;font-weight:850}.visit-controls input{min-height:38px;border:1px solid #d8e1e5;padding:8px;font:inherit}.visit-summary{grid-template-columns:repeat(4,minmax(0,1fr))}.visit-summary div,.visit-calendar-rows article,.visit-capacity-gates article{padding:10px;background:#fff;border:1px solid #d8e1e5}.visit-summary span,.visit-summary strong,.visit-calendar-rows span,.visit-calendar-rows strong,.visit-calendar-rows p,.visit-calendar-rows small,.visit-capacity-gates span,.visit-capacity-gates strong,.visit-capacity-gates p{display:block}.visit-summary span,.visit-calendar-rows span,.visit-calendar-rows p,.visit-calendar-rows small,.visit-capacity-gates span,.visit-capacity-gates p{color:var(--muted);font-size:12px}.visit-summary strong,.visit-calendar-rows strong,.visit-capacity-gates strong{margin-top:4px;color:var(--deep)}.visit-calendar-rows{grid-template-columns:repeat(3,minmax(0,1fr))}.visit-calendar-rows p,.visit-capacity-gates p{margin:6px 0 0}.visit-calendar-rows article[data-status="urgent"],.visit-capacity-gates article[data-status="warn"]{border-left:4px solid #a84e33;background:#fff8f5}.visit-calendar-rows article[data-status="watch"]{border-left:4px solid #c8871f;background:#fffaf2}.visit-capacity-gates{grid-template-columns:repeat(3,minmax(0,1fr))}.visit-capacity-gates article[data-status="pass"]{border-left:4px solid #16805c}@media(max-width:760px){.visit-head{display:grid}.visit-controls,.visit-summary,.visit-calendar-rows,.visit-capacity-gates{grid-template-columns:1fr}}

.workspace-launch-overview { margin: 0 0 26px; padding: clamp(22px, 4vw, 42px); background: linear-gradient(135deg, #10222b 0%, #164b59 68%, #008f9f 100%); color: #fff; }
.workspace-launch-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; max-width: 900px; margin-bottom: 26px; }
.workspace-launch-head h1 { margin: 6px 0 10px; font-size: clamp(30px, 4vw, 52px); letter-spacing: -.045em; }
.workspace-launch-head p:not(.eyebrow) { max-width: 590px; margin: 0; color: #c9e4e7; line-height: 1.55; }
.workspace-launch-head .eyebrow { color: #8eeeff; margin: 0; }
.workspace-launch-head .button { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
.workspace-completion-dashboard { margin:0 0 16px; padding:18px; background:#fff; color:#12343b; border:1px solid rgba(142,238,255,.35); border-radius:14px; box-shadow:0 10px 28px rgba(5,24,31,.16); }
.workspace-completion-head { display:flex; justify-content:space-between; gap:16px; align-items:start; margin-bottom:14px; }
.workspace-completion-head .eyebrow { margin:0; color:#16818f; }
.workspace-completion-head h2 { margin:3px 0; font-size:22px; color:#12343b; }
.workspace-completion-head p { margin:0; color:#547078; font-size:12px; }
.workspace-completion-score { min-width:82px; padding:10px; text-align:center; border:1px solid #b9e8e9; border-radius:12px; background:#effcfc; }
.workspace-completion-score strong { display:block; color:#087f8d; font-size:26px; line-height:1; }
.workspace-completion-score span { color:#547078; font-size:10px; text-transform:uppercase; font-weight:800; }
.workspace-completion-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.workspace-completion-metric { display:grid; gap:5px; min-height:92px; padding:12px; border:1px solid #d9e7e8; border-top:4px solid #9abfc3; border-radius:9px; background:#fbfefe; }
.workspace-completion-metric[data-state="ready"] { border-top-color:#35b781; }
.workspace-completion-metric[data-state="open"] { border-top-color:#e4ae64; }
.workspace-completion-metric span { color:#547078; font-size:10px; text-transform:uppercase; font-weight:850; letter-spacing:.04em; }
.workspace-completion-metric strong { color:#12343b; font-size:14px; overflow-wrap:anywhere; }
.workspace-completion-metric small { color:#547078; font-size:11px; line-height:1.35; }
.workspace-completion-next { display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid #e0ecec; }
.workspace-completion-next span { color:#547078; font-size:10px; text-transform:uppercase; font-weight:850; }
.workspace-completion-next strong { flex:1; color:#12343b; font-size:13px; }
@media (max-width:800px) { .workspace-completion-metrics { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .workspace-completion-head,.workspace-completion-next { display:grid; } .workspace-completion-metrics { grid-template-columns:1fr; } .workspace-completion-next .button { width:100%; } }
.workspace-completion-dashboard{margin:0 0 16px;padding:18px;background:#fff;color:#12343b;border:1px solid #b9e8e9;border-radius:14px;box-shadow:0 10px 28px rgba(5,24,31,.16)}.workspace-completion-head{display:flex;justify-content:space-between;gap:16px;align-items:start;margin-bottom:14px}.workspace-completion-head .eyebrow{margin:0;color:#16818f}.workspace-completion-head h2{margin:3px 0;font-size:22px;color:#12343b}.workspace-completion-head p{margin:0;color:#547078;font-size:12px}.workspace-completion-score{min-width:82px;padding:10px;text-align:center;border:1px solid #b9e8e9;border-radius:12px;background:#effcfc}.workspace-completion-score strong{display:block;color:#087f8d;font-size:26px;line-height:1}.workspace-completion-score span{color:#547078;font-size:10px;text-transform:uppercase;font-weight:800}.workspace-completion-score i{display:block;height:5px;margin-top:7px;border-radius:99px;background:linear-gradient(90deg,#16818f var(--completion,0%),#d8eeee var(--completion,0%))}.workspace-completion-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.workspace-completion-metric{display:grid;gap:5px;min-height:92px;padding:12px;text-align:left;border:1px solid #d9e7e8;border-top:4px solid #9abfc3;border-radius:9px;background:#fbfefe;font:inherit;cursor:pointer}.workspace-completion-metric[data-state="ready"]{border-top-color:#35b781}.workspace-completion-metric[data-state="open"]{border-top-color:#e4ae64}.workspace-completion-metric span{color:#547078;font-size:10px;text-transform:uppercase;font-weight:850}.workspace-completion-metric strong{color:#12343b;font-size:14px}.workspace-completion-metric small{color:#547078;font-size:11px;line-height:1.35}.workspace-completion-next{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid #e0ecec}.workspace-completion-next span{color:#547078;font-size:10px;text-transform:uppercase;font-weight:850}.workspace-completion-next strong{flex:1;color:#12343b;font-size:13px}@media(max-width:800px){.workspace-completion-metrics{grid-template-columns:1fr 1fr}}@media(max-width:480px){.workspace-completion-head,.workspace-completion-next{display:grid}.workspace-completion-metrics{grid-template-columns:1fr}.workspace-completion-next .button{width:100%}}
.workspace-delivery-flow{display:flex;gap:6px;align-items:stretch;margin-top:14px;overflow:auto;padding:2px 0 5px}.workspace-flow-step{display:grid;grid-template-columns:auto 1fr;gap:6px;min-width:125px;padding:8px;text-align:left;border:1px solid #d9e7e8;border-radius:8px;background:#fbfefe;font:inherit;cursor:pointer}.workspace-flow-step i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff0df;color:#9a5a16;font-style:normal;font-size:10px;font-weight:900}.workspace-flow-step[data-state="ready"] i{background:#d8f3e8;color:#16835c}.workspace-flow-step strong{display:block;color:#12343b;font-size:10px}.workspace-flow-step small{display:block;color:#547078;font-size:9px;margin-top:2px}.workspace-flow-arrow{display:grid;place-items:center;color:#9abfc3;font-size:14px;min-width:10px}
.workspace-remaining-work{margin-top:14px;padding-top:13px;border-top:1px solid #e0ecec}.workspace-remaining-work-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}.workspace-remaining-work-head strong{color:#12343b;font-size:13px}.workspace-remaining-work-head span{color:#547078;font-size:10px;text-transform:uppercase;font-weight:850}.workspace-remaining-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.workspace-remaining-item{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;padding:9px;text-align:left;border:1px solid #d9e7e8;border-radius:8px;background:#fbfefe;font:inherit;cursor:pointer}.workspace-remaining-item i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff0df;color:#9a5a16;font-style:normal;font-size:11px;font-weight:900}.workspace-remaining-item[data-state="ready"] i{background:#d8f3e8;color:#16835c}.workspace-remaining-item strong{display:block;color:#12343b;font-size:11px}.workspace-remaining-item small{display:block;margin-top:2px;color:#547078;font-size:10px;line-height:1.3}@media(max-width:900px){.workspace-remaining-list{grid-template-columns:1fr 1fr}}@media(max-width:480px){.workspace-remaining-list{grid-template-columns:1fr}}
.workspace-launch-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0 8px;color:#c9e4e7;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.workspace-launch-filters{display:flex;gap:5px;flex-wrap:wrap}.workspace-launch-filters button{border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:5px 9px;color:#d9f2f3;background:transparent;font:inherit;font-size:10px;cursor:pointer}.workspace-launch-filters button.is-active,.workspace-launch-filters button:hover{color:#08232b;background:#8eeeff;border-color:#8eeeff}@media(max-width:480px){.workspace-launch-toolbar{display:grid;justify-content:stretch}.workspace-launch-filters{display:grid;grid-template-columns:repeat(4,1fr)}}
.workspace-launch-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.workspace-launch-card { display: grid; gap: 8px; min-height: 170px; padding: 17px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.workspace-launch-card:hover { transform: translateY(-5px); background: rgba(255,255,255,.17); border-color: #8eeeff; }
.workspace-launch-card:first-child { border-color:#f4d36e; background:linear-gradient(145deg,rgba(244,211,110,.2),rgba(255,255,255,.08)); }
.workspace-launch-card span { color: #8eeeff; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.workspace-launch-card strong { font-size: 18px; }
.workspace-launch-card p { margin: 0; color: #c9e4e7; font-size: 12px; line-height: 1.45; }
.workspace-launch-card b { align-self: end; color: #fff; font-size: 12px; }
@media (max-width: 800px) { .workspace-launch-head { display: grid; } .workspace-launch-cards { grid-template-columns: 1fr; } .workspace-launch-card { min-height: 132px; } }

.workspace-build-board { margin-top: 18px; padding: 16px; background: rgba(5,24,31,.42); border: 1px solid rgba(142,238,255,.25); border-radius: 14px; }
.workspace-build-board-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.workspace-build-board-head .eyebrow { margin:0; color:#8eeeff; }
.workspace-build-board-head h2 { margin:3px 0 0; color:#fff; font-size:18px; }
.workspace-build-board-head p { margin:4px 0 0; color:#c9e4e7; font-size:11px; }
.workspace-build-board-tools { display:grid; justify-items:end; gap:7px; }
.workspace-build-board-head > .workspace-build-board-tools > strong { color:#f4d36e; font-size:12px; white-space:nowrap; }
.workspace-build-board-filters { display:flex; gap:5px; }
.workspace-build-board-filters button { border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:5px 9px; color:#d9f2f3; background:transparent; font:inherit; font-size:10px; cursor:pointer; }
.workspace-build-board-filters button:hover,.workspace-build-board-filters button.is-active { color:#08232b; background:#8eeeff; border-color:#8eeeff; }
.workspace-build-board-stages { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.workspace-build-stage { display:grid; gap:5px; min-height:92px; padding:11px; text-align:left; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:10px; cursor:pointer; font:inherit; transition:transform .2s ease, border-color .2s ease, background .2s ease; }
.workspace-build-stage[hidden] { display:none !important; }
.workspace-build-empty{display:grid;gap:5px;grid-column:1/-1;padding:14px;border:1px solid #65d6a4;border-radius:10px;background:rgba(101,214,164,.12);color:#fff}.workspace-build-empty strong{font-size:13px}.workspace-build-empty small{color:#c9e4e7;font-size:11px}.workspace-build-empty a{color:#8eeeff;font-size:11px;font-weight:850;text-decoration:none}
.workspace-build-stage:hover,.workspace-build-stage:focus-visible { transform:translateY(-2px); border-color:#8eeeff; background:rgba(255,255,255,.14); outline:none; }
.workspace-build-stage[data-state="ready"] { border-color:#65d6a4; }
.workspace-build-stage[data-state="blocked"] { border-color:#e5b27d; }
.workspace-build-stage[data-build-group="plan"] { border-left:3px solid #8eeeff; }
.workspace-build-stage[data-build-group="build"] { border-left:3px solid #65d6a4; }
.workspace-build-stage[data-build-group="release"] { border-left:3px solid #f4d36e; }

.workspace-build-stage span { color:#9ed4d8; font-size:10px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.workspace-build-stage strong { font-size:14px; }
.workspace-build-stage small { color:#c9e4e7; font-size:11px; line-height:1.35; }
.workspace-build-stage b { color:#f4d36e; font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
@media (max-width:800px) { .workspace-build-board-stages { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .workspace-build-board { padding:12px; } .workspace-build-board-stages { grid-template-columns:1fr; } .workspace-build-board-head { align-items:start; display:grid; } }
.workspace-launch-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.workspace-command-button { min-height: 40px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.workspace-command-button kbd { margin-left: 8px; color: #8eeeff; font-size: 10px; }
.workspace-command-palette { position: fixed; inset: 0; z-index: 80; display: none; align-items: start; justify-content: center; padding: 12vh 20px 20px; }
.workspace-command-palette.is-open { display: flex; }
.workspace-command-backdrop { position: absolute; inset: 0; background: rgba(8,25,34,.58); backdrop-filter: blur(4px); }
.workspace-command-dialog { position: relative; width: min(620px, 100%); padding: 18px; background: #fff; border: 1px solid #d8e1e5; box-shadow: 0 28px 70px rgba(8,25,34,.3); }
.workspace-command-dialog-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 14px; }.workspace-command-dialog-head span{color:var(--teal);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.1em}.workspace-command-dialog-head h2{margin:5px 0 0;color:var(--deep)}.workspace-command-dialog-head button{border:1px solid var(--line);background:#f3f7f8;color:var(--muted);padding:7px 10px;font:inherit;font-size:11px}
.workspace-command-dialog > input { width: 100%; min-height: 44px; border: 1px solid #bfd8dd; padding: 10px; font: inherit; }
.workspace-command-results { display: grid; gap: 6px; max-height: 390px; margin-top: 12px; overflow: auto; }.workspace-command-results a{display:grid;grid-template-columns:1fr auto;gap:3px;padding:12px;border:1px solid transparent;color:var(--deep)}.workspace-command-results a:hover{background:#eef7f7;border-color:#cfe2e5}.workspace-command-results span{color:var(--muted);font-size:12px}.workspace-command-results b{grid-column:2;grid-row:1 / span 2;color:var(--teal)}.workspace-command-empty{color:var(--muted);font-size:13px}
@media (max-width: 800px) { .workspace-launch-actions { display: grid; } .workspace-command-button { width: 100%; } }

.public-category-section { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 82px 0; }
.public-category-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: -8px 0 24px; }
.public-category-filters button { min-height: 36px; padding: 8px 12px; border: 1px solid var(--line); background: #fff; color: var(--muted); font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.public-category-filters button:hover, .public-category-filters button.is-active { border-color: var(--teal); background: var(--teal); color: #fff; }
.public-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.public-category-card { overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.public-category-card:hover { transform: translateY(-5px); border-color: rgba(0,143,159,.48); box-shadow: 0 16px 34px rgba(17,52,64,.12); }
.public-category-card img { display: block; width: 100%; height: 145px; object-fit: cover; background: #eef5f7; }
.public-category-card { display: flex; flex-direction: column; } .public-category-card > div { display: flex; flex: 1; flex-direction: column; padding: 15px; }.public-category-card span { color: var(--teal); font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }.public-category-card h3 { margin: 9px 0 7px; color: var(--deep); font-size: 16px; }.public-category-card p { min-height: 54px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }.public-category-card a { display: flex; justify-content: space-between; margin-top: 13px; color: var(--teal); font-size: 12px; font-weight: 850; }.public-category-loading { color: var(--muted); font-size: 13px; }
@media (max-width: 980px) { .public-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .public-category-grid { grid-template-columns: 1fr; } .public-category-section { padding: 58px 0; } }

.public-product-showcase { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 82px 0; }
.public-product-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: -8px 0 24px; }.public-product-filters button { min-height: 36px; padding: 8px 12px; border: 1px solid var(--line); background: #fff; color: var(--muted); font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }.public-product-filters button:hover,.public-product-filters button.is-active{border-color:var(--teal);background:var(--teal);color:#fff}
.public-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }.public-product-card { overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }.public-product-card:hover { transform: translateY(-5px); border-color: rgba(0,143,159,.48); box-shadow: 0 16px 34px rgba(17,52,64,.12); }.public-product-card img { display:block;width:100%;height:170px;object-fit:cover;background:#eef5f7; }.public-product-badges{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.public-product-badges b,.public-product-badges span{display:inline-flex!important;padding:4px 7px;border-radius:999px;font-size:9px!important;line-height:1;text-transform:none!important;letter-spacing:0!important}.public-product-badges b{background:#e2f6f3;color:#087d79!important}.public-product-badges span{background:#fff3d8;color:#98610c!important}
.public-product-card { display: flex; flex-direction: column; } .public-product-card > div { display: flex; flex: 1; flex-direction: column; padding:15px; }.public-product-card span { color:var(--teal);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.06em; }.public-product-card h3 { min-height:42px;margin:8px 0;color:var(--deep);font-size:16px; }.public-product-card strong { color:var(--deep);font-size:17px; }.public-product-card p { min-height:35px;color:var(--muted);font-size:12px;line-height:1.4; }.public-product-card a { display:flex;justify-content:space-between;color:var(--teal);font-size:12px;font-weight:850; }
@media (max-width: 980px) { .public-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }.public-product-showcase { background: #fff; }
@media (max-width: 560px) { .public-product-grid { grid-template-columns: 1fr; } .public-product-showcase { padding: 58px 0; } }

.public-product-toolbar { display: grid; gap: 14px; margin: -8px 0 24px; }.public-product-search { display: grid; gap: 6px; max-width: 460px; color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }.public-product-search input { min-height: 42px; border: 1px solid var(--line); padding: 10px 12px; font: inherit; color: var(--ink); background: #fff; }.public-product-filters { margin: 0; }

.public-product-toolbar-row { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; }.public-product-sort { display: grid; gap: 6px; min-width: 190px; color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }.public-product-sort select { min-height: 42px; border: 1px solid var(--line); padding: 10px 12px; font: inherit; color: var(--ink); background: #fff; }.public-product-result-count { margin-left: auto; padding-bottom: 12px; color: var(--muted); font-size: 12px; font-weight: 800; }
@media (max-width: 560px) { .public-product-toolbar-row { display: grid; } .public-product-sort { width: 100%; } .public-product-result-count { margin-left: 0; padding-bottom: 0; } }

.public-product-card-actions { margin-top: auto; padding:0!important; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-top:14px; }.public-product-card-actions a { margin:0; }.public-product-quickview { padding:0; border:0; background:transparent; color:var(--teal); font:inherit; font-size:12px; font-weight:850; cursor:pointer; }.public-product-modal { position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; padding:20px; }.public-product-modal.is-open { display:flex; }.public-product-modal-backdrop { position:absolute; inset:0; background:rgba(8,25,34,.62); backdrop-filter:blur(4px); }.public-product-modal-dialog { position:relative; width:min(760px,100%); max-height:90vh; overflow:auto; padding:24px; background:#fff; box-shadow:0 30px 80px rgba(8,25,34,.32); }.public-product-modal-close { position:absolute; top:10px; right:12px; width:32px; height:32px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:22px; cursor:pointer; }.public-product-modal-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:25px; align-items:center; }.public-product-modal-layout img { width:100%; height:300px; object-fit:cover; background:#eef5f7; }.public-product-modal-layout span { color:var(--teal); font-size:11px; font-weight:850; text-transform:uppercase; }.public-product-modal-layout h2 { margin:8px 0; color:var(--deep); }.public-product-modal-layout strong { color:var(--deep); font-size:20px; }.public-product-modal-layout p { color:var(--muted); line-height:1.5; }.public-product-modal-layout .button { display:inline-block; margin:7px 6px 0 0; }.public-product-modal-layout .button.secondary { background:#eef5f7; color:var(--deep); }@media (max-width:620px){.public-product-modal-layout{grid-template-columns:1fr}.public-product-modal-layout img{height:210px}}

.public-product-compare { padding:0; border:0; background:transparent; color:var(--muted); font:inherit; font-size:11px; font-weight:850; cursor:pointer; }.public-product-compare:hover{color:var(--teal)}.public-compare-bar{position:fixed;left:50%;bottom:18px;z-index:70;display:none;grid-template-columns:1fr auto auto;align-items:center;gap:14px;width:min(720px,calc(100% - 30px));padding:13px 15px;transform:translateX(-50%);background:#10222b;color:#fff;box-shadow:0 18px 50px rgba(8,25,34,.3)}.public-compare-bar.is-open{display:grid}.public-compare-bar span{display:block;color:#b9d4d8;font-size:12px;margin-top:3px}.public-compare-bar .button{min-height:34px;padding:7px 10px}.public-compare-bar .button.secondary{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}.public-compare-table{overflow:auto}.public-compare-row{display:grid;grid-template-columns:140px repeat(3,minmax(150px,1fr));border-bottom:1px solid var(--line)}.public-compare-row>*{padding:12px;border-right:1px solid var(--line);color:var(--muted);font-size:12px}.public-compare-row span{font-weight:850;color:var(--deep)}.public-compare-head strong{color:var(--deep);font-size:13px}.public-compare-row b{font-weight:750}@media(max-width:620px){.public-compare-bar{grid-template-columns:1fr auto;gap:8px}.public-compare-bar .button.secondary{grid-column:2}.public-compare-table{margin:0 -10px}}

.public-compare-modal { isolation: isolate; }.public-compare-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.public-compare-actions .button{min-height:38px}@media(max-width:620px){.public-compare-actions{justify-content:stretch}.public-compare-actions .button{width:100%}}

.public-contact-fab { position:fixed;right:22px;bottom:22px;z-index:65;display:flex;align-items:center;gap:9px;padding:12px 15px;border-radius:999px;background:#16805c;color:#fff;font-size:12px;font-weight:850;box-shadow:0 12px 28px rgba(22,128,92,.3);animation:publicPulse 3s ease-in-out infinite }.public-contact-icon{display:grid;place-items:center;width:20px;height:20px;border:1px solid rgba(255,255,255,.6);border-radius:50%;font-size:13px}.public-contact-fab:hover{background:#0e6748;transform:translateY(-3px)}@keyframes publicPulse{0%,100%{box-shadow:0 12px 28px rgba(22,128,92,.3)}50%{box-shadow:0 12px 34px rgba(22,128,92,.52)}}@media(max-width:560px){.public-contact-fab{right:14px;bottom:14px}.public-contact-fab span:last-child{display:none}.public-contact-fab{width:46px;height:46px;justify-content:center;padding:0}}@media(prefers-reduced-motion: reduce){.public-contact-fab{animation:none}}

.circuit-studio-nav a.is-active{background:var(--deep);border-color:var(--deep);color:#fff}

.circuit-layout > *{scroll-margin-top:132px}

@media(max-width:560px){.circuit-board form{grid-template-columns:1fr!important}.circuit-board form label{min-width:0}}

.circuit-studio-nav span{margin-left:auto;align-self:center;color:var(--muted);font-size:11px;font-weight:800}@media(max-width:760px){.circuit-studio-nav span{display:none}}

.circuit-export-status{margin:0;color:var(--muted);font-size:11px;line-height:1.4}

.circuit-module-search{display:flex;align-items:center;gap:7px;margin-left:auto;color:var(--muted);font-size:10px;font-weight:850;text-transform:uppercase}.circuit-module-search input{width:170px;min-height:34px;padding:7px 9px;border:1px solid var(--line);border-radius:999px;font:inherit;color:var(--deep);text-transform:none}.circuit-module-search input:focus{outline:2px solid var(--teal);outline-offset:1px}.circuit-module-hidden{display:none!important}@media(max-width:760px){.circuit-module-search{margin-left:0;flex:1}.circuit-module-search input{width:100%}}

.circuit-module-empty{margin:0;padding:12px 14px;border:1px dashed var(--line);background:#fff;color:var(--muted);font-size:12px}

.circuit-search-clear{min-height:28px;padding:4px 8px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font:inherit;font-size:10px;font-weight:850;cursor:pointer}.circuit-search-clear:hover{border-color:var(--teal);color:var(--teal)}

.circuit-search-clear:disabled{opacity:.45;cursor:not-allowed}

.circuit-module-search small{color:var(--muted);font-size:10px;font-weight:700;text-transform:none;white-space:nowrap}
@media(max-width:760px){.circuit-module-search small{display:none}}

.admin-audit-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.admin-audit-panel-head h3{margin:0}.admin-audit-search{display:grid;gap:6px}.admin-audit-search input{min-height:36px;padding:8px;border:1px solid var(--line);font:inherit}

.admin-audit-panel-head>div{display:flex;align-items:center;gap:10px}.admin-audit-refresh{min-height:32px;padding:6px 10px}

.admin-audit-toolbar{display:grid;grid-template-columns:1fr minmax(180px,260px);gap:10px}.admin-audit-toolbar .admin-audit-search{min-width:0}@media(max-width:620px){.admin-audit-toolbar{grid-template-columns:1fr}}


/* Small-screen workspace polish */
@media (max-width: 560px) {
  .workspace-command-palette { padding: 10px; }
  .workspace-command-dialog { width: 100%; padding: 14px; }
  .workspace-command-dialog-head { display: grid; grid-template-columns: 1fr auto; align-items: start; }
  .workspace-command-results { max-height: calc(100vh - 210px); }
  .circuit-module-search { min-width: min(260px, calc(100vw - 32px)); }
  .circuit-module-search input { min-width: 0; }
}


/* Small-screen public conversion flow */
@media (max-width: 560px) {
  .public-category-filters { flex-wrap: nowrap; overflow-x: auto; margin-right: -10px; padding: 2px 10px 8px 0; scrollbar-width: thin; }
  .public-category-filters button { white-space: nowrap; flex: 0 0 auto; }
  .public-quote form { padding: 18px; }
  .public-quote form .button { width: 100%; }
  .public-quote > div > a { display: block; line-height: 1.6; }
}


@media (max-width: 480px) {
  .public-header { gap: 10px; padding: 12px 14px; }
  .public-header .brand strong { font-size: 13px; }
  .public-header .brand small { font-size: 9px; }
  .public-menu-toggle { white-space: nowrap; padding: 8px 10px; }
}


.public-category-card-actions { padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.public-category-card-actions a { margin-top: 0; }
@media (max-width: 560px) { .public-category-card-actions { display: grid; } .public-category-card-actions a { width: 100%; } }


.public-quote-draft-status { margin: -4px 0 0; color: var(--teal); font-size: 11px; }
.public-quote-clear { justify-self: start; border: 0; padding: 0; background: transparent; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.public-quote-clear:hover { color: var(--deep); }


/* Final Circuit Studio alignment contract */
@media (min-width: 961px) {
  .circuit-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr); align-items: start; }
  .circuit-output { position: sticky; top: 108px; max-height: calc(100vh - 128px); overflow: auto; align-self: start; }
}
@media (max-width: 960px) {
  .circuit-layout { grid-template-columns: 1fr; }
  .circuit-output { position: static; max-height: none; overflow: visible; }
}


.component-page-hidden { display: none !important; }
.component-pages > section { min-width: 0; }


@keyframes componentPageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.component-pages > section.component-page-active { animation: componentPageIn .36s ease both; }
@media (prefers-reduced-motion: reduce) { .component-pages > section.component-page-active { animation: none; } }


/* Component page spacing contract */
.component-pages { display: grid; gap: 24px; min-width: 0; padding: 24px clamp(16px, 3vw, 42px) 72px; overflow: visible; }
.component-pages > section { width: 100%; max-width: 1280px; min-width: 0; margin: 0 auto; }
.component-pages > section,
.component-pages [id] { scroll-margin-top: 124px; }
.component-pages > section.component-page-hidden { display: none !important; }
.component-pages .machine-studio,
.component-pages .circuit-studio,
.component-pages .quote-request,
.component-pages .catalog { width: 100%; max-width: 1280px; margin: 0 auto; }
.component-pages .studio-layout,
.component-pages .circuit-layout { min-width: 0; width: 100%; }
@media (max-width: 980px) { .component-pages { padding: 18px 14px 52px; gap: 18px; } }
@media (max-width: 620px) { .component-pages { padding: 14px 10px 42px; gap: 14px; } }


.component-page-header { display: flex; align-items: end; justify-content: space-between; gap: 18px; width: 100%; max-width: 1280px; margin: 0 auto; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); animation: componentPageIn .36s ease both; }
.component-page-header > div { min-width: 0; }
.component-page-header span { color: var(--teal); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.component-page-header h1 { margin: 6px 0 0; color: var(--deep); font-size: clamp(24px, 3vw, 36px); line-height: 1.05; }
.component-page-header p { margin: 7px 0 0; color: var(--muted); line-height: 1.45; }
.component-page-header-hidden { display: none; }
@media (max-width: 620px) { .component-page-header { display: grid; align-items: start; padding: 16px; } .component-page-header .button { width: 100%; } }


@keyframes componentPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.component-page-active > * { animation: componentPanelIn .32s ease both; }
.component-page-active > *:nth-child(2) { animation-delay: .05s; }
.component-page-active > *:nth-child(3) { animation-delay: .1s; }
.component-page-active > *:nth-child(4) { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) { .component-page-active > * { animation: none; } }


/* Final Studio readability contract */
.plc-output { grid-template-columns: minmax(0, 1fr); }
.plc-output > *, .circuit-output > * { min-width: 0; }
.plc-output .studio-summary, .plc-output > .firmware-lab, .plc-output > .firmware-block-builder, .plc-output > .sensor-calibration-lab, .plc-output > .hmi-touchscreen-designer { grid-column: 1 / -1; }
.tinker-output { grid-template-columns: minmax(0, 1fr); }
.tinker-output > * { min-width: 0; }
.circuit-output { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; }
.circuit-output > * { grid-column: 1 / -1; }
@media (max-width: 1120px) {
  .plc-output, .tinker-output, .circuit-output { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .component-pages .studio-head, .component-pages .circuit-studio-nav { margin-left: 0; margin-right: 0; }
  .component-pages .studio-stage, .component-pages .circuit-board, .component-pages .circuit-output { padding: 12px; }
  .component-pages .plc-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .component-pages .plc-board { grid-template-columns: 1fr; }
  .component-pages .studio-head h2 { font-size: 22px; }
  .component-pages .studio-head p:not(.eyebrow) { font-size: 12px; }
}


/* PLC Studio section navigation */
.plc-studio-nav {
  position: sticky;
  top: 82px;
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  background: linear-gradient(180deg, var(--surface) 78%, transparent);
}
.plc-studio-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--deep);
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}
.plc-studio-nav a:hover, .plc-studio-nav a:focus-visible, .plc-studio-nav a.is-active {
  border-color: var(--teal);
  background: var(--deep);
  color: #fff;
  outline: none;
}
@media (max-width: 760px) {
  .plc-studio-nav { position: static; flex-wrap: nowrap; overflow-x: auto; padding: 8px 0; scrollbar-width: thin; }
  .plc-studio-nav a { flex: 0 0 auto; white-space: nowrap; }
}


/* Final Controller & PCB grid-area contract */
.component-pages #circuitModuleGrid {
  grid-template-areas:
    "circuit output"
    "pcb output"
    "footprint output"
    "smt output"
    "dfm output"
    "jig output"
    "burnin output"
    "traveler output"
    "quote output"
    "po output"
    "handover output"
    "servicecontract output"
    "fleet output"
    "telemetrycash output"
    "dispatchscheduler output"
    "visit output"
    "health output"
    "ota output"
    "profitability output"
    "operator output"
    "breadboard output";
}
.component-pages #fleetDispatchScheduler { grid-area: dispatchscheduler; }
.component-pages #technicianVisitCalendar { grid-area: visit; }
.component-pages #fleetHealthMonitor { grid-area: health; }
.component-pages #firmwareOtaRollout { grid-area: ota; }
.component-pages #machineProfitabilityDashboard { grid-area: profitability; }
.component-pages #operatorMobileChecklist { grid-area: operator; }
@media (max-width: 960px) {
  .component-pages #circuitModuleGrid { grid-template-areas: none; display: grid; grid-template-columns: minmax(0, 1fr); }
  .component-pages #circuitModuleGrid > * { grid-area: auto !important; }
}


/* Focused Circuit Studio workbench */
.component-pages #circuitModuleGrid.circuit-focus-mode > .circuit-board.circuit-focus-hidden {
  display: none !important;
}
.component-pages #circuitModuleGrid.circuit-focus-mode {
  grid-template-areas: "focus output";
}
.component-pages #circuitModuleGrid.circuit-focus-mode > .circuit-board:not(.circuit-focus-hidden) {
  grid-area: focus !important;
  animation: componentPanelIn .28s ease both;
}
@media (max-width: 960px) {
  .component-pages #circuitModuleGrid.circuit-focus-mode { grid-template-areas: none; }
  .component-pages #circuitModuleGrid.circuit-focus-mode > .circuit-board:not(.circuit-focus-hidden) { grid-area: auto !important; }
}


/* Focused PLC Studio workbench */
.component-pages .plc-output.plc-focus-mode > .plc-focus-hidden {
  display: none !important;
}
.component-pages .plc-output.plc-focus-mode > :not(.plc-focus-hidden) {
  animation: componentPanelIn .28s ease both;
}


/* Workstream flow indicator */
.component-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}
.component-flow a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 5px 9px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fcfd;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}
.component-flow a::after { content: "→"; margin-left: 2px; color: #9bb1b7; }
.component-flow a:last-child::after { content: "✓"; color: var(--teal); }
.component-flow a b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e2f2f3;
  color: var(--teal);
  font-size: 10px;
}
.component-flow a:hover, .component-flow a:focus-visible, .component-flow a.is-active {
  border-color: var(--teal);
  background: #eaf7f8;
  color: var(--deep);
  outline: none;
}
.component-flow a.is-active b { background: var(--teal); color: #fff; }
@media (max-width: 620px) {
  .component-flow { flex-wrap: nowrap; overflow-x: auto; margin-right: -4px; padding-bottom: 3px; scrollbar-width: thin; }
  .component-flow a { flex: 0 0 auto; }
}


.component-flow-status, .component-flow-next {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.component-flow-next { margin-left: 2px; color: var(--teal); }
.component-flow-next.is-complete { color: #16805c; }
@media (max-width: 620px) { .component-flow-status, .component-flow-next { flex: 0 0 auto; } }


.component-flow-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.component-flow-controls .button { min-height: 34px; padding: 7px 10px; font-size: 11px; }
.component-flow-complete { align-self: center; color: #16805c; font-size: 11px; font-weight: 850; }
@media (max-width: 620px) { .component-flow-controls { display: grid; } .component-flow-controls .button { width: 100%; } }


/* Section rail for long workstreams */
.component-section-rail {
  display: none;
  gap: 7px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.component-section-rail.is-visible { display: flex; flex-wrap: wrap; }
.component-section-rail a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-decoration: none;
}
.component-section-rail a:hover, .component-section-rail a:focus-visible, .component-section-rail a.is-active {
  border-color: var(--teal);
  background: #eaf7f8;
  color: var(--deep);
  outline: none;
}
.component-page-active > * { min-width: 0; }
@media (max-width: 620px) {
  .component-section-rail { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
  .component-section-rail a { flex: 0 0 auto; white-space: nowrap; }
}


/* Shared render-surface contract */
.component-pages .machine-stage,
.component-pages .studio-stage,
.component-pages .circuit-board,
.component-pages .footprint-stage,
.component-pages .breadboard-stage,
.component-pages .machine-3d-stage,
.component-pages .cabinet-3d-stage,
.component-pages .clearance-stage,
.component-pages .plumbing-stage,
.component-pages .machine-exploded-stage,
.component-pages .machine-cad-stage {
  min-width: 0;
  overflow: hidden;
}
.component-pages .machine-stage svg,
.component-pages .studio-stage svg,
.component-pages .circuit-board svg,
.component-pages .footprint-stage svg,
.component-pages .breadboard-stage svg,
.component-pages .machine-3d-stage svg,
.component-pages .cabinet-3d-stage svg,
.component-pages .clearance-stage svg,
.component-pages .plumbing-stage svg,
.component-pages .machine-exploded-stage svg,
.component-pages .machine-cad-stage svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
}
.component-pages .render-surface-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}
@media (max-width: 760px) {
  .component-pages .machine-stage svg,
  .component-pages .studio-stage svg,
  .component-pages .circuit-board svg,
  .component-pages .footprint-stage svg,
  .component-pages .breadboard-stage svg { min-height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .component-pages .component-page-active > * { animation: none; }
}


.component-pages [data-render-state="error"] { border-color: #e6c5b8; }
.component-pages [data-render-state="error"] .render-surface-status { padding: 9px 10px; border: 1px solid #e6c5b8; background: #fff8f5; color: var(--danger); }
.component-pages [data-render-state="error"] .render-surface-status small { color: var(--muted); font-size: 10px; font-weight: 700; }


.public-managed-section-content { max-width: 760px; margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; white-space: pre-line; }
.public-section-dark .public-managed-section-content { color: #c9e4e7; }


.circuit-handoff-readiness { display: grid; gap: 10px; padding: 12px; border: 1px solid #cfe2e5; background: #eef7f7; }
.handoff-readiness-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.handoff-readiness-head span { color: var(--teal); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.handoff-readiness-head h3, .handoff-readiness-head p { margin: 0; }
.handoff-readiness-head h3 { margin-top: 4px; color: var(--deep); }
.handoff-readiness-head p { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.handoff-readiness-head > strong { color: #16805c; font-size: 11px; text-align: right; }
.circuit-handoff-gates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.circuit-handoff-gates article { display: grid; gap: 3px; padding: 8px; border: 1px solid var(--line); border-left: 3px solid #c8871f; background: #fff; }
.circuit-handoff-gates article[data-status="ready"] { border-left-color: #16805c; }
.circuit-handoff-gates span, .circuit-handoff-gates small { color: var(--muted); font-size: 10px; }
.circuit-handoff-gates strong { color: var(--deep); font-size: 11px; }
@media (max-width: 520px) { .circuit-handoff-gates { grid-template-columns: 1fr; } .handoff-readiness-head { display: grid; } .handoff-readiness-head > strong { text-align: left; } }

/* Tinkercad-style lightweight scene editors */
.studio-editor-shell { display: grid; gap: 12px; padding: 14px; background: #f5fafb; border-top: 1px solid #d8e1e5; }
.studio-editor-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.studio-editor-head h3, .studio-editor-head p { margin: 0; }
.studio-editor-head h3 { color: var(--deep); }
.studio-editor-head span, .studio-editor-selected { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.studio-editor-head p { max-width: 620px; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.studio-editor-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 12px; align-items: start; }
.studio-canvas-toolbar { display:flex; align-items:center; gap:6px; margin:8px 0; padding:7px 9px; background:#f7fbfb; border:1px solid var(--line); color:var(--muted); font-size:10px; font-weight:800; }
.studio-canvas-toolbar strong { min-width:42px; color:var(--deep); text-align:center; }
.studio-canvas-toolbar button { min-height:28px; padding:4px 8px; border:1px solid #c5d7dc; border-radius:5px; background:#fff; color:var(--deep); cursor:pointer; font:inherit; font-size:10px; font-weight:800; }
.studio-canvas-toolbar button:hover,.studio-canvas-toolbar button:focus-visible { border-color:var(--teal); color:var(--teal); outline:none; }
.studio-focus-pulse { animation:studioFocusPulse .8s ease; }
 studioFocusPulse { 0%,100% { filter:none; } 50% { filter:drop-shadow(0 0 12px var(--teal)); } }
.studio-editor-palette-tools { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.studio-canvas-toolbar { display:flex; align-items:center; gap:6px; margin:8px 0; padding:7px 9px; background:#f7fbfb; border:1px solid var(--line); color:var(--muted); font-size:10px; font-weight:800; }
.studio-canvas-toolbar strong { min-width:42px; color:var(--deep); text-align:center; }
.studio-canvas-toolbar button { min-height:28px; padding:4px 8px; border:1px solid #c5d7dc; border-radius:5px; background:#fff; color:var(--deep); cursor:pointer; font:inherit; font-size:10px; font-weight:800; }
.studio-canvas-toolbar button:hover,.studio-canvas-toolbar button:focus-visible { border-color:var(--teal); color:var(--teal); outline:none; }
.studio-focus-pulse { animation:studioFocusPulse .8s ease; }
 studioFocusPulse { 0%,100% { filter:none; } 50% { filter:drop-shadow(0 0 12px var(--teal)); } }
.studio-editor-palette-tools input { flex:1; min-height:34px; border:1px solid #c5d7dc; padding:7px 9px; background:#fff; color:var(--deep); font:inherit; }
.studio-canvas-toolbar { display:flex; align-items:center; gap:6px; margin:8px 0; padding:7px 9px; background:#f7fbfb; border:1px solid var(--line); color:var(--muted); font-size:10px; font-weight:800; }
.studio-canvas-toolbar strong { min-width:42px; color:var(--deep); text-align:center; }
.studio-canvas-toolbar button { min-height:28px; padding:4px 8px; border:1px solid #c5d7dc; border-radius:5px; background:#fff; color:var(--deep); cursor:pointer; font:inherit; font-size:10px; font-weight:800; }
.studio-canvas-toolbar button:hover,.studio-canvas-toolbar button:focus-visible { border-color:var(--teal); color:var(--teal); outline:none; }
.studio-focus-pulse { animation:studioFocusPulse .8s ease; }
 studioFocusPulse { 0%,100% { filter:none; } 50% { filter:drop-shadow(0 0 12px var(--teal)); } }
.studio-editor-palette-tools span { color:var(--muted); font-size:10px; font-weight:800; white-space:nowrap; }
.studio-editor-palette { display: flex; flex-wrap: wrap; gap: 7px; align-content: start; }
.studio-editor-palette button { min-height: 34px; padding: 7px 10px; border: 1px solid #c5d7dc; border-radius: 6px; background: #fff; color: var(--deep); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.studio-editor-palette button.is-selected { border-color: var(--teal); background: #dff5f6; box-shadow: 0 0 0 2px rgba(0,143,159,.12); }
.studio-editor-inspector { display: grid; gap: 9px; padding: 12px; background: #fff; border: 1px solid #cbdde1; border-radius: 7px; }
.studio-editor-inspector label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 800; }
.studio-editor-inspector input[type="text"], .studio-editor-inspector input[type="number"] { width: 100%; min-height: 34px; border: 1px solid #c5d7dc; padding: 7px 8px; color: var(--deep); font: inherit; }
.studio-editor-inspector .check { display: flex; grid-template-columns: none; align-items: center; gap: 7px; }
.studio-editor-inspector .check input { width: 16px; min-height: 16px; }
.studio-editor-coordinates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.studio-editor-empty { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.editor-component { cursor: pointer; transition: opacity .16s ease, filter .16s ease; }
.editor-component:hover { filter: brightness(1.12); }
.editor-component.is-selected { filter: drop-shadow(0 0 5px #f7d36b); }
.editor-component.is-hidden { display: none; }
@media (max-width: 760px) { .studio-editor-head, .studio-editor-body { grid-template-columns: 1fr; display: grid; } .studio-editor-body { gap: 10px; } }
.shop-layout-editor { display: grid; gap: 12px; padding: 14px; background: #f8fcfd; border: 1px solid #d8e1e5; border-radius: 8px; }
.shop-layout-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.shop-layout-head h3, .shop-layout-head p { margin: 0; }
.shop-layout-head h3 { color: var(--deep); }
.shop-layout-head span { color: var(--teal); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.shop-layout-head p { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.shop-layout-head strong { padding: 7px 9px; background: var(--deep); color: #fff; font-size: 12px; }
.shop-layout-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.shop-layout-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; }
.shop-layout-controls input, .shop-layout-controls select { min-height: 36px; border: 1px solid #cbdde1; padding: 7px 8px; color: var(--deep); font: inherit; }
.shop-layout-stage { overflow: hidden; background: #fff; border: 1px solid #d8e1e5; }
.shop-layout-stage svg { display: block; width: 100%; min-height: 300px; }
.shop-layout-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.shop-layout-summary div { min-width: 0; padding: 9px; background: #fff; border: 1px solid #d8e1e5; }
.shop-layout-summary span, .shop-layout-summary strong { display: block; overflow-wrap: anywhere; }
.shop-layout-summary span { color: var(--muted); font-size: 11px; }
@media (max-width: 760px) { .shop-layout-head, .shop-layout-controls, .shop-layout-summary { grid-template-columns: 1fr; } }

/* Final Machine Studio alignment contract: one predictable workbench, no auto-flow columns */
@media (min-width: 961px) {
  .machine-studio .tinker-grid { grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); grid-template-areas: "controls stage"; align-items: start; }
  .machine-studio .tinker-grid > .tinker-controls { grid-area: controls; }
  .machine-studio .tinker-grid > .tinker-stage { grid-area: stage; }
  .machine-studio .tinker-grid > .tinker-output { grid-column: 1 / -1; grid-area: auto; }
  .machine-studio .tinker-grid > :not(.tinker-controls):not(.tinker-stage):not(.tinker-output) { grid-column: 1 / -1; }
  .machine-studio .tinker-stage { min-width: 0; }
  .machine-studio .tinker-stage > svg { min-height: 390px; max-height: 560px; }
}
@media (max-width: 960px) {
  .machine-studio .tinker-grid { grid-template-columns: 1fr; grid-template-areas: "controls" "stage"; }
  .machine-studio .tinker-grid > .tinker-output,
  .machine-studio .tinker-grid > :not(.tinker-controls):not(.tinker-stage):not(.tinker-output) { grid-column: 1; }
}
.shop-preset-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.shop-preset-bar span { margin-right: 3px; color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.shop-preset-bar button { min-height: 32px; padding: 6px 9px; border: 1px solid #c5d7dc; border-radius: 999px; background: #fff; color: var(--deep); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.shop-preset-bar button:hover, .shop-preset-bar button:focus-visible { border-color: var(--teal); color: var(--teal); outline: none; }
.arduino-preset-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #d8e1e5; }
.arduino-preset-bar span { color: #e06b35; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.arduino-preset-bar button { min-height: 32px; padding: 6px 9px; border: 1px solid #c5d7dc; border-radius: 999px; background: #fff; color: var(--deep); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.arduino-preset-bar button:hover, .arduino-preset-bar button:focus-visible { border-color: #e06b35; color: #b44920; outline: none; }
.arduino-preset-bar strong { margin-left: auto; color: var(--muted); font-size: 11px; }
@media (max-width: 620px) { .arduino-preset-bar strong { width: 100%; margin-left: 0; } }
.product-system-builder { display: grid; gap: 16px; width: 100%; max-width: 1280px; margin: 0 auto; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.htech-catalog-coverage{display:grid;gap:10px;margin:12px 0;padding:14px;background:linear-gradient(135deg,#effbfa,#f7fbff);border:1px solid #cfe4e6;border-radius:14px}.htech-catalog-coverage-head{display:flex;justify-content:space-between;gap:16px;align-items:start}.htech-catalog-coverage-head>div{display:grid;gap:3px}.htech-catalog-coverage-head strong{color:var(--deep);font-size:15px}.htech-catalog-coverage-head small{color:var(--muted);line-height:1.4}.htech-catalog-coverage-state{white-space:nowrap;color:#087d79;font-size:11px;font-weight:900}.htech-catalog-coverage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .htech-catalog-coverage-details{border-top:1px solid #d9e7e9;padding-top:8px}.htech-catalog-coverage-details summary{cursor:pointer;color:#087d79;font-size:11px;font-weight:900}.htech-catalog-coverage-details>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}.htech-catalog-coverage-details article{display:grid;gap:3px;padding:8px;background:#fff;border:1px solid #d9e7e9;border-radius:8px}.htech-catalog-coverage-details article strong{color:var(--deep);font-size:11px}.htech-catalog-coverage-details article span{color:var(--muted);font-size:10px}@media(max-width:620px){.htech-catalog-coverage-details>div{grid-template-columns:1fr}}
.htech-catalog-coverage-grid span{display:grid;gap:2px;padding:9px;background:#fff;border:1px solid #d9e7e9;border-radius:10px}.htech-catalog-coverage-grid b{font-size:20px;color:var(--deep)}.htech-catalog-coverage-grid small{color:var(--muted);font-size:10px;font-weight:800}@media(max-width:620px){.htech-catalog-coverage-head{display:grid}.htech-catalog-coverage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.system-builder-head { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.system-builder-head h2, .system-builder-head p { margin: 0; }
.system-builder-head h2 { color: var(--deep); }
.system-builder-head p { max-width: 700px; margin-top: 6px; color: var(--muted); line-height: 1.45; }
.system-builder-status { padding: 8px 10px; background: #eaf7f8; color: var(--teal); font-size: 11px; font-weight: 900; white-space: nowrap; }
.system-builder-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; padding: 12px; background: #f7fbfb; border: 1px solid #d8e1e5; }
.system-builder-toolbar label { display: grid; gap: 5px; min-width: min(360px, 100%); color: var(--muted); font-size: 11px; font-weight: 850; }
.system-builder-toolbar select { min-height: 40px; border: 1px solid #c5d7dc; padding: 8px; background: #fff; color: var(--deep); font: inherit; }
.system-builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 14px; }
.system-builder-layout h3 { margin: 0 0 8px; color: var(--deep); }
.system-builder-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.system-builder-item, .system-builder-summary { min-width: 0; padding: 11px; background: #f8fcfd; border: 1px solid #d8e1e5; }
.system-builder-item { display: grid; gap: 4px; border-left: 4px solid var(--teal); } .system-builder-item.is-quote-only{border-left-color:#d18a18;background:#fffaf0}.system-builder-item.is-quote-only small{color:#98610c;font-weight:800}
.system-operating-scenario{display:grid;gap:5px;min-width:180px;color:var(--muted);font-size:11px;font-weight:850}.system-operating-scenario select{min-height:40px;border:1px solid #c5d7dc;padding:8px;background:#fff;color:var(--deep);font:inherit}.simulation-stage.is-fault{opacity:1;border-color:#e16670;background:#4b202b;box-shadow:0 0 0 2px rgba(225,102,112,.18)}.simulation-stage.is-fault small{color:#ffb3b8}
.system-commissioning-checklist{display:grid;gap:10px;margin:10px 0 14px;padding:14px;background:#fff;border:1px solid #d8e4e7;border-radius:14px}.system-commissioning-head{display:flex;justify-content:space-between;gap:14px;align-items:start}.system-commissioning-head>div{display:grid;gap:3px}.system-commissioning-head strong{color:var(--deep);font-size:15px}.system-commissioning-head small{color:var(--muted);line-height:1.4}.system-commissioning-head>span{color:#087d79;font-weight:950}.system-commissioning-progress{height:7px;overflow:hidden;border-radius:99px;background:#e6eff1}.system-commissioning-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0d9b8b,#f4b942);transition:width .25s ease}.system-commissioning-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.system-commissioning-list label{display:flex;gap:7px;align-items:start;padding:9px;background:#f7fbfc;border:1px solid #dfeaec;border-radius:9px;color:var(--deep);font-size:11px;line-height:1.35}.system-commissioning-list input{margin-top:2px;accent-color:#087d79}@media(max-width:620px){.system-commissioning-list{grid-template-columns:1fr}.system-commissioning-head{display:grid}}
.system-operating-simulation{display:grid;gap:10px;margin:10px 0 14px;padding:14px;background:#071d2c;color:#eafcff;border:1px solid #1d5564;border-radius:14px}.system-operating-simulation-head{display:flex;justify-content:space-between;gap:14px;align-items:start}.system-operating-simulation-head>div{display:grid;gap:3px}.system-operating-simulation-head strong{font-size:15px}.system-operating-simulation-head small{color:#a9cbd2}.system-operating-simulation-head>span{font-weight:950;color:#7ee8df}.system-operating-simulation-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.simulation-stage{display:grid;gap:5px;min-height:104px;padding:9px;border:1px solid #255267;border-radius:10px;background:#0d2a3a;opacity:.62}.simulation-stage b{color:#76b9c4;font-size:10px}.simulation-stage strong{font-size:11px;line-height:1.25}.simulation-stage small{color:#9fc0c7;line-height:1.3}.simulation-stage.is-active{opacity:1;border-color:#f4b942;box-shadow:0 0 0 2px rgba(244,185,66,.12);animation:simulationPulse 1.2s ease-in-out infinite}.simulation-stage.is-complete{opacity:1;border-color:#39c9b6;background:#0d3a42}.simulation-stage.is-complete small{color:#7ee8df}@keyframes simulationPulse{50%{transform:translateY(-2px)}}@media(max-width:760px){.system-operating-simulation-track{grid-template-columns:1fr 1fr}.simulation-stage{min-height:90px}}@media(max-width:420px){.system-operating-simulation-track{grid-template-columns:1fr}}
.system-operating-preflight{display:grid;gap:10px;margin:10px 0 14px;padding:14px;background:#f8fbfc;border:1px solid #d8e4e7;border-radius:14px}.system-operating-preflight-head{display:flex;justify-content:space-between;gap:14px;align-items:start}.system-operating-preflight-head>div{display:grid;gap:3px}.system-operating-preflight-head strong{color:var(--deep);font-size:15px}.system-operating-preflight-head small{color:var(--muted);line-height:1.4}.system-operating-preflight-score{display:grid;place-items:center;min-width:48px;height:40px;border-radius:12px;background:#e2f6f3;color:#087d79;font-weight:950}.system-operating-preflight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.system-operating-preflight-grid article{display:grid;gap:5px;padding:9px;border-radius:10px;border:1px solid #d9e7e9;background:#fff}.system-operating-preflight-grid b{font-size:10px;letter-spacing:.03em}.system-operating-preflight-grid small{color:var(--muted);line-height:1.35}.preflight-pass{border-left:4px solid #159b80!important}.preflight-warn{border-left:4px solid #d18a18!important;background:#fffaf0!important}.preflight-fail{border-left:4px solid #c44b56!important;background:#fff2f3!important}@media(max-width:700px){.system-operating-preflight-grid{grid-template-columns:1fr}.system-operating-preflight-head{display:grid}}

.system-builder-item span, .system-builder-summary span { color: var(--muted); font-size: 11px; }
.system-builder-item strong, .system-builder-summary strong { color: var(--deep); overflow-wrap: anywhere; }
.system-builder-item small { color: var(--muted); overflow-wrap: anywhere; }
.system-builder-summary { display: grid; align-content: start; gap: 10px; }
.system-builder-summary div { display: grid; gap: 3px; padding-bottom: 8px; border-bottom: 1px solid #d8e1e5; }
@media (max-width: 760px) { .system-builder-head, .system-builder-layout { grid-template-columns: 1fr; display: grid; } .system-builder-items { grid-template-columns: 1fr; } .system-builder-toolbar > * { width: 100%; } }
.project-scene-builder { display:grid; gap:16px; width:100%; max-width:1280px; margin:0 auto; padding:20px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); }
.scene-builder-head { display:flex; justify-content:space-between; gap:18px; align-items:start; }
.scene-builder-head h2,.scene-builder-head p { margin:0; }.scene-builder-head h2{color:var(--deep)}.scene-builder-head p{max-width:720px;margin-top:6px;color:var(--muted);line-height:1.45}.scene-builder-head>strong{padding:8px 10px;background:var(--deep);color:#fff;font-size:11px;white-space:nowrap}
.scene-builder-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.8fr); gap:12px; padding:12px; background:#f7fbfb; border:1px solid var(--line); }.scene-template-controls,.scene-brand-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.scene-brand-controls{grid-template-columns:minmax(0,1fr) 110px 110px}.scene-builder-controls label,.scene-inspector-panel label{display:grid;gap:5px;color:var(--muted);font-size:11px;font-weight:850}.scene-builder-controls input,.scene-builder-controls select,.scene-inspector-panel input,.scene-inspector-panel select{min-height:38px;border:1px solid #c5d7dc;padding:8px;background:#fff;color:var(--deep);font:inherit}.scene-brand-controls input[type=color]{padding:3px}.scene-builder-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:12px;align-items:start}.scene-canvas-panel{min-width:0;border:1px solid var(--line);background:#f7fbfb}.scene-canvas-toolbar{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--deep);font-size:12px;font-weight:900}.scene-canvas-toolbar div{display:flex;gap:6px}.scene-canvas-stage{overflow:hidden;background:#fff}.scene-canvas-stage svg{display:block;width:100%;min-height:360px} .scene-canvas-stage svg.scene-3d-hidden{display:none !important}.scene-inspector-panel{display:grid;gap:10px;padding:13px;background:#f7fbfb;border:1px solid var(--line)}.scene-inspector-panel h3,.scene-inspector-panel p{margin:0}.scene-inspector-panel p{color:var(--muted);font-size:12px;line-height:1.45}.scene-inspector-panel label{padding-top:3px}.scene-selected-object{color:var(--teal);font-size:11px;font-weight:900;text-transform:uppercase}.scene-validation-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.scene-validation-summary article{padding:10px;background:#f7fbfb;border:1px solid var(--line);border-left:4px solid var(--teal)}.scene-validation-summary article[data-status=warn]{border-left-color:#c8871f}.scene-validation-summary span,.scene-validation-summary strong,.scene-validation-summary p{display:block}.scene-validation-summary span{color:var(--muted);font-size:11px}.scene-validation-summary p{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.35}@media(max-width:820px){.scene-builder-controls,.scene-builder-layout{grid-template-columns:1fr}.scene-template-controls,.scene-brand-controls,.scene-validation-summary{grid-template-columns:1fr 1fr}}@media(max-width:560px){.scene-builder-head,.scene-template-controls,.scene-brand-controls,.scene-validation-summary{display:grid;grid-template-columns:1fr}.scene-canvas-toolbar{display:grid}.scene-canvas-toolbar div{flex-wrap:wrap}.scene-canvas-toolbar button{flex:1}}
.scene-canvas-toolbar [data-scene-add] { min-height: 32px; padding: 6px 8px; border: 1px solid #c5d7dc; border-radius: 999px; background: #fff; color: var(--deep); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.scene-canvas-toolbar [data-scene-add]:hover,.scene-canvas-toolbar [data-scene-add]:focus-visible { border-color: var(--teal); color: var(--teal); outline: none; }
.scene-object { cursor: pointer; }
.scene-object:hover { filter: brightness(1.08); }
@media (max-width: 560px) { .scene-canvas-toolbar [data-scene-add] { flex: 0 0 auto; } }
.scene-canvas-stage svg { touch-action: none; }
.scene-object { user-select: none; }
.scene-object:active { cursor: grabbing; }
.studio-module-rail { position: sticky; top: 82px; z-index: 8; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 9px 0; background: linear-gradient(180deg,#fff 78%,transparent); }
.studio-module-rail > span { margin-right: 4px; color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.studio-module-rail a, .studio-show-all { display: inline-flex; align-items: center; min-height: 33px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--deep); font: inherit; font-size: 11px; font-weight: 850; text-decoration: none; cursor: pointer; }
.studio-module-rail a:hover, .studio-module-rail a:focus-visible, .studio-show-all:hover, .studio-show-all:focus-visible { border-color: var(--teal); color: var(--teal); outline: none; }
.studio-module-rail a.is-active { background: var(--deep); border-color: var(--deep); color: #fff; }
.studio-show-all { margin-left: auto; }
.machine-focus-mode > .machine-focus-hidden { display: none !important; }
@media (max-width: 760px) { .studio-module-rail { position: static; flex-wrap: nowrap; overflow-x: auto; padding: 8px 0; scrollbar-width: thin; } .studio-module-rail > span, .studio-show-all { flex: 0 0 auto; } .studio-module-rail a { flex: 0 0 auto; white-space: nowrap; } }

/* Final cross-studio visual design contract */
.machine-studio, .circuit-studio { container-type: inline-size; }
.studio-head { min-width: 0; padding: clamp(16px, 2vw, 24px); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 14px 30px rgba(16,34,43,.12); }
.studio-head > div { min-width: 0; }
.studio-head h2 { max-width: 820px; text-wrap: balance; }
.studio-head p { max-width: 760px; line-height: 1.55; }
.studio-layout, .circuit-layout { min-width: 0; }
.studio-layout > *, .circuit-layout > * { min-width: 0; }
.studio-stage, .circuit-board, .studio-output, .machine-3d-configurator, .cabinet-3d-viewer, .cabinet-clearance-checker, .plumbing-path-designer { overflow: clip; }
.studio-stage:focus-within, .circuit-board:focus-within, .studio-output:focus-within { border-color: rgba(0,143,159,.58); box-shadow: 0 0 0 3px rgba(0,143,159,.1); }
.studio-module-rail, .plc-studio-nav, .circuit-studio-nav { border-bottom: 1px solid rgba(203,220,224,.8); }
.studio-module-rail > span, .plc-studio-nav > span, .circuit-studio-nav > span { line-height: 1.2; }
.studio-module-rail a, .plc-studio-nav a, .circuit-studio-nav a, .studio-show-all { transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.studio-module-rail a:hover, .plc-studio-nav a:hover, .circuit-studio-nav a:hover, .studio-show-all:hover { transform: translateY(-1px); }
.machine-focus-mode, .circuit-focus-mode { min-height: 0; }
.machine-focus-mode > .machine-focus-hidden, .circuit-focus-mode > .circuit-focus-hidden { content-visibility: visible; }
.system-builder-toolbar, .scene-builder-controls, .shop-layout-controls { align-items: end; }
.system-builder-toolbar button, .scene-canvas-toolbar button, .shop-preset-bar button, .arduino-preset-bar button { white-space: nowrap; }
@container (max-width: 760px) { .studio-head { grid-template-columns: 1fr; } .studio-head .button { justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .studio-module-rail a, .plc-studio-nav a, .circuit-studio-nav a, .studio-show-all { transition: none; } }
/* Machine Studio focus layout: controls stay aligned while one selected module owns the canvas. */
.machine-studio .machine-focus-mode { grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); align-items: start; }
.machine-studio .machine-focus-mode > .tinker-controls { grid-column: 1; grid-row: 1; min-width: 0; }
.machine-studio .machine-focus-mode > .tinker-stage { grid-column: 2; grid-row: 1; min-width: 0; }
.machine-studio .machine-focus-mode > .machine-3d-configurator,
.machine-studio .machine-focus-mode > .cabinet-3d-viewer,
.machine-studio .machine-focus-mode > .cabinet-clearance-checker,
.machine-studio .machine-focus-mode > .plumbing-path-designer,
.machine-studio .machine-focus-mode > .machine-exploded-assembly,
.machine-studio .machine-focus-mode > .machine-cad-exporter { grid-column: 1 / -1; min-width: 0; }
.machine-studio .machine-focus-mode > .machine-focus-hidden { display: none !important; }
@media (max-width: 960px) {
  .machine-studio .machine-focus-mode { grid-template-columns: 1fr; }
  .machine-studio .machine-focus-mode > .tinker-controls,
  .machine-studio .machine-focus-mode > .tinker-stage,
  .machine-studio .machine-focus-mode > .machine-3d-configurator,
  .machine-studio .machine-focus-mode > .cabinet-3d-viewer,
  .machine-studio .machine-focus-mode > .cabinet-clearance-checker,
  .machine-studio .machine-focus-mode > .plumbing-path-designer,
  .machine-studio .machine-focus-mode > .machine-exploded-assembly,
  .machine-studio .machine-focus-mode > .machine-cad-exporter { grid-column: 1; grid-row: auto; }
}

.scene-canvas-toolbar [data-scene-route] { min-height: 32px; padding: 6px 8px; border: 1px dashed #9ebbc1; border-radius: 999px; background: #f8fcfd; color: var(--deep); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.scene-canvas-toolbar [data-scene-route]:hover,.scene-canvas-toolbar [data-scene-route]:focus-visible { border-color: var(--teal); color: var(--teal); outline: none; }
.scene-client-preview-active { background: linear-gradient(135deg,#10222b,#123c4a); border-color:#10222b; }
.scene-client-preview-active .scene-builder-head h2, .scene-client-preview-active .scene-builder-head p, .scene-client-preview-active .scene-builder-head .eyebrow { color:#fff; }
.scene-client-preview-active .scene-builder-controls, .scene-client-preview-active .scene-inspector-panel { display:none; }
.scene-client-preview-active .scene-builder-layout { grid-template-columns:1fr; }
.scene-client-preview-active .scene-canvas-panel { border-color:rgba(255,255,255,.2); background:#fff; }
.scene-client-preview-active .scene-canvas-toolbar { background:#10222b; color:#fff; }
.scene-client-preview-active .scene-validation-summary article { background:rgba(255,255,255,.95); }
@media print { .scene-client-preview-active .scene-canvas-toolbar button { display:none; } .scene-client-preview-active { break-inside:avoid; } }

.scene-toggle-field { display:flex !important; align-items:center; gap:8px; min-height:38px; padding:8px 10px; background:#fff; border:1px solid #c5d7dc; color:var(--deep) !important; }
.scene-toggle-field input { min-height:auto !important; accent-color:var(--teal); }
.scene-inspector-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.scene-route-manager { display:grid; gap:8px; margin-top:8px; padding-top:10px; border-top:1px solid var(--line); }
.scene-inspector-subhead { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.scene-inspector-subhead h4 { margin:0; color:var(--deep); font-size:12px; }
.scene-inspector-subhead button { min-height:28px; padding:4px 8px; }
.scene-route-list { display:grid; gap:6px; }
.scene-route-list > p { margin:0; color:var(--muted); font-size:11px; line-height:1.35; }
.scene-route-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 8px; background:#fff; border:1px solid var(--line); border-radius:6px; } #projectScene3dSvg .scene-3d-utility-route { animation:scene-route-flow 1.1s linear infinite; } @media (prefers-reduced-motion: reduce) { #projectScene3dSvg .scene-3d-utility-route { animation:none; } } .scene-utility-route { animation:scene-route-flow 1.1s linear infinite; } @keyframes scene-route-flow { to { stroke-dashoffset:-32; } } @media (prefers-reduced-motion: reduce) { .scene-utility-route { animation:none; } }
.scene-route-row span { display:grid; gap:2px; min-width:0; }
.scene-route-row strong { color:var(--teal); font-size:10px; letter-spacing:.04em; }
.scene-route-row small { overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.scene-route-row button { width:26px; height:26px; padding:0; border:1px solid #c5d7dc; border-radius:50%; background:#fff; color:#a84e33; cursor:pointer; font-size:16px; line-height:1; }
.scene-route-row button:hover,.scene-route-row button:focus-visible { border-color:#a84e33; outline:none; }
.scene-layers { display:grid; gap:8px; margin-top:8px; padding-top:10px; border-top:1px solid var(--line); }
.scene-layers .scene-inspector-subhead > span { color:var(--muted); font-size:10px; }
.scene-object-list { display:grid; gap:5px; max-height:180px; overflow:auto; }
.scene-object-list > p { margin:0; color:var(--muted); font-size:11px; }
.scene-layer-row { display:grid; grid-template-columns:minmax(0,1fr) 30px; gap:5px; align-items:center; padding:4px; background:#fff; border:1px solid var(--line); border-radius:5px; }
.scene-layer-row.is-selected { border-color:var(--teal); background:#f1fbf7; }
.scene-layer-select { min-width:0; padding:5px 6px; overflow:hidden; border:0; background:transparent; color:var(--deep); text-align:left; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; font:inherit; font-size:11px; font-weight:800; }
.scene-layer-visibility { display:flex; justify-content:center; }
.scene-layer-visibility input { accent-color:var(--teal); }
.scene-clearance-envelope { fill:none; stroke:#c8871f; stroke-width:2; stroke-dasharray:7 6; opacity:.7; pointer-events:none; }
.circuit-connection-manager { display:grid; gap:10px; margin-top:12px; padding:12px; border:1px solid var(--line); background:#f7fbfb; }
.circuit-connection-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) auto auto; gap:8px; align-items:end; }
.circuit-connection-controls label { display:grid; gap:4px; color:var(--muted); font-size:11px; font-weight:800; }
.circuit-connection-controls select { min-height:36px; border:1px solid #c5d7dc; background:#fff; color:var(--deep); padding:7px; font:inherit; }
.circuit-connection-list { display:grid; gap:6px; }
.circuit-connection-list > p { margin:0; color:var(--muted); font-size:11px; }
.circuit-connection-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 9px; background:#fff; border:1px solid var(--line); border-left:3px solid var(--teal); }
.circuit-connection-row strong { color:var(--deep); font-size:11px; }
.circuit-connection-row button { min-height:28px; padding:4px 8px; border:1px solid #c5d7dc; background:#fff; color:#a84e33; cursor:pointer; font:inherit; font-size:10px; font-weight:800; }
(max-width:720px){.circuit-connection-controls{grid-template-columns:1fr 1fr}.circuit-connection-controls button{width:100%}}
.scene-readiness-checklist { display:grid; gap:12px; padding:14px; background:#f7fbfb; border:1px solid var(--line); }
.scene-checklist-head { display:flex; justify-content:space-between; gap:12px; align-items:start; }
.scene-checklist-head h3,.scene-checklist-head p { margin:0; }
.scene-checklist-head h3 { color:var(--deep); }
.scene-checklist-head p:not(.eyebrow) { max-width:720px; margin-top:5px; color:var(--muted); font-size:12px; line-height:1.4; }
.scene-checklist-head > strong { padding:7px 9px; background:var(--deep); color:#fff; font-size:11px; white-space:nowrap; }
.scene-readiness-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.scene-readiness-list label { display:flex; align-items:flex-start; gap:9px; padding:10px; background:#fff; border:1px solid var(--line); color:var(--deep); cursor:pointer; }
.scene-readiness-list label.is-complete { border-color:#76b9a5; background:#f1fbf7; }
.scene-readiness-list input { margin-top:3px; accent-color:var(--teal); }
.scene-readiness-list span { display:grid; gap:3px; }
.scene-readiness-list strong { font-size:12px; }
.scene-readiness-list small { color:var(--muted); font-size:10px; line-height:1.35; }
(max-width:640px){.scene-readiness-list{grid-template-columns:1fr}.scene-checklist-head{display:grid}}
.scene-client-preview-active .scene-readiness-checklist { display:none; }


/* Build journey: compact timeline keeps the public story useful without another long studio page. */
.public-journey { background: linear-gradient(135deg, #f4fbfa 0%, #ffffff 62%); }
.project-journey-timeline { display: grid; gap: 14px; margin-top: 26px; }
.project-journey-stage { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; align-items: stretch; padding: 20px; border: 1px solid rgba(18,60,74,.12); border-radius: 18px; background: rgba(255,255,255,.86); box-shadow: 0 12px 30px rgba(18,60,74,.06); }
.project-journey-marker { display: grid; align-content: space-between; justify-items: start; color: #0d5968; border-right: 1px solid rgba(18,60,74,.13); padding-right: 18px; }
.project-journey-marker span { font-size: .72rem; letter-spacing: .16em; font-weight: 800; }
.project-journey-marker b { font-size: 1.8rem; line-height: 1; }
.project-journey-stage-copy { min-width: 0; }
.project-journey-stage-copy h3 { margin: 5px 0 8px; color: #123c4a; }
.project-journey-stage-copy p { margin: 0; max-width: 68ch; color: #4e6870; }
.project-journey-stage-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 15px; font-size: .82rem; color: #61777d; }
.project-journey-stage-meta strong { color: #0d5968; }
.project-journey-note { display: grid; gap: 8px; margin-top: 18px; padding: 20px; border-radius: 18px; background: #123c4a; color: #fff; }
.project-journey-note strong { font-size: 1.15rem; }
.project-journey-note p { margin: 0; color: #c9e1e5; max-width: 66ch; }
.project-journey-note .button { justify-self: start; margin-top: 6px; }
@media (max-width: 620px) { .project-journey-stage { grid-template-columns: 1fr; gap: 12px; } .project-journey-marker { grid-template-columns: auto auto; border-right: 0; border-bottom: 1px solid rgba(18,60,74,.13); padding: 0 0 12px; } }

.project-journey-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.project-journey-gallery figure { margin:0; overflow:hidden; border:1px solid rgba(18,60,74,.12); border-radius:16px; background:#fff; }
.project-journey-gallery img { display:block; width:100%; height:190px; object-fit:cover; background:#e8f6f7; }
.project-journey-gallery figcaption { padding:10px 12px; color:#4e6870; font-size:.78rem; font-weight:750; }
@media (max-width:760px) { .project-journey-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px) { .project-journey-gallery { grid-template-columns:1fr; } }

.capacity-machine-configurator { width:min(1240px,calc(100% - 40px)); margin:20px auto; padding:26px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(135deg,#f4fbfa,#fff); }
.capacity-configurator-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.capacity-configurator-head h2 { margin:4px 0 8px; color:var(--deep); }
.capacity-configurator-head p { margin:0; max-width:70ch; color:var(--muted); }
.capacity-configurator-controls { display:flex; flex-wrap:wrap; align-items:end; gap:10px; margin:22px 0; }
.capacity-configurator-controls label { display:grid; gap:6px; min-width:160px; color:var(--deep); font-size:12px; font-weight:800; }
.capacity-configurator-controls input,.capacity-configurator-controls select { min-height:42px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--deep); }
.capacity-machine-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; } .capacity-architecture { margin-top:14px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; } .capacity-architecture-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .capacity-architecture-head h3 { margin:4px 0 0; color:var(--deep); } .capacity-architecture-head > span { padding:6px 10px; border-radius:999px; background:#eef7f8; color:var(--teal); font-size:11px; font-weight:850; } .capacity-architecture-flow { display:flex; align-items:stretch; gap:8px; overflow-x:auto; padding:16px 0 10px; } .capacity-architecture-stage { position:relative; display:grid; gap:5px; min-width:140px; min-height:72px; padding:12px; border:1px solid #b9d9dc; border-radius:12px; background:linear-gradient(145deg,#f7fcfc,#eaf7f8); } .capacity-architecture-stage span { color:var(--teal); font-size:10px; font-weight:900; } .capacity-architecture-stage strong { color:var(--deep); font-size:12px; } .capacity-architecture-stage b { position:absolute; top:27px; right:-20px; color:var(--accent,#c8871f); font-size:22px; } .capacity-architecture > small { color:var(--muted); }

.capacity-machine-summary div { display:grid; gap:5px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.capacity-machine-summary span,.capacity-machine-summary small { color:var(--muted); font-size:11px; }
.capacity-machine-summary strong { color:var(--deep); font-size:16px; }
.capacity-machine-summary small { grid-column:1/-1; }
.capacity-machine-bom { margin-top:14px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.capacity-bom-head,.capacity-bom-row,.capacity-bom-total { display:grid; grid-template-columns:minmax(0,1fr) 190px 130px; gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); }
.capacity-bom-head { background:#123c4a; color:#fff; } .capacity-bom-head span { color:#c9e1e5; font-size:12px; } .capacity-bom-row span,.capacity-bom-row b { color:var(--deep); font-size:12px; } .capacity-bom-row strong,.capacity-bom-total strong { color:var(--teal); text-align:right; } .capacity-bom-total { border-bottom:0; background:#f4fbfa; } .capacity-bom-total span { color:var(--muted); font-size:12px; }
@media (max-width:900px) { .capacity-machine-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .capacity-machine-configurator { width:calc(100% - 24px); padding:18px; } .capacity-configurator-head { display:grid; } .capacity-machine-summary { grid-template-columns:1fr; } .capacity-bom-head,.capacity-bom-row,.capacity-bom-total { grid-template-columns:1fr; gap:5px; } .capacity-bom-row strong,.capacity-bom-total strong { text-align:left; } }

.capacity-machine-visual { display:grid; grid-template-columns:.75fr 1.25fr; gap:18px; align-items:center; margin-top:16px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.capacity-machine-visual h3 { margin:4px 0 8px; color:var(--deep); } .capacity-machine-visual p { color:var(--muted); }
#capacityMachine3dSvg { display:block; width:100%; min-height:260px; border-radius:12px; background:linear-gradient(145deg,#eef9fa,#dceff1); }
@media (max-width:760px) { .capacity-machine-visual { grid-template-columns:1fr; } #capacityMachine3dSvg { min-height:220px; } }

.capacity-machine-cut-list { margin-top:12px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.capacity-cut-head,.capacity-cut-row { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); }
.capacity-cut-head { background:#e8f6f7; color:var(--deep); } .capacity-cut-head span { color:var(--muted); font-size:11px; } .capacity-cut-row:last-child { border-bottom:0; } .capacity-cut-row span { color:var(--deep); font-size:12px; } .capacity-cut-row strong { color:var(--teal); text-align:right; }
@media (max-width:620px) { .capacity-cut-head,.capacity-cut-row { grid-template-columns:1fr; gap:5px; } .capacity-cut-row strong { text-align:left; } }

.capacity-cut-layout-wrap { display:grid; grid-template-columns:.7fr 1.3fr; gap:18px; align-items:center; margin-top:14px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.capacity-cut-layout-wrap h3 { margin:4px 0 8px; color:var(--deep); } .capacity-cut-layout-wrap p { color:var(--muted); } #capacityMachineCutLayout { width:100%; min-height:250px; border-radius:12px; background:#edf7f8; }
@media (max-width:760px) { .capacity-cut-layout-wrap { grid-template-columns:1fr; } }

.system-controller-assignment { grid-column:1/-1; margin-top:4px; padding-top:10px; border-top:1px solid var(--line); }
.system-controller-assignment summary { cursor:pointer; color:var(--teal); font-weight:850; } .system-controller-pin-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:10px; } .system-controller-pin-grid span { padding:7px; border-radius:7px; background:#eef7f8; color:var(--deep); font-size:11px; } .system-controller-assignment ul { margin:10px 0 0; padding-left:18px; color:var(--muted); font-size:11px; line-height:1.5; }
@media (max-width:700px) { .system-controller-pin-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.capacity-machine-validation { margin-top:14px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.capacity-validation-head { display:flex; justify-content:space-between; gap:15px; align-items:start; } .capacity-validation-head h3 { margin:4px 0 0; color:var(--deep); } .capacity-validation-head > strong { color:var(--teal); } .capacity-validation-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.capacity-validation-item { display:flex; gap:9px; padding:10px; border-radius:10px; background:#fff8e7; border:1px solid #f0d79c; } .capacity-validation-item.is-ready { background:#edf8f2; border-color:#b8dfc5; } .capacity-validation-item > span { display:grid; place-items:center; width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:#c8871f; color:#fff; font-weight:900; } .capacity-validation-item.is-ready > span { background:#2b8c55; } .capacity-validation-item strong { color:var(--deep); font-size:12px; } .capacity-validation-item p { margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.4; }
@media (max-width:700px) { .capacity-validation-list { grid-template-columns:1fr; } }

.capacity-machine-versions { margin-top:14px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.capacity-versions-head { display:flex; justify-content:space-between; gap:12px; align-items:start; } .capacity-versions-head h3 { margin:4px 0 0; color:var(--deep); } .capacity-versions-head > span { color:var(--teal); font-size:12px; font-weight:850; }
.capacity-version-row { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--line); } .capacity-version-row strong,.capacity-version-row small { display:block; } .capacity-version-row strong { color:var(--deep); font-size:12px; } .capacity-version-row small { margin-top:3px; color:var(--muted); font-size:11px; } .capacity-version-row button { border:1px solid var(--line); border-radius:8px; padding:7px 10px; background:#eef7f8; color:var(--teal); font-weight:850; cursor:pointer; } .capacity-version-empty { color:var(--muted); font-size:12px; }

@keyframes capacity-float { 0%,100% { transform:translateY(0) rotate(-.2deg); } 50% { transform:translateY(-5px) rotate(.2deg); } }
#capacityMachine3dSvg.capacity-preview-animated g[filter] { transform-box:fill-box; transform-origin:center; animation:capacity-float 4.8s ease-in-out infinite; }
#capacityMachine3dSvg.capacity-preview-animated ellipse { animation:capacity-shadow 4.8s ease-in-out infinite; transform-origin:center; }
@keyframes capacity-shadow { 0%,100% { opacity:.13; transform:scaleX(1); } 50% { opacity:.08; transform:scaleX(.94); } }
@media (prefers-reduced-motion: reduce) { #capacityMachine3dSvg.capacity-preview-animated g[filter], #capacityMachine3dSvg.capacity-preview-animated ellipse { animation:none; } }

#capacityMachine3dSvg.capacity-preview-animated .capacity-flow-line { animation:capacity-flow 1.4s linear infinite; } #capacityMachine3dSvg.capacity-preview-animated .capacity-installation-pipe { animation:capacity-flow 1s linear infinite; } #capacityMachine3dSvg .capacity-installation-tank { transform-box:fill-box; transform-origin:center; transition:transform .45s ease; }
#capacityMachine3dSvg.capacity-preview-animated .capacity-status-led { animation:capacity-led 1.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes capacity-flow { to { stroke-dashoffset:-26; } }
@keyframes capacity-led { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { #capacityMachine3dSvg.capacity-preview-animated .capacity-flow-line, #capacityMachine3dSvg.capacity-preview-animated .capacity-status-led { animation:none; } }

.capacity-sim-status { align-self:center; padding:8px 10px; border-radius:999px; background:#eef7f8; color:var(--teal); font-size:11px; font-weight:850; }
#capacityMachine3dSvg.capacity-dispenser-active .capacity-flow-line { animation:capacity-flow .45s linear infinite; stroke-width:8; } #capacityMachine3dSvg.capacity-dispenser-active .capacity-status-led { fill:#2bdb82; animation:capacity-led .55s ease-in-out infinite; }

.capacity-sim-select { display:grid; gap:4px; align-self:center; color:var(--deep); font-size:11px; font-weight:850; } .capacity-sim-select select { min-height:34px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--deep); }
#capacityMachine3dSvg.capacity-fault-active .capacity-status-led { fill:#e65d5d; animation:capacity-fault 0.55s ease-in-out infinite; }
@keyframes capacity-fault { 0%,100% { opacity:.4; } 50% { opacity:1; } }

#capacityMachine3dSvg.capacity-exploded .capacity-controller-zone { transform:translateY(-20px); transition:transform .45s ease; } #capacityMachine3dSvg.capacity-exploded .capacity-pump-zone { transform:translateX(-24px) translateY(15px); transition:transform .45s ease; } #capacityMachine3dSvg.capacity-exploded .capacity-nozzle-zone { transform:translateX(26px) translateY(-8px); transition:transform .45s ease; }

#capacityMachine3dSvg { cursor:grab; transform-style:preserve-3d; transition:transform .25s ease; touch-action:none; } #capacityMachine3dSvg:active { cursor:grabbing; }

.capacity-quick-presets { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:18px 0 0; } .capacity-quick-presets > span { margin-right:4px; color:var(--muted); font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; } .capacity-quick-presets button { padding:8px 11px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--teal); font-weight:850; cursor:pointer; transition:transform .2s ease,background .2s ease; } .capacity-quick-presets button:hover { transform:translateY(-2px); background:#eef7f8; }

.capacity-component-workbench { display:grid; grid-template-columns:.75fr 1.25fr; gap:16px; margin-top:16px; } .capacity-component-palette,.capacity-component-drop-zone { padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; } .capacity-component-palette h3 { margin:4px 0 8px; color:var(--deep); } .capacity-component-palette p { color:var(--muted); } .capacity-component-palette-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .capacity-component-palette-list button { padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#eef7f8; color:var(--teal); font-weight:850; cursor:grab; } .capacity-component-palette-list button:active { cursor:grabbing; } .capacity-component-snap { display:flex; align-items:center; gap:8px; margin-top:14px; color:var(--deep); font-size:12px; font-weight:800; } .capacity-component-snap input { accent-color:var(--teal); } .capacity-component-drop-zone { display:grid; align-content:start; gap:4px; } .capacity-component-drop-zone > strong { color:var(--deep); } .capacity-component-drop-zone > span { color:var(--muted); font-size:12px; } .capacity-component-drop-zone.is-drag-over { outline:3px dashed var(--teal); background:#effbfb; } #capacityComponentLayout { width:100%; min-height:250px; margin-top:8px; border-radius:12px; background:#f5fbfb; } #capacityComponentLayout .capacity-component-flow { animation:capacity-component-flow 1.25s linear infinite; opacity:.78; pointer-events:none; } @keyframes capacity-component-flow { to { stroke-dashoffset:-44; } } @media (prefers-reduced-motion: reduce) { #capacityComponentLayout .capacity-component-flow { animation:none; } } .capacity-component-placement-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; } .capacity-component-placement-list span, .capacity-component-placement-list button { padding:6px 8px; border-radius:999px; background:#f4fbfa; color:var(--deep); font-size:11px; font-weight:800; } .capacity-component-placement-list button { border:1px solid transparent; cursor:pointer; } .capacity-component-placement-list button.is-selected { border-color:var(--teal); background:#dff7f7; } .capacity-component-placement-list button small { margin-left:5px; color:#9b4b42; font-size:14px; } #capacityComponentLayout [data-capacity-placed].capacity-component-selected rect { stroke:#e36f3d; stroke-width:4; stroke-dasharray:7 4; } #capacityComponentLayout [data-capacity-placed].capacity-component-invalid rect { stroke:#d84b4b; stroke-width:4; stroke-dasharray:5 3; fill:#ffe7e7; } .capacity-component-placement-list small { color:var(--muted); }
@media (max-width:760px) { .capacity-component-workbench { grid-template-columns:1fr; } }
 .capacity-commissioning { margin-top:14px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; } .capacity-commissioning-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; } .capacity-commissioning-head h3 { margin:4px 0 0; color:var(--deep); } .capacity-commissioning-head > span { padding:6px 10px; border-radius:999px; background:#fff6df; color:#8b6a1a; font-size:11px; font-weight:850; } .capacity-commissioning-list { display:grid; gap:8px; margin-top:14px; } .capacity-commissioning-step { display:grid; grid-template-columns:34px 1fr 22px; gap:10px; align-items:center; padding:10px; border:1px solid #d7e6e8; border-radius:10px; background:#fbfefe; } .capacity-commissioning-step > strong { color:var(--teal); } .capacity-commissioning-step div { display:grid; gap:3px; } .capacity-commissioning-step b { color:var(--deep); font-size:12px; } .capacity-commissioning-step small { color:var(--muted); line-height:1.35; } .capacity-commissioning-step input { accent-color:var(--teal); } .capacity-commissioning-step.is-complete { border-color:#89b99a; background:#f1fbf4; } .capacity-commissioning-step.is-complete > strong { color:#2b7d52; } .capacity-readiness-badge { padding:8px 12px; border-radius:999px; background:#eef7f8; color:var(--teal); font-size:12px; font-weight:900; } .capacity-readiness-badge[data-readiness="ready"] { background:#e8f8ee; color:#24764c; } .capacity-readiness-badge[data-readiness="review"] { background:#fff6df; color:#8b6a1a; } .capacity-readiness-badge[data-readiness="risk"] { background:#ffe9e4; color:#a84e33; } .hmi-demo-controls { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:10px; } .hmi-demo-controls button { min-height:32px; } .hmi-demo-controls span { color:var(--muted); font-size:11px; font-weight:800; } .hmi-screen-preview article.hmi-screen-active { border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,143,159,.14); transform:translateY(-2px); } .hmi-screen-flow span.hmi-screen-active { background:#dff7f7; color:var(--deep); } .hmi-screen-flow span { cursor:pointer; } .scene-machine-internals { pointer-events:none; animation:scene-internals-pulse 2.4s ease-in-out infinite; } @keyframes scene-internals-pulse { 0%,100%{opacity:.76} 50%{opacity:1} } @media (prefers-reduced-motion: reduce) { .scene-machine-internals { animation:none; } } .hmi-live-touchscreen { margin:16px 0; padding:20px; border-radius:20px; background:linear-gradient(135deg,#10222b,#173f4b); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 14px 30px rgba(16,34,43,.18); } .hmi-live-bezel { max-width:620px; margin:auto; padding:12px; border:8px solid #07151c; border-radius:18px; background:#07151c; box-shadow:0 0 0 2px #58757b,0 8px 20px rgba(0,0,0,.28); } .hmi-live-topbar { display:flex; align-items:center; gap:10px; padding:8px 10px; color:#d8f7f8; font-size:10px; letter-spacing:.08em; } .hmi-live-topbar b { margin-left:auto; color:#8eeeff; font-size:11px; letter-spacing:0; } .hmi-live-led { width:8px; height:8px; border-radius:50%; background:#2bdb82; box-shadow:0 0 10px #2bdb82; } .hmi-live-content { display:grid; justify-items:center; gap:12px; min-height:220px; padding:30px 20px; border-radius:10px; background:radial-gradient(circle at 50% 0,#195a63,#0a2c37 70%); color:#fff; text-align:center; } .hmi-live-state { color:#8eeeff; font-size:10px; font-weight:900; letter-spacing:.14em; } .hmi-live-content h3 { margin:0; font-size:28px; } .hmi-live-content p { max-width:440px; margin:0; color:#c8e4e6; } .hmi-live-progress { width:min(380px,90%); height:8px; overflow:hidden; border-radius:99px; background:#0b2028; } .hmi-live-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#16c7d9,#f4b942); transition:width .45s ease; } .hmi-live-content button { min-width:150px; padding:11px 18px; border:0; border-radius:9px; background:#f4b942; color:#123c4a; font-weight:900; cursor:pointer; } .hmi-live-bezel > small { display:block; padding-top:9px; color:#9fc2c6; text-align:center; font-size:10px; } .hmi-scenario-select { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:11px; font-weight:800; } .hmi-scenario-select select { padding:7px 8px; border:1px solid #b9d9dc; border-radius:8px; background:#fff; color:var(--deep); font:inherit; }
/* HMI layered layout overrides */
.hmi-touchscreen-designer { width:100%; min-width:0; gap:18px; padding:20px; border-radius:18px; box-sizing:border-box; }
.hmi-head { grid-template-columns:1fr; gap:12px; align-items:stretch; }
.hmi-head > strong { width:max-content; max-width:100%; border-radius:8px; }
.hmi-demo-controls { justify-content:flex-start; align-items:center; padding:10px 12px; border:1px solid #d8e8ea; border-radius:12px; background:#fff; }
.hmi-live-touchscreen { min-width:0; }
.hmi-screen-grid { grid-template-columns:repeat(2,minmax(320px,1fr)); align-items:start; gap:18px; }
.hmi-screen-preview { min-width:0; min-height:360px; padding:16px; border-radius:16px; }
.hmi-screen-preview article { min-height:110px; padding:14px; border-radius:10px; }
.hmi-screen-preview h5 { font-size:14px; letter-spacing:.02em; }
.hmi-screen-flow { align-items:stretch; gap:10px; padding:14px; border:1px solid #d8e8ea; border-radius:12px; background:#fff; }
.hmi-screen-flow span { flex:1 1 120px; justify-content:center; min-height:42px; border-radius:9px; }
.hmi-copy-deck { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.hmi-copy-deck div { min-height:110px; padding:14px; border-radius:10px; }
@media (max-width:900px) { .hmi-screen-grid { grid-template-columns:1fr; } .hmi-copy-deck { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .hmi-touchscreen-designer { padding:12px; } .hmi-demo-controls { align-items:stretch; flex-direction:column; } .hmi-demo-controls button,.hmi-scenario-select { width:100%; } .hmi-scenario-select { justify-content:space-between; } .hmi-copy-deck { grid-template-columns:1fr; } }


/* HMI full-width studio layout */
.plc-grid > #hmiTouchscreenDesigner { grid-column: 1 / -1; width: 100%; min-width: 0; }
.plc-grid > #hmiTouchscreenDesigner .hmi-head { grid-template-columns: minmax(0, 1fr); }
.plc-grid > #hmiTouchscreenDesigner .hmi-demo-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.plc-grid > #hmiTouchscreenDesigner .hmi-screen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.plc-grid > #hmiTouchscreenDesigner .hmi-screen-preview { min-width: 0; min-height: 360px; }
.plc-grid > #hmiTouchscreenDesigner .hmi-copy-deck { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .plc-grid > #hmiTouchscreenDesigner .hmi-screen-grid { grid-template-columns: 1fr; } .plc-grid > #hmiTouchscreenDesigner .hmi-copy-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plc-grid > #hmiTouchscreenDesigner { padding: 12px; } .plc-grid > #hmiTouchscreenDesigner .hmi-demo-controls { flex-direction: column; align-items: stretch; } .plc-grid > #hmiTouchscreenDesigner .hmi-demo-controls > * { width: 100%; } .plc-grid > #hmiTouchscreenDesigner .hmi-copy-deck { grid-template-columns: 1fr; } }

.hmi-mode-label { color:var(--muted); font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.hmi-mode-button.is-active { border-color:var(--teal); background:#dff7f7; color:var(--deep); box-shadow:0 0 0 2px rgba(0,143,159,.12); }
@media (max-width:560px) { .hmi-mode-label { width:100%; } }

.hmi-live-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr); gap:16px; align-items:stretch; }
.hmi-live-layout .hmi-live-touchscreen { margin:0; }
.hmi-build-summary { display:grid; align-content:start; gap:10px; padding:16px; border:1px solid #d8e8ea; border-radius:16px; background:#fff; }
.hmi-build-summary div { display:grid; gap:4px; padding:12px; border:1px solid #e3eff0; border-radius:10px; background:#f8fcfd; }
.hmi-build-summary span { color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.hmi-build-summary strong { color:var(--deep); font-size:15px; line-height:1.25; }
.hmi-build-summary small { color:var(--muted); font-size:11px; line-height:1.35; }
@media (max-width:980px) { .hmi-live-layout { grid-template-columns:1fr; } .hmi-build-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .hmi-build-summary { grid-template-columns:1fr; } }

.hmi-hardware-map { display:grid; gap:6px; margin-top:2px; padding-top:12px; border-top:1px solid #d8e8ea; }
.hmi-hardware-map header { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:0 2px 4px; }
.hmi-hardware-map header span { color:var(--deep); font-size:11px; font-weight:900; letter-spacing:.02em; text-transform:none; }
.hmi-hardware-map header strong { color:var(--teal); font-size:10px; white-space:nowrap; }
.hmi-hardware-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 8px; padding:7px 9px; border:1px solid #e3eff0; border-radius:8px; background:#f8fcfd; }
.hmi-hardware-row span { color:var(--deep); font-size:11px; font-weight:800; letter-spacing:0; text-transform:none; }
.hmi-hardware-row strong { color:var(--teal); font-size:11px; }
.hmi-hardware-row small { grid-column:1/-1; color:var(--muted); font-size:10px; }

.hmi-readiness { display:grid; gap:6px; margin-top:4px; padding-top:12px; border-top:1px solid #d8e8ea; }
.hmi-readiness header { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:0 2px 4px; }
.hmi-readiness header span { color:var(--deep); font-size:11px; font-weight:900; letter-spacing:.02em; text-transform:none; }
.hmi-readiness header strong { color:var(--teal); font-size:10px; white-space:nowrap; }
.hmi-readiness-row { display:grid; grid-template-columns:52px minmax(0,1fr); gap:8px; align-items:start; padding:8px 9px; border:1px solid #e3eff0; border-radius:8px; background:#f8fcfd; }
.hmi-readiness-row > b { color:#9a6a14; font-size:9px; letter-spacing:.04em; }
.hmi-readiness-row[data-ready="pass"] > b { color:#2c7b51; }
.hmi-readiness-row span { display:grid; gap:3px; }
.hmi-readiness-row strong { color:var(--deep); font-size:11px; }
.hmi-readiness-row small { color:var(--muted); font-size:10px; line-height:1.3; }

.hmi-screen-editor { display:grid; gap:12px; margin-top:14px; padding:16px; border:1px solid #d8e8ea; border-radius:16px; background:#fff; }
.hmi-editor-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.hmi-editor-head div { display:grid; gap:3px; }
.hmi-editor-head span:first-child { color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.hmi-editor-head strong { color:var(--deep); font-size:14px; }
.hmi-editor-save { color:#2c7b51; font-size:10px; font-weight:800; }
.hmi-editor-controls, .hmi-editor-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.hmi-editor-fields { grid-template-columns:1fr 1.5fr 1fr auto; align-items:end; }
.hmi-screen-editor label { display:grid; gap:5px; color:var(--muted); font-size:10px; font-weight:850; }
.hmi-screen-editor input, .hmi-screen-editor textarea, .hmi-screen-editor select { width:100%; box-sizing:border-box; padding:9px 10px; border:1px solid #c9dfe1; border-radius:8px; background:#fbfefe; color:var(--deep); font:inherit; font-size:12px; }
@media (max-width:980px) { .hmi-editor-fields { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .hmi-editor-head, .hmi-editor-controls, .hmi-editor-fields { grid-template-columns:1fr; display:grid; } }

.hmi-validation { display:grid; gap:7px; margin-top:14px; padding:16px; border:1px solid #d8e8ea; border-radius:16px; background:#fff; }
.hmi-validation-head { display:flex; justify-content:space-between; gap:10px; align-items:center; padding-bottom:4px; }
.hmi-validation-head span { color:var(--deep); font-size:12px; font-weight:900; }
.hmi-validation-head strong { color:var(--teal); font-size:10px; }
.hmi-validation-row { display:grid; grid-template-columns:54px minmax(0,1fr); gap:8px; padding:9px 10px; border:1px solid #e3eff0; border-radius:9px; background:#f8fcfd; }
.hmi-validation-row > b { color:#2c7b51; font-size:9px; }
.hmi-validation-row[data-valid="review"] > b { color:#a16b16; }
.hmi-validation-row span { display:grid; gap:3px; }
.hmi-validation-row strong { color:var(--deep); font-size:11px; }
.hmi-validation-row small { color:var(--muted); font-size:10px; line-height:1.35; }

.hmi-workbench-strip { display:grid; grid-template-columns:1.2fr repeat(3,1fr); gap:10px; padding:12px; border:1px solid #cfe3e5; border-radius:14px; background:linear-gradient(135deg,#eef9fa,#fff); }
.hmi-workbench-strip div { display:grid; gap:3px; min-width:0; padding:10px 12px; border-left:3px solid #9bd7dc; }
.hmi-workbench-strip div:first-child { border-left-color:var(--teal); }
.hmi-workbench-strip span { color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.hmi-workbench-strip strong { color:var(--deep); font-size:13px; }
.hmi-workbench-strip small { color:var(--muted); font-size:10px; line-height:1.3; }
@media (max-width:900px) { .hmi-workbench-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .hmi-workbench-strip { grid-template-columns:1fr; } }

.hmi-workbench-nav { display:flex; gap:6px; flex-wrap:wrap; padding:6px; border:1px solid #cfe3e5; border-radius:12px; background:#edf8f9; }
.hmi-workbench-nav button { display:flex; justify-content:space-between; align-items:center; gap:10px; flex:1 1 140px; min-height:40px; padding:8px 12px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); font-size:12px; font-weight:900; cursor:pointer; }
.hmi-workbench-nav button b { color:#7aa9ae; font-size:9px; letter-spacing:.08em; }
.hmi-workbench-nav button.is-active b { color:var(--teal); }
.hmi-workbench-nav button:hover, .hmi-workbench-nav button.is-active { border-color:#9bd7dc; background:#fff; color:var(--deep); box-shadow:0 3px 10px rgba(16,78,88,.08); }
.hmi-panel-hidden { display:none !important; }

.hmi-workbench-nav button:focus-visible { outline:3px solid rgba(0,143,159,.3); outline-offset:2px; }

.hmi-engineering-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; }
.hmi-engineering-summary .hmi-hardware-map, .hmi-engineering-summary .hmi-readiness { grid-column:1/-1; }
@media (max-width:700px) { .hmi-engineering-summary { grid-template-columns:1fr; } }

.hmi-workbench-nav { position:sticky; top:10px; z-index:3; box-shadow:0 6px 18px rgba(16,78,88,.06); }

.hmi-build-stages { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) auto; gap:8px; align-items:stretch; padding:10px; border:1px solid #cfe3e5; border-radius:14px; background:#fff; }
.hmi-stage { display:grid; grid-template-columns:auto 1fr; gap:2px 7px; align-content:center; min-width:0; padding:9px 10px; border:1px solid #e3eff0; border-radius:9px; background:#f7fbfb; }
.hmi-stage b { grid-row:1/3; align-self:center; color:#9bb9bc; font-size:10px; }
.hmi-stage span { color:var(--muted); font-size:11px; font-weight:900; }
.hmi-stage small { color:#9ab1b3; font-size:9px; }
.hmi-stage.is-complete { border-color:#92caae; background:#f0fbf3; }
.hmi-stage.is-complete b, .hmi-stage.is-complete span { color:#2c7b51; }
.hmi-build-stages > strong { align-self:center; padding:0 8px; color:var(--teal); font-size:11px; white-space:nowrap; }
@media (max-width:1000px) { .hmi-build-stages { grid-template-columns:repeat(3,minmax(0,1fr)); } .hmi-build-stages > strong { grid-column:1/-1; text-align:right; } }
@media (max-width:560px) { .hmi-build-stages { grid-template-columns:repeat(2,minmax(0,1fr)); } .hmi-build-stages > strong { text-align:left; } }

.hmi-architecture-flow { display:grid; gap:12px; margin-top:14px; padding:16px; border:1px solid #cfe3e5; border-radius:16px; background:linear-gradient(135deg,#f1fbfb,#fff); }
.hmi-architecture-head { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.hmi-architecture-head span { color:var(--deep); font-size:12px; font-weight:900; }
.hmi-architecture-head strong { color:var(--teal); font-size:10px; }
.hmi-architecture-nodes { display:flex; align-items:stretch; gap:6px; overflow:auto; padding-bottom:2px; }
.hmi-architecture-node { display:grid; grid-template-columns:auto 1fr; gap:2px 7px; min-width:150px; flex:1; padding:10px; border:1px solid #d7e8e9; border-radius:10px; background:#fff; }
.hmi-architecture-node b { grid-row:1/3; color:var(--teal); font-size:10px; }
.hmi-architecture-node span { color:var(--deep); font-size:10px; font-weight:900; }
.hmi-architecture-node small { color:var(--muted); font-size:9px; line-height:1.3; }
.hmi-architecture-nodes > i { align-self:center; color:#77aeb2; font-size:18px; font-style:normal; }
@media (max-width:700px) { .hmi-architecture-nodes { display:grid; grid-template-columns:1fr; } .hmi-architecture-nodes > i { display:none; } }

.hmi-system-test-button { justify-self:start; margin-top:2px; }
.hmi-system-test-empty { margin:0; color:var(--muted); font-size:11px; }
.hmi-system-test-results { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.hmi-system-test-results > div { display:grid; gap:4px; padding:9px; border:1px solid #e3eff0; border-radius:9px; background:#f8fcfd; }
.hmi-system-test-results b { color:#2c7b51; font-size:9px; }
.hmi-system-test-results [data-test-status="review"] b { color:#a16b16; }
.hmi-system-test-results span { display:grid; gap:3px; }
.hmi-system-test-results strong { color:var(--deep); font-size:10px; }
.hmi-system-test-results small { color:var(--muted); font-size:9px; line-height:1.3; }
@media (max-width:900px) { .hmi-system-test-results { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .hmi-system-test-results { grid-template-columns:1fr; } }

.hmi-system-test-actions { display:flex; flex-wrap:wrap; gap:8px; }

.hmi-commissioning { display:grid; gap:12px; margin-top:14px; padding:16px; border:1px solid #cfe3e5; border-radius:16px; background:#fff; }
.hmi-commissioning-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.hmi-commissioning-head div { display:grid; gap:4px; }
.hmi-commissioning-head span { color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.hmi-commissioning-head strong { color:var(--deep); font-size:14px; }
.hmi-commissioning-head small { color:var(--muted); font-size:10px; }
.hmi-commissioning-list { display:grid; gap:7px; }
.hmi-commissioning-row { display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:9px; align-items:center; padding:10px; border:1px solid #e3eff0; border-radius:9px; background:#f8fcfd; }
.hmi-commissioning-row input { accent-color:var(--teal); }
.hmi-commissioning-row span { display:grid; gap:3px; }
.hmi-commissioning-row strong { color:var(--deep); font-size:11px; }
.hmi-commissioning-row small { color:var(--muted); font-size:10px; line-height:1.3; }
.hmi-commissioning-row > b { color:#a16b16; font-size:9px; }
.hmi-commissioning-row.is-complete { border-color:#92caae; background:#f0fbf3; }
.hmi-commissioning-row.is-complete > b { color:#2c7b51; }

.hmi-commissioning-actions { display:grid; justify-items:end; gap:8px; }
.hmi-commissioning-actions button { min-height:30px; padding:6px 9px; font-size:10px; }
@media (max-width:560px) { .hmi-commissioning-actions { justify-items:start; } }

.hmi-alarm-console { display:grid; gap:8px; margin-top:14px; padding:16px; border:1px solid #cfe3e5; border-radius:16px; background:#122830; color:#fff; }
.hmi-alarm-head { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.hmi-alarm-head div { display:flex; align-items:center; gap:9px; }
.hmi-alarm-head span { color:#c6e5e7; font-size:12px; font-weight:900; }
.hmi-alarm-head strong { padding:4px 7px; border-radius:5px; background:#1f6d66; color:#d8ffff; font-size:9px; }
.hmi-alarm-head small { color:#8db5ba; font-size:10px; }
.hmi-alarm-console article { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px; border:1px solid rgba(180,230,232,.16); border-radius:9px; background:rgba(255,255,255,.06); }
.hmi-alarm-console article > b { color:#72e4b0; font-size:9px; }
.hmi-alarm-console article[data-alarm-level="warning"] > b { color:#f4c56a; }
.hmi-alarm-console article[data-alarm-level="critical"] > b { color:#ff9b8c; }
.hmi-alarm-console article span { display:grid; gap:3px; }
.hmi-alarm-console article strong { color:#fff; font-size:11px; }
.hmi-alarm-console article small { color:#afd0d3; font-size:10px; line-height:1.3; }
.hmi-alarm-console article em { color:#f4c56a; font-size:10px; font-style:normal; font-weight:800; text-align:right; }
@media (max-width:560px) { .hmi-alarm-console article { grid-template-columns:auto 1fr; } .hmi-alarm-console article em { grid-column:2; text-align:left; } }

.hmi-profile-select { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:10px; color:var(--muted); font-size:11px; font-weight:850; }
.hmi-profile-select select { min-width:180px; padding:8px 9px; border:1px solid #b9d9dc; border-radius:8px; background:#fff; color:var(--deep); font:inherit; }
@media (max-width:560px) { .hmi-profile-select { display:grid; } .hmi-profile-select select { width:100%; } }

.hmi-telemetry { display:grid; gap:10px; margin-top:14px; padding:16px; border:1px solid #cfe3e5; border-radius:16px; background:#071b22; color:#fff; }
.hmi-telemetry-head { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.hmi-telemetry-head div { display:flex; align-items:center; gap:8px; }
.hmi-telemetry-head span { color:#c9e8ea; font-size:12px; font-weight:900; }
.hmi-telemetry-head strong { padding:4px 7px; border-radius:5px; background:#1e6c61; color:#d9ffff; font-size:9px; }
.hmi-telemetry-head small { color:#8cb8bd; font-size:10px; }
.hmi-telemetry-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.hmi-telemetry-grid div { display:grid; gap:4px; padding:10px; border:1px solid rgba(180,230,232,.16); border-radius:9px; background:rgba(255,255,255,.06); }
.hmi-telemetry-grid span { color:#8cb8bd; font-size:9px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.hmi-telemetry-grid strong { color:#fff; font-size:14px; }
.hmi-telemetry-grid small { color:#afd0d3; font-size:9px; }
@media (max-width:700px) { .hmi-telemetry-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px) { .hmi-telemetry-grid { grid-template-columns:1fr; } }

.hmi-quick-actions { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:9px 10px; border:1px solid #cfe3e5; border-radius:12px; background:#e9f7f8; }
.hmi-quick-actions > span { margin-right:4px; color:var(--deep); font-size:11px; font-weight:900; }
.hmi-quick-actions button { padding:8px 10px; border:1px solid #b9d9dc; border-radius:8px; background:#fff; color:var(--deep); font-size:10px; font-weight:850; cursor:pointer; }
.hmi-quick-actions button:hover, .hmi-quick-actions button:focus-visible { border-color:var(--teal); box-shadow:0 0 0 2px rgba(0,143,159,.14); outline:none; }
@media (max-width:560px) { .hmi-quick-actions { align-items:stretch; } .hmi-quick-actions > span, .hmi-quick-actions button { width:100%; } }

.hmi-release-gate { display:grid; gap:12px; margin-top:14px; padding:16px; border:2px solid #e3c777; border-radius:16px; background:#fffaf0; }
.hmi-release-head { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.hmi-release-head div { display:grid; gap:5px; }
.hmi-release-head span { color:#8b6a1a; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.hmi-release-head strong { color:#9b6b12; font-size:14px; }
.hmi-release-head strong.is-ready { color:#26764d; }
.hmi-release-head small { color:var(--muted); font-size:10px; }
.hmi-release-checks { display:flex; flex-wrap:wrap; gap:7px; }
.hmi-release-checks span { padding:7px 9px; border-radius:999px; font-size:10px; font-weight:850; }
.hmi-release-checks .is-pass { background:#e8f8ee; color:#26764d; }
.hmi-release-checks .is-review { background:#ffe9e4; color:#a84e33; }

.hmi-release-actions { display:flex; flex-wrap:wrap; gap:8px; }

/* Group C shared cross-studio context */
.shared-system-context { display:grid; grid-template-columns: minmax(170px,1.2fr) repeat(2,minmax(130px,.8fr)) auto; gap:10px; align-items:center; margin:0 auto 16px; padding:12px 14px; max-width:1280px; background:#10222b; color:#fff; border:1px solid #244854; border-radius:12px; box-shadow:0 14px 28px rgba(16,34,43,.14); }
.shared-system-context > div { min-width:0; display:grid; gap:3px; }
.shared-system-context span { color:#9ed4d8; font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.shared-system-context strong { min-width:0; overflow-wrap:anywhere; font-size:14px; }
.shared-system-context small { min-width:0; overflow-wrap:anywhere; color:#c8e2e4; font-size:11px; }
.shared-system-context nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.shared-system-context nav a, .shared-system-context nav button { display:inline-flex; min-height:30px; align-items:center; padding:6px 9px; border:1px solid #52747b; border-radius:999px; color:#fff; font-size:11px; font-weight:850; text-decoration:none; background:transparent; font:inherit; cursor:pointer; }
.shared-system-context nav a:hover,.shared-system-context nav a:focus-visible,.shared-system-context nav button:hover,.shared-system-context nav button:focus-visible { border-color:#7ce3e8; color:#7ce3e8; outline:none; }
@media (max-width:900px) { .shared-system-context { grid-template-columns:repeat(3,minmax(0,1fr)); } .shared-system-context nav { grid-column:1/-1; justify-content:flex-start; } }
@media (max-width:560px) { .shared-system-context { grid-template-columns:1fr 1fr; } .shared-system-context > div:first-child { grid-column:1/-1; } }

.machine-3d-stage svg { cursor: grab; touch-action: none; }
.machine-3d-stage svg.is-orbiting { cursor: grabbing; }
.machine-3d-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.machine-3d-actions span { color:var(--muted); font-size:11px; font-weight:850; }
@media(max-width:600px) { .machine-3d-actions { justify-content:flex-start; flex-wrap:wrap; } }

.scene-engineering-gates { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:12px 0; }
.scene-engineering-gates article { min-width:0; padding:10px; background:#f7fbfb; border:1px solid var(--line); border-left:4px solid #24764c; }
.scene-engineering-gates article[data-status=review] { border-left-color:#a84e33; }
.scene-engineering-gates span,.scene-engineering-gates strong,.scene-engineering-gates p { display:block; }
.scene-engineering-gates span { color:var(--muted); font-size:10px; font-weight:900; text-transform:uppercase; }
.scene-engineering-gates strong { margin-top:3px; color:var(--deep); font-size:12px; }
.scene-engineering-gates p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.35; }
@media(max-width:760px) { .scene-engineering-gates { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .scene-engineering-gates { grid-template-columns:1fr; } }

.scene-release-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.scene-release-actions strong { color:var(--deep); }
.scene-release-actions span { color:var(--muted); font-size:11px; font-weight:850; }
.scene-release-actions [disabled] { cursor:not-allowed; opacity:.5; }
@media(max-width:560px) { .scene-release-actions { justify-content:flex-start; } }

.scene-release-audit{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2,#f8fafc);font-size:11px}.scene-release-audit strong{color:var(--deep);font-size:12px}.scene-release-audit span,.scene-release-audit small{color:var(--muted)}.scene-release-audit small{text-align:right}@media(max-width:720px){.scene-release-audit{grid-template-columns:1fr}.scene-release-audit small{text-align:left}}

.scene-release-audit .button{justify-self:end;white-space:nowrap}@media(max-width:720px){.scene-release-audit .button{justify-self:start}}

.shared-system-release{display:grid;gap:3px;min-width:128px}.shared-system-release span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:850}.shared-system-release strong{font-size:12px;color:var(--deep)}.shared-system-release strong[data-status=approved]{color:#14835c}.shared-system-release strong[data-status=blocked]{color:#b84c36}
@media(max-width:720px){.shared-system-release{min-width:0}}

.scene-client-review-banner{display:none;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding:10px 12px;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.1);color:#fff}.scene-client-preview-active .scene-client-review-banner{display:flex}.scene-client-review-banner strong{font-size:12px}.scene-client-review-banner span{font-size:11px;color:#d9f6f4}.scene-client-review-banner[data-status=blocked]{border-color:#f0a28c}.scene-client-review-banner[data-status=approved]{border-color:#7cd3af}.scene-client-preview-active .scene-canvas-toolbar > div > button:not(#sceneClientPreview){display:none}@media(max-width:600px){.scene-client-review-banner{display:grid;justify-content:stretch}}

.scene-object:focus-visible{outline:3px solid var(--accent,#f7d36b);outline-offset:4px}.scene-object.is-selected{filter:drop-shadow(0 4px 7px rgba(16,34,43,.2))}.scene-layer-select:focus-visible{outline:2px solid var(--teal);outline-offset:1px}

.render-surface-retry{margin-top:8px;min-height:30px;padding:5px 9px;font-size:11px}

.shared-system-network{display:grid;gap:3px;min-width:120px}.shared-system-network span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:850}.shared-system-network strong{font-size:12px;color:#14835c}.shared-system-network strong[data-status=offline]{color:#b84c36}@media(max-width:720px){.shared-system-network{min-width:0}}

.public-handoff-note{display:inline-flex;align-items:center;gap:6px;margin-top:8px;color:var(--teal);font-size:11px;font-weight:800}.public-handoff-note::before{content:"↗";font-size:14px}

.workspace-runtime-notice{position:sticky;top:72px;z-index:20;margin:8px auto;padding:10px 14px;max-width:1120px;border:1px solid #e6c5b8;border-radius:12px;background:#fff8f5;color:#8d3d2c;box-shadow:0 8px 20px rgba(16,34,43,.08);font-size:12px;font-weight:800}.workspace-runtime-notice[hidden]{display:none}

.system-builder-retry{min-height:30px;padding:5px 9px;font-size:11px}.system-builder-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.system-builder-head .system-builder-status{margin-left:auto}@media(max-width:560px){.system-builder-head .system-builder-status{margin-left:0}}

.shared-system-progress{display:grid;gap:3px;min-width:132px}.shared-system-progress span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:850}.shared-system-progress strong{font-size:12px;color:var(--deep)}.shared-system-progress i{display:block;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--teal) var(--progress,0%),#d8e5e7 var(--progress,0%));font-style:normal}@media(max-width:720px){.shared-system-progress{min-width:0}}

.shared-system-progress small{display:block;max-width:240px;color:var(--muted);font-size:9px;line-height:1.25}

.shared-system-next{justify-self:start;padding:3px 7px;border:0;background:transparent;color:var(--teal);font:inherit;font-size:10px;font-weight:850;text-align:left;cursor:pointer}.shared-system-next:hover,.shared-system-next:focus-visible{text-decoration:underline;outline:none}

.shared-system-context nav button:disabled{cursor:wait;opacity:.65}

.shared-system-health-status{color:var(--muted);font-size:10px;font-weight:800;white-space:nowrap}.shared-system-health-status[data-status=ready]{color:#14835c}.shared-system-health-status[data-status=attention]{color:#b84c36}

.analysis-file-status{display:block;margin-top:6px;color:var(--muted);font-size:11px;line-height:1.35}.analysis-file-status[data-status=error]{color:#a84e33}

.analysis-recommendation-panel{display:grid;gap:14px;margin-top:12px;padding:16px;border:1px solid #9fcfd0;border-radius:16px;background:linear-gradient(135deg,#f2fbfa,#fff)}.analysis-recommendation-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.analysis-recommendation-head h3{margin:0;color:var(--deep)}.analysis-recommendation-head p{margin:5px 0 0;color:var(--muted);font-size:12px}.analysis-recommendation-state{padding:7px 9px;border-radius:999px;background:#d8f3e8;color:#14835c;font-size:10px;white-space:nowrap}.analysis-recommendation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.analysis-recommendation-grid article{display:grid;gap:5px;padding:11px;background:#fff;border:1px solid #c8e0df;border-radius:12px}.analysis-recommendation-grid span,.analysis-recommendation-columns b{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:850}.analysis-recommendation-grid strong{color:var(--deep);font-size:13px}.analysis-recommendation-grid small{color:var(--muted);font-size:10px;line-height:1.35}.analysis-recommendation-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.analysis-recommendation-columns ul{margin:7px 0 0;padding-left:18px;color:var(--deep);font-size:11px;line-height:1.5}.analysis-recommendation-panel > .button{justify-self:start}@media(max-width:720px){.analysis-recommendation-grid,.analysis-recommendation-columns{grid-template-columns:1fr}.analysis-recommendation-head{display:grid}}

.analysis-recommendation-state[data-review=required]{background:#fff0df;color:#9a5a16}.analysis-recommendation-panel[data-review=required]{border-color:#e7c18a;background:linear-gradient(135deg,#fffaf0,#fff)}

.system-builder-capacity-targets{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#f7fbfb}.system-builder-capacity-targets>span{color:var(--muted);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}.system-builder-capacity-targets button{min-height:30px;padding:5px 9px;border:1px solid #b9d4d7;border-radius:999px;background:#fff;color:var(--deep);font:inherit;font-size:11px;font-weight:850;cursor:pointer}.system-builder-capacity-targets button:hover,.system-builder-capacity-targets button:focus-visible{border-color:var(--teal);color:var(--teal);outline:none}

.capacity-source-hint{display:block;margin-top:5px;color:var(--muted);font-size:10px;line-height:1.3}.system-builder-capacity-targets>span{width:100%}

.analysis-comparison{display:grid;gap:10px;margin-top:12px;padding:15px;border:1px solid #9fcfd0;border-radius:16px;background:#f7fcfc}.analysis-comparison-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.analysis-comparison-head h3{margin:0;color:var(--deep)}.analysis-comparison-table{display:grid;gap:5px}.analysis-comparison-row{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:8px;align-items:center;padding:9px;border-radius:9px;background:#fff;border:1px solid #d6e8e7;font-size:11px}.analysis-comparison-row span:first-child{font-weight:800;color:var(--deep)}.analysis-comparison-row[data-status=improved]{border-color:#a9dfc6;background:#f3fff8}.analysis-comparison-row[data-status=review]{border-color:#edcf9b;background:#fffaf0}.analysis-comparison-header{background:#e6f4f3;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:800}.analysis-comparison-note{margin:0;color:var(--muted);font-size:11px;line-height:1.4}@media(max-width:640px){.analysis-comparison-row{grid-template-columns:1fr 1fr}.analysis-comparison-header{display:none}}

.analysis-checklist{display:grid;gap:12px;margin-top:12px;padding:15px;border:1px solid #d7c38b;border-radius:16px;background:#fffaf0}.analysis-checklist-head{display:flex;justify-content:space-between;gap:12px}.analysis-checklist-head h3,.analysis-checklist-head p{margin:3px 0 0}.analysis-checklist-head p,.analysis-checklist-context{color:var(--muted);font-size:11px}.analysis-checklist-list{display:grid;gap:7px}.analysis-checklist-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid #eadcb9;border-radius:10px;background:#fff}.analysis-checklist-row.is-complete{border-color:#abdcc4;background:#f3fff8}.analysis-checklist-row input{accent-color:var(--teal)}.analysis-checklist-row span{display:grid;gap:3px}.analysis-checklist-row strong{font-size:12px;color:var(--deep)}.analysis-checklist-row small{font-size:10px;color:var(--muted)}.analysis-checklist-row b{font-size:10px;color:var(--muted)}.analysis-checklist-row.is-complete b{color:#16835c}@media(max-width:640px){.analysis-checklist-row{grid-template-columns:auto 1fr}.analysis-checklist-row b{grid-column:2}}

/* responsive workstation pass */
@media (max-width:760px){.system-builder-toolbar{display:grid;grid-template-columns:1fr;gap:9px}.system-builder-toolbar>*{width:100%;min-width:0}.system-builder-toolbar button{min-height:42px;text-align:left}.scene-canvas-toolbar{display:grid;gap:9px;align-items:start}.scene-canvas-toolbar>div{display:flex;gap:6px;max-width:100%;overflow-x:auto;padding-bottom:3px}.scene-canvas-toolbar button{flex:0 0 auto}.studio-head,.studio-toolbar,.circuit-studio-head{display:grid;gap:10px}.studio-stage,.circuit-board,.circuit-output,.machine-stage,.machine-3d-stage{min-height:260px;overflow:hidden}.studio-stage svg,.circuit-board svg,.machine-stage svg,.machine-3d-stage svg{max-width:100%;height:auto}.analysis-actions{display:grid;grid-template-columns:1fr}.analysis-actions button{width:100%;min-height:42px}}
@media (max-width:480px){.component-pages{padding-inline:8px}.system-builder-layout{gap:10px}.system-builder-summary,.system-builder-items,.system-builder-capacity-targets{padding:10px}.shared-system-context nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.shared-system-context nav a,.shared-system-context nav button{justify-content:center;min-height:38px}}

.skip-link{position:fixed;left:12px;top:8px;z-index:1000;transform:translateY(-180%);padding:10px 14px;border-radius:9px;background:var(--deep,#10222b);color:#fff;font-weight:850;text-decoration:none;box-shadow:0 8px 22px rgba(0,0,0,.2)}.skip-link:focus{transform:translateY(0);outline:3px solid #7ce3e8;outline-offset:2px}

.fabrication-release-preview{display:grid;gap:12px;max-width:1280px;margin:0 auto 16px;padding:16px;border:1px solid #c8e0df;border-radius:16px;background:linear-gradient(135deg,#f4fbfb,#fff)}.fabrication-release-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.fabrication-release-head h3,.fabrication-release-head p{margin:3px 0 0}.fabrication-release-head p{color:var(--muted);font-size:11px}.fabrication-release-state{padding:7px 10px;border-radius:999px;font-size:10px;white-space:nowrap}.fabrication-release-state.is-ready{background:#d8f3e8;color:#16835c}.fabrication-release-state.is-blocked{background:#fff0df;color:#9a5a16}.fabrication-release-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.fabrication-release-grid article{display:grid;gap:4px;padding:11px;background:#fff;border:1px solid #d8e8e7;border-radius:11px}.fabrication-release-grid span{color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:800}.fabrication-release-grid strong{color:var(--deep);font-size:13px;overflow-wrap:anywhere}.fabrication-release-grid small{color:var(--muted);font-size:10px}.fabrication-release-blockers{padding:10px;border-radius:10px;background:#fffaf0;border:1px solid #ead2a2;color:#8e5c1d;font-size:11px}.fabrication-release-blockers ul{margin:5px 0 0;padding-left:18px}.fabrication-release-clear{margin:0;color:#16835c;font-size:11px;font-weight:800}@media(max-width:760px){.fabrication-release-head{display:grid}.fabrication-release-grid{grid-template-columns:1fr 1fr}}@media(max-width:480px){.fabrication-release-grid{grid-template-columns:1fr}}

.shared-system-health-capabilities{grid-column:1/-1;color:#c8e2e4;font-size:10px;line-height:1.4;overflow-wrap:anywhere}

.crm-portal-release-summary{display:grid;gap:5px;margin:12px 0;padding:13px;border:1px solid #e7c18a;border-radius:12px;background:#fffaf0}.crm-portal-release-summary[data-status=ready]{border-color:#a8ddc3;background:#f3fff8}.crm-portal-release-summary strong{color:var(--deep)}.crm-portal-release-summary small,.crm-portal-release-summary a{color:var(--muted);font-size:11px}.crm-portal-release-summary a{color:var(--teal);font-weight:800}.portal-decision-trail{display:grid;gap:4px;margin-top:4px;padding-top:8px;border-top:1px solid #ead9b9}.portal-decision-trail small{color:var(--muted);font-size:10px}.crm-portal-release-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.crm-portal-release-actions .button{min-height:34px;padding:7px 11px;font-size:11px}@media(max-width:480px){.crm-portal-release-actions{display:grid}.crm-portal-release-actions .button{width:100%}}

.admin-lead-portal-badge{display:inline-flex;width:max-content;padding:4px 7px;border-radius:999px;background:#f1eff8;color:#5f4c91;font-size:10px;font-weight:900}.admin-lead-portal-badge.is-acknowledged{background:#e2f7ed;color:#16734f}.admin-lead-portal-badge.is-changes{background:#fff0df;color:#985819}.admin-lead-portal-badge.is-none{background:#f3f4f6;color:#667085}

.analysis-treatment-products {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: #f7fbfc;
  border: 1px solid var(--line);
}

.analysis-treatment-products-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.analysis-treatment-products-head h3,
.analysis-treatment-products-head p {
  margin: 4px 0 0;
}

.analysis-treatment-products-head p {
  color: var(--muted);
  line-height: 1.45;
  max-width: 760px;
}

.analysis-treatment-products-head > strong {
  color: var(--deep);
  white-space: nowrap;
}

.analysis-treatment-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.analysis-treatment-product {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
}

.analysis-treatment-product[data-catalog-status="htech-sourcing-candidate"] {
  border-top-color: var(--gold);
}

.analysis-treatment-product span,
.analysis-treatment-product small {
  color: var(--muted);
  font-size: 11px;
}

.analysis-treatment-product strong {
  display: block;
  margin-top: 3px;
  color: var(--deep);
  line-height: 1.25;
}

.analysis-treatment-product p {
  margin: 0;
  color: var(--ink);
  line-height: 1.4;
}

.analysis-treatment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.analysis-treatment-actions a {
  color: var(--deep);
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 980px) {
  .analysis-treatment-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .analysis-treatment-products-head {
    display: grid;
  }

  .analysis-treatment-product-grid {
    grid-template-columns: 1fr;
  }
}

.analysis-decision-path {
  display: grid;
  gap: 14px;
}

.analysis-decision-path-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.analysis-decision-path-head h3,
.analysis-decision-path-head p {
  margin: 4px 0 0;
}

.analysis-decision-path-head p {
  color: var(--muted);
  line-height: 1.45;
}

.analysis-decision-path-head > strong {
  padding: 8px 10px;
  color: var(--deep);
  background: #fff7d6;
  border: 1px solid #efd778;
  white-space: nowrap;
}

.analysis-decision-path-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.analysis-decision-path-steps article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  min-height: 74px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid #b7c8cc;
}

.analysis-decision-path-steps article[data-state="done"] { border-top-color: var(--green); }
.analysis-decision-path-steps article[data-state="active"] { border-top-color: var(--teal); background: #f2fcfc; }

.analysis-decision-path-steps i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #fff;
  background: var(--muted);
  border-radius: 50%;
  font-style: normal;
  font-weight: 900;
}

.analysis-decision-path-steps [data-state="done"] i { background: var(--green); }
.analysis-decision-path-steps [data-state="active"] i { background: var(--teal); }
.analysis-decision-path-steps strong,
.analysis-decision-path-steps small { display: block; }
.analysis-decision-path-steps strong { color: var(--deep); }
.analysis-decision-path-steps small { margin-top: 4px; color: var(--muted); line-height: 1.35; }

@media (max-width: 980px) {
  .analysis-decision-path-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .analysis-decision-path-head { display: grid; }
  .analysis-decision-path-steps { grid-template-columns: 1fr; }
}

.scene-status-stack{display:grid;gap:3px;justify-items:end}.scene-status-stack small{color:var(--muted);font-size:10px;font-weight:800}@media(max-width:560px){.scene-status-stack{justify-items:start}}

.scene-render-mode{align-self:center;color:var(--muted);font-size:10px;font-weight:850;white-space:nowrap}@media(max-width:560px){.scene-render-mode{justify-self:start}}

.brand-logo{width:56px;height:40px;object-fit:contain;border-radius:8px;background:#fff}.admin-brand-logo{display:block;width:52px;height:40px;object-fit:contain;border-radius:7px;background:#fff}@media(max-width:560px){.brand-logo{width:48px;height:36px}}


/* Front page mobile shell: keep the official brand, hero art and conversion cards inside the viewport. */
@media (max-width: 820px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .public-header { width: 100%; min-width: 0; gap: 8px; padding: 12px 14px; }
  .public-header .brand { min-width: 0; flex: 1 1 auto; max-width: calc(100% - 68px); gap: 8px; }
  .public-header .brand > span { min-width: 0; overflow: hidden; }
  .public-header .brand strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(11px, 3.3vw, 14px); }
  .public-header .brand small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .public-menu-toggle { flex: 0 0 auto; }
  .public-hero, .public-section, .public-quote { width: calc(100% - 28px); min-width: 0; }
  .public-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 44px 0 52px; }
  .public-hero h1 { max-width: none; font-size: clamp(36px, 11vw, 58px); overflow-wrap: anywhere; }
  .public-hero-copy, .public-section-heading, .public-quote > div { min-width: 0; }
  .public-hero-image { width: 100%; min-height: 300px; }
  .public-hero-image img { min-height: 300px; }
  .public-live-panel { width: min(178px, calc(100% - 24px)); }
  .public-section-tint, .public-section-dark { width: 100%; padding-left: 14px; padding-right: 14px; }
  .public-card-grid, .public-system-grid, .public-service-grid, .public-catalog-list { min-width: 0; }
  .public-footer { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 480px) {
  .public-hero h1 { letter-spacing: -.04em; }
  .public-actions { display: grid; align-items: stretch; }
  .public-actions .button { width: 100%; text-align: center; }
  .public-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .public-hero-image { min-height: 270px; }
  .public-hero-image img { min-height: 270px; }
}


/* Public reveal and dropdown safety */
.public-site [data-reveal] { opacity: 1; transform: none; }
.public-site.reveal-ready [data-reveal] { opacity: 0; transform: translateY(22px); }
.public-site.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
@media (max-width: 820px) {
  .public-header nav.public-nav { max-height: calc(100dvh - 64px); overscroll-behavior: contain; }
}


/* Public shell stability: never trade page content for a delayed reveal or crowded navigation. */
.public-site [data-reveal] { opacity: 1 !important; transform: none !important; }
@media (max-width: 1100px) and (min-width: 821px) {
  .public-header { gap: 12px; padding-left: 24px; padding-right: 24px; }
  .public-header .brand { min-width: 0; flex: 0 1 330px; }
  .public-header nav.public-nav { min-width: 0; flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; }
  .public-header nav.public-nav a { padding: 7px 8px; font-size: 12px; }
}
@media (max-width: 820px) {
  .public-header nav.public-nav { z-index: 30; }
}


/* H-TECH engineering motion layer */
.public-hero-image::before {
  animation: engineeringGridDrift 18s linear infinite;
  background-size: auto, 42px 42px, 42px 42px;
}
.public-hero-image::after {
  animation: engineeringFramePulse 4.5s ease-in-out infinite;
}
.public-hero-orbit {
  transform-origin: center;
  animation: engineeringOrbit 12s linear infinite;
}
.public-orbit-two { animation-duration: 9s; animation-direction: reverse; }
.public-live-dot { animation: engineeringSignal 1.8s ease-in-out infinite; }
.public-live-panel { animation: publicFloat 7s ease-in-out infinite reverse, engineeringTelemetry 3.6s ease-in-out infinite; }
.public-marquee i { animation: engineeringBlink 2.4s steps(2, end) infinite; }
.public-card, .public-system-card, .public-service-grid > div { position: relative; overflow: hidden; }
.public-card::before, .public-system-card::before, .public-service-grid > div::before {
  content: ""; position: absolute; left: -100%; top: 0; width: 72%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal), #8eeeff, transparent);
  animation: engineeringTrace 6s ease-in-out infinite;
}
.public-card:nth-child(2)::before, .public-system-card:nth-child(2)::before { animation-delay: 1.4s; }
.public-card:nth-child(3)::before, .public-system-card:nth-child(3)::before { animation-delay: 2.8s; }
.public-system-card img { transition: transform .8s cubic-bezier(.2,.75,.2,1), filter .8s ease; }
.public-system-card:hover img { transform: scale(1.045); filter: saturate(1.12) contrast(1.05); }
@keyframes engineeringGridDrift { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 0, 42px 0, 0 42px; } }
@keyframes engineeringFramePulse { 0%, 100% { inset: 14px; opacity: .45; } 50% { inset: 20px; opacity: .95; } }
@keyframes engineeringOrbit { from { transform: rotate(0deg) scaleX(.56); } to { transform: rotate(360deg) scaleX(.56); } }
@keyframes engineeringSignal { 0%, 100% { opacity: .72; box-shadow: 0 0 0 4px rgba(93,226,164,.12); } 50% { opacity: 1; box-shadow: 0 0 0 9px rgba(93,226,164,0); } }
@keyframes engineeringTelemetry { 0%, 100% { border-color: rgba(142,238,255,.28); } 50% { border-color: rgba(142,238,255,.82); } }
@keyframes engineeringBlink { 0%, 42% { opacity: 1; } 43%, 100% { opacity: .42; } }
@keyframes engineeringTrace { 0%, 18% { left: -100%; opacity: 0; } 28% { opacity: 1; } 62%, 100% { left: 130%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .public-hero-image::before, .public-hero-image::after, .public-hero-orbit, .public-live-dot, .public-live-panel, .public-marquee i, .public-card::before, .public-system-card::before, .public-service-grid > div::before { animation: none !important; }
  .public-system-card img { transition: none; }
}


/* Catalog card alignment contract */
.public-category-grid, .public-product-grid { align-items: stretch; }
.public-category-card > div, .public-product-card > div { min-width: 0; }
.public-category-card-actions { margin-top: auto; }
.public-product-card-actions a { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .public-category-card-actions, .public-product-card-actions { width: 100%; }
  .public-product-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-product-card-actions a, .public-product-card-actions button { width: 100%; text-align: left; }
  .public-product-card-actions a:last-child { grid-column: 1 / -1; }
}


/* Professional public catalogue system */
.public-category-section, .public-product-showcase { position: relative; }
.public-category-section::before, .public-product-showcase::before {
  display: block; margin-bottom: 12px; color: var(--teal); font-size: 10px; font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase;
}
.public-category-section::before { content: "01 / Equipment families"; }
.public-product-showcase::before { content: "02 / Live equipment catalogue"; }
.public-category-section .public-section-heading, .public-product-showcase .public-section-heading {
  max-width: 760px; margin-bottom: 26px; padding-left: 18px; border-left: 3px solid var(--teal);
}
.public-category-section .public-section-heading h2, .public-product-showcase .public-section-heading h2 {
  margin-top: 4px; font-size: clamp(32px, 4.2vw, 54px); letter-spacing: -.045em;
}
.public-category-filters, .public-product-filters {
  align-items: center; padding: 7px; border: 1px solid #dbe6e9; border-radius: 14px;
  background: #f6fafb; box-shadow: 0 5px 16px rgba(16,34,43,.04);
}
.public-category-filters button, .public-product-filters button {
  border-radius: 999px; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.public-category-filters button:hover, .public-product-filters button:hover { transform: translateY(-1px); }
.public-category-filters button.is-active, .public-product-filters button.is-active {
  background: var(--deep); border-color: var(--deep); box-shadow: 0 5px 12px rgba(18,60,74,.16);
}
.public-product-toolbar {
  padding: 16px; border: 1px solid #dbe6e9; border-radius: 16px;
  background: linear-gradient(135deg, #f8fbfc, #eef6f7);
}
.public-product-search input, .public-product-sort select { border-radius: 9px; background: #fff; }
.public-product-result-count { padding: 9px 11px; border-radius: 999px; background: #e3f3f3; color: var(--deep); }
.public-category-card, .public-product-card {
  border-radius: 14px; box-shadow: 0 8px 22px rgba(16,34,43,.055);
}
.public-category-card:hover, .public-product-card:hover { box-shadow: 0 18px 36px rgba(16,34,43,.13); }
.public-category-card img, .public-product-card img { background: linear-gradient(135deg, #eaf5f6, #f7fbfb); }
.public-category-card h3, .public-product-card h3 { letter-spacing: -.02em; }
.public-category-card-actions a, .public-product-card-actions a, .public-product-card-actions button {
  min-height: 34px; padding: 8px 10px; border-radius: 8px;
}
.public-category-card-actions a:first-child, .public-product-card-actions a:last-child {
  background: #eef8f8; border: 1px solid #cce8e8;
}
@media (max-width: 560px) {
  .public-category-section, .public-product-showcase { width: calc(100% - 28px); }
  .public-category-section .public-section-heading, .public-product-showcase .public-section-heading { padding-left: 12px; }
  .public-product-toolbar { padding: 12px; border-radius: 12px; }
  .public-product-result-count { margin-top: 2px; justify-self: start; }
}


/* Render surface persistence contract: visual canvases must not be clipped by responsive wrappers. */
.component-pages .machine-stage,
.component-pages .studio-stage,
.component-pages .circuit-board,
.component-pages .machine-3d-stage,
.component-pages .cabinet-3d-stage,
.component-pages .clearance-stage,
.component-pages .plumbing-stage,
.component-pages .machine-exploded-stage,
.component-pages .machine-cad-stage {
  min-width: 0;
  overflow: visible;
}
.component-pages .machine-stage svg,
.component-pages .studio-stage svg,
.component-pages .circuit-board svg,
.component-pages .machine-3d-stage svg,
.component-pages .cabinet-3d-stage svg,
.component-pages .clearance-stage svg,
.component-pages .plumbing-stage svg,
.component-pages .machine-exploded-stage svg,
.component-pages .machine-cad-stage svg {
  display: block;
  max-width: 100%;
  overflow: visible;
}


.capacity-route-brief { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:14px; margin:18px 0 4px; padding:16px; border:1px solid #b9e1e3; border-radius:16px; background:linear-gradient(135deg,#f2fbfb,#fff); box-shadow:0 10px 24px rgba(16,78,88,.08); }
.capacity-route-brief-main { min-width:0; }
.capacity-route-brief-main h3 { margin:4px 0 5px; color:var(--deep); font-size:20px; }
.capacity-route-brief-main p { margin:0; color:var(--muted); line-height:1.45; }
.capacity-route-brief-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.capacity-route-brief-facts div { display:grid; gap:3px; min-width:0; padding:9px; border:1px solid #d9ebec; border-radius:10px; background:#fff; }
.capacity-route-brief-facts span { color:var(--muted); font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.05em; }
.capacity-route-brief-facts strong { color:var(--deep); font-size:12px; line-height:1.3; }
.capacity-machine-advanced { margin:14px 0; border:1px solid var(--line); border-radius:14px; background:#fbfefe; }
.capacity-machine-advanced summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 15px; color:var(--deep); font-weight:900; cursor:pointer; list-style:none; }
.capacity-machine-advanced summary::-webkit-details-marker { display:none; }
.capacity-machine-advanced summary::after { content:"＋"; color:var(--teal); font-size:18px; }
.capacity-machine-advanced[open] summary::after { content:"−"; }
.capacity-machine-advanced summary span { margin-left:auto; color:var(--muted); font-size:11px; font-weight:700; }
.capacity-machine-advanced[open] summary { border-bottom:1px solid var(--line); }
.capacity-machine-advanced > div { display:flex; flex-wrap:wrap; align-items:end; gap:10px; padding:14px; }
.capacity-machine-advanced > div > label { display:grid; gap:6px; min-width:160px; color:var(--deep); font-size:12px; font-weight:800; }
.capacity-machine-advanced input,.capacity-machine-advanced select { min-height:42px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--deep); }
@media (max-width:760px) { .capacity-route-brief { grid-template-columns:1fr; } .capacity-route-brief-facts { grid-template-columns:1fr 1fr; } .capacity-machine-advanced summary { align-items:flex-start; } .capacity-machine-advanced summary span { max-width:45%; text-align:right; } }
@media (max-width:480px) { .capacity-route-brief-facts { grid-template-columns:1fr; } .capacity-machine-advanced summary { display:grid; } .capacity-machine-advanced summary span { max-width:none; text-align:left; } }

.capacity-action-strip { display:flex; flex:1 1 100%; flex-wrap:wrap; align-items:center; gap:8px; margin-top:4px; padding:12px; border:1px solid #d9ebec; border-radius:12px; background:#f8fcfc; }
.capacity-action-strip-label { flex:0 0 100%; color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.capacity-action-strip button { min-height:38px; }
@media (max-width:620px) { .capacity-action-strip { display:grid; grid-template-columns:1fr; } .capacity-action-strip button { width:100%; } }

.capacity-route-flow { display:flex; grid-column:1/-1; flex-wrap:wrap; align-items:center; gap:7px; padding-bottom:12px; border-bottom:1px solid #d9ebec; }
.capacity-route-flow a { padding:7px 10px; border:1px solid #cde2e4; border-radius:999px; color:var(--deep); background:#fff; font-size:11px; font-weight:900; text-decoration:none; }
.capacity-route-flow a.is-active { border-color:var(--teal); background:var(--teal); color:#fff; }
.capacity-route-flow span { color:var(--muted); font-weight:900; }
@media (max-width:480px) { .capacity-route-flow { display:grid; grid-template-columns:1fr 1fr; } .capacity-route-flow span { display:none; } .capacity-route-flow a { text-align:center; } }

.capacity-workbench-nav { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:16px 0 2px; padding:8px; border:1px solid var(--line); border-radius:12px; background:#f8fcfc; }
.capacity-workbench-nav > span { margin-right:auto; color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.capacity-workbench-nav button { min-height:34px; padding:7px 11px; border:1px solid #cde2e4; border-radius:999px; background:#fff; color:var(--deep); font:inherit; font-size:11px; font-weight:850; cursor:pointer; }
.capacity-workbench-nav button.is-active { border-color:var(--teal); background:var(--teal); color:#fff; }
.capacity-panel-hidden { display:none !important; }
@media (max-width:620px) { .capacity-workbench-nav { display:grid; grid-template-columns:1fr 1fr; } .capacity-workbench-nav > span { grid-column:1/-1; } .capacity-workbench-nav button { width:100%; } }

.water-atlas-panel { display: grid; gap: 10px; padding: 12px; border: 1px solid #b9dfe1; background: #fff; }
.water-atlas-head { display: flex; justify-content: space-between; gap: 12px; align-items: end; }
.water-atlas-head h3 { margin: 2px 0 0; color: var(--deep); }
.water-atlas-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.water-atlas-head label { display: grid; gap: 5px; min-width: 210px; color: var(--deep); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.water-atlas-summary { display: grid; grid-template-columns: auto auto auto 1fr; gap: 8px; align-items: center; padding: 9px; background: #effafa; border: 1px solid #d4e8ea; color: var(--deep); font-size: 12px; }
.water-atlas-summary span { color: var(--muted); }
.water-atlas-summary small { color: var(--muted); line-height: 1.4; }
.atlas-status { padding: 3px 7px; border-radius: 999px; background: #d9f3e6; color: #17643f !important; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.atlas-status-planned { background: #fff0c8; color: #85570b !important; }
.atlas-status-baseline { background: #e4edf7; color: #295777 !important; }
.water-atlas-locations { display: grid; gap: 7px; }
.water-atlas-locations article { display: grid; grid-template-columns: minmax(170px, .7fr) minmax(220px, 1.3fr) auto; gap: 10px; align-items: center; padding: 9px; border: 1px solid #d4e8ea; background: #fbfefe; }
.water-atlas-locations article div { display: grid; gap: 3px; }
.water-atlas-locations article strong { color: var(--deep); font-size: 12px; }
.water-atlas-locations article small, .water-atlas-locations article span { color: var(--muted); font-size: 11px; line-height: 1.4; }
.water-atlas-locations article button { padding: 7px 9px; border: 1px solid #16818f; background: #effafa; color: var(--deep); font: inherit; font-size: 11px; font-weight: 800; }
@media (max-width: 680px) { .water-atlas-head, .water-atlas-summary { display: grid; grid-template-columns: 1fr; } .water-atlas-head label { min-width: 0; } .water-atlas-locations article { grid-template-columns: 1fr; } .water-atlas-locations article button { justify-self: start; } }

.water-atlas-sources { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid #d4e8ea; }
.water-atlas-source-head { display: grid; gap: 3px; }
.water-atlas-source-head strong { color: var(--deep); font-size: 12px; }
.water-atlas-source-head small { color: var(--muted); font-size: 11px; }
.water-atlas-source-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.water-atlas-source-grid article { display: grid; gap: 4px; padding: 9px; border: 1px solid #d4e8ea; background: #fbfefe; }
.water-atlas-source-grid strong { color: var(--deep); font-size: 11px; }
.water-atlas-source-grid small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.water-atlas-source-grid a { color: var(--teal); font-size: 10px; font-weight: 900; }
.atlas-source-tier { justify-self: start; padding: 2px 6px; border-radius: 999px; background: #e4edf7; color: #295777; font-size: 9px; font-weight: 900; text-transform: uppercase; }
@media (max-width: 860px) { .water-atlas-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .water-atlas-source-grid { grid-template-columns: 1fr; } }

.water-atlas-recommendations { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid #d4e8ea; }
.water-atlas-machine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.water-atlas-machine-grid article { display: grid; gap: 5px; padding: 10px; border: 1px solid #c9e2e4; background: #f8fcfc; }
.water-atlas-machine-grid strong { color: var(--deep); font-size: 12px; }
.water-atlas-machine-grid small, .water-atlas-machine-grid span { color: var(--muted); font-size: 10px; line-height: 1.4; }
.water-atlas-machine-grid button { justify-self: start; padding: 7px 9px; border: 1px solid #16818f; background: #0d7180; color: #fff; font: inherit; font-size: 10px; font-weight: 800; }
@media (max-width: 860px) { .water-atlas-machine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .water-atlas-machine-grid { grid-template-columns: 1fr; } }

.water-quick-test { display: grid; gap: 10px; padding: 12px; border: 1px solid #b9dfe1; background: #f7fcfc; }
.water-quick-test h3 { margin: 2px 0 0; color: var(--deep); }
.water-quick-test p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.water-quick-test-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.water-quick-test-grid label, .water-quick-test-actions label { display: grid; gap: 4px; color: var(--deep); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.water-quick-test input, .water-quick-test select { width: 100%; box-sizing: border-box; min-height: 32px; padding: 6px 7px; border: 1px solid #bdd7da; background: #fff; }
.water-quick-test-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.water-quick-test-actions label { min-width: 170px; }
.water-quick-test-actions button { align-self: end; }
#quickTestStatus { color: var(--teal); font-size: 11px; font-weight: 800; }
@media (max-width: 760px) { .water-quick-test-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .water-quick-test-grid { grid-template-columns: 1fr; } }

.water-test-history, .kebs-investment-panel { display: grid; gap: 9px; padding: 12px; border: 1px solid #b9dfe1; background: #fff; }
.water-test-history h3, .kebs-investment-panel h3 { margin: 2px 0 0; color: var(--deep); }
.water-test-history p, .kebs-investment-panel p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
#waterTestHistoryList { display: grid; gap: 6px; }
#waterTestHistoryList article { display: grid; grid-template-columns: 130px 130px 1fr; gap: 8px; align-items: center; padding: 8px; border: 1px solid #d4e8ea; background: #f8fcfc; font-size: 11px; }
#waterTestHistoryList strong { color: var(--deep); }
#waterTestHistoryList span, #waterTestHistoryList small { color: var(--muted); }
.kebs-investment-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.kebs-investment-head a { color: var(--teal); font-size: 11px; font-weight: 900; white-space: nowrap; }
.kebs-cost-summary { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 9px; background: #effafa; border: 1px solid #d4e8ea; color: var(--deep); font-size: 11px; }
.kebs-cost-summary span, .kebs-cost-summary small { color: var(--muted); }
.kebs-cost-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.kebs-cost-items article { display: grid; gap: 4px; padding: 9px; border: 1px solid #d4e8ea; background: #fbfefe; }
.kebs-cost-items article > span { color: var(--teal); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.kebs-cost-items article strong { color: var(--deep); font-size: 11px; }
.kebs-cost-items article small, .kebs-cost-items article em { color: var(--muted); font-size: 10px; line-height: 1.35; }
.kebs-cost-items article em { color: #a45e13; font-style: normal; }
@media (max-width: 680px) { .kebs-investment-head, #waterTestHistoryList article { display: grid; grid-template-columns: 1fr; } .kebs-cost-items { grid-template-columns: 1fr; } }

.compliance-checklist-panel { display: grid; gap: 10px; padding: 12px; border: 1px solid #b9dfe1; background: #fff; }
.compliance-checklist-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.compliance-checklist-head h3 { margin: 2px 0 0; color: var(--deep); }
.compliance-checklist-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
#complianceChecklistStatus { padding: 5px 8px; border-radius: 999px; background: #effafa; color: var(--teal); font-size: 10px; font-weight: 900; white-space: nowrap; }
.compliance-checklist-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.compliance-checklist-groups section { display: grid; align-content: start; gap: 5px; padding: 9px; border: 1px solid #d4e8ea; background: #fbfefe; }
.compliance-checklist-groups h4 { margin: 0 0 3px; color: var(--deep); font-size: 12px; }
.compliance-check-item { display: grid; grid-template-columns: 18px 1fr; gap: 6px; padding: 6px; border: 1px solid #e1eeee; background: #fff; cursor: pointer; }
.compliance-check-item input { margin-top: 2px; }
.compliance-check-item span { display: grid; gap: 3px; }
.compliance-check-item strong { color: var(--deep); font-size: 10px; line-height: 1.3; }
.compliance-check-item small { color: var(--muted); font-size: 9px; line-height: 1.3; }
.compliance-required { border-left: 3px solid #c65a39; }
.compliance-conditional { border-left: 3px solid #d1a32d; }
.compliance-checklist-sources { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding-top: 8px; border-top: 1px solid #d4e8ea; color: var(--deep); font-size: 10px; }
.compliance-checklist-sources span { color: var(--teal); }
.compliance-checklist-sources a { color: var(--teal); font-weight: 800; }
@media (max-width: 860px) { .compliance-checklist-groups { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .compliance-checklist-head { display: grid; } #complianceChecklistStatus { justify-self: start; } }

.build-checklist-panel { display: grid; gap: 10px; padding: 12px; border: 1px solid #b9dfe1; background: #fff; }
.build-checklist-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.build-checklist-head h3 { margin: 2px 0 0; color: var(--deep); }
.build-checklist-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
#buildChecklistProgress { padding: 5px 8px; border-radius: 999px; background: #effafa; color: var(--teal); font-size: 10px; font-weight: 900; white-space: nowrap; }
.build-checklist-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.build-checklist-groups section { display: grid; align-content: start; gap: 5px; padding: 9px; border: 1px solid #d4e8ea; background: #fbfefe; }
.build-checklist-group-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.build-checklist-group-head h4 { margin: 0 0 3px; color: var(--deep); font-size: 12px; }
.build-checklist-group-head small { color: var(--muted); font-size: 9px; }
.build-check-item { display: grid; grid-template-columns: 18px 1fr; gap: 6px; padding: 6px; border: 1px solid #e1eeee; background: #fff; cursor: pointer; }
.build-check-item span { display: grid; gap: 3px; }
.build-check-item strong { color: var(--deep); font-size: 10px; line-height: 1.3; }
.build-check-item small { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.build-status-ready { border-left: 3px solid #2d9a72; }
.build-status-planned { border-left: 3px solid #d1a32d; }
.build-status-in-progress { border-left: 3px solid #2a83ad; }
@media (max-width: 700px) { .build-checklist-groups { grid-template-columns: 1fr; } .build-checklist-head { display: grid; } #buildChecklistProgress { justify-self: start; } }

.hmap-focus-toolbar { position: sticky; top: 8px; z-index: 8; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border: 1px solid #b9dfe1; background: rgba(247,252,252,.96); box-shadow: 0 4px 12px rgba(13,73,82,.08); }
.hmap-focus-toolbar strong { margin-right: 3px; color: var(--deep); font-size: 11px; text-transform: uppercase; }
.hmap-focus-toolbar button { padding: 7px 9px; border: 1px solid #bdd7da; background: #fff; color: var(--deep); font: inherit; font-size: 10px; font-weight: 800; }
.hmap-focus-toolbar button[aria-pressed="true"] { border-color: #0d7180; background: #0d7180; color: #fff; }
.hmap-focus-toolbar .hmap-secondary-view { margin-left: auto; color: #55767b; }
body[data-workspace-focus]:not([data-workspace-focus="all"]) #main-content > section:not(#hmap-explorer),
body[data-workspace-focus]:not([data-workspace-focus="all"]) #main-content > .workspace-launch { display: none !important; }
body[data-workspace-focus]:not([data-workspace-focus="all"]) .hmap-decision-board,
body[data-workspace-focus]:not([data-workspace-focus="all"]) .failure-guide { display: none !important; }
.hmap-explorer[data-hmap-focus="testing"] .location-profile-select,
.hmap-explorer[data-hmap-focus="testing"] .location-share-actions,
.hmap-explorer[data-hmap-focus="testing"] .water-pin-tools,
.hmap-explorer[data-hmap-focus="testing"] #waterLocationProfileResult,
.hmap-explorer[data-hmap-focus="testing"] .hmap-map-shell,
.hmap-explorer[data-hmap-focus="testing"] #waterPinList,
.hmap-explorer[data-hmap-focus="testing"] #hmapNearbyResults,
.hmap-explorer[data-hmap-focus="testing"] #waterPinInspector,
.hmap-explorer[data-hmap-focus="testing"] #waterAtlasPanel > .water-atlas-head,
.hmap-explorer[data-hmap-focus="testing"] #waterAtlasPanel > #waterAtlasSummary,
.hmap-explorer[data-hmap-focus="testing"] #waterAtlasPanel > #waterAtlasLocations,
.hmap-explorer[data-hmap-focus="testing"] #waterAtlasPanel > #waterAtlasSources,
.hmap-explorer[data-hmap-focus="testing"] #waterAtlasPanel > #waterAtlasRecommendations,
.hmap-explorer[data-hmap-focus="compliance"] #waterAtlasPanel > .water-atlas-head,
.hmap-explorer[data-hmap-focus="compliance"] #waterAtlasPanel > #waterAtlasSummary,
.hmap-explorer[data-hmap-focus="compliance"] #waterAtlasPanel > #waterAtlasLocations,
.hmap-explorer[data-hmap-focus="compliance"] #waterAtlasPanel > #waterAtlasSources,
.hmap-explorer[data-hmap-focus="compliance"] #waterAtlasPanel > #waterAtlasRecommendations,
.hmap-explorer[data-hmap-focus="build"] .water-atlas-panel { display: none !important; }
.hmap-explorer[data-hmap-focus="atlas"] .location-profile-select,
.hmap-explorer[data-hmap-focus="atlas"] .location-share-actions,
.hmap-explorer[data-hmap-focus="atlas"] .water-pin-tools,
.hmap-explorer[data-hmap-focus="atlas"] .hmap-map-shell,
.hmap-explorer[data-hmap-focus="atlas"] #waterPinList,
.hmap-explorer[data-hmap-focus="atlas"] #waterPinInspector,
.hmap-explorer[data-hmap-focus="atlas"] #hmapNearbyResults,
.hmap-explorer[data-hmap-focus="atlas"] .water-quick-test,
.hmap-explorer[data-hmap-focus="atlas"] .water-test-history,
.hmap-explorer[data-hmap-focus="atlas"] .kebs-investment-panel,
.hmap-explorer[data-hmap-focus="atlas"] .compliance-checklist-panel,
.hmap-explorer[data-hmap-focus="atlas"] .build-checklist-panel { display: none !important; }
[data-hmap-panel][hidden] { display: none !important; }
.hmap-explorer[data-hmap-focus="map"] #waterAtlasPanel,
.hmap-explorer[data-hmap-focus="map"] #waterQuickTest,
.hmap-explorer[data-hmap-focus="map"] #waterTestHistory,
.hmap-explorer[data-hmap-focus="map"] #kebsInvestmentPanel,
.hmap-explorer[data-hmap-focus="map"] #complianceChecklistPanel,
.hmap-explorer[data-hmap-focus="map"] #buildChecklistPanel,
.hmap-explorer[data-hmap-focus="map"] #project-decision-board { display: none !important; }
[data-hmap-panel] { scroll-margin-top: 58px; }
@media (max-width: 680px) { .hmap-focus-toolbar { top: 0; } .hmap-focus-toolbar button { flex: 1 1 auto; } }

.hmap-readiness-summary { display: grid; grid-template-columns: auto auto 1fr; gap: 9px; align-items: center; padding: 9px 10px; border: 1px solid #b9dfe1; background: linear-gradient(90deg, #effafa, #fff); color: var(--deep); }
.hmap-readiness-summary strong { font-size: 11px; text-transform: uppercase; }
.hmap-readiness-summary span { padding: 4px 7px; border-radius: 999px; background: #0d7180; color: #fff; font-size: 11px; font-weight: 900; }
.hmap-readiness-summary small { color: var(--muted); font-size: 11px; }
@media (max-width: 600px) { .hmap-readiness-summary { grid-template-columns: 1fr; gap: 5px; } .hmap-readiness-summary span { justify-self: start; } }

.realistic-build-scenarios { display: grid; gap: 8px; padding: 10px; border: 1px solid #b9dfe1; background: #f7fcfc; }
.scenario-head { display: grid; gap: 3px; }
.scenario-head strong { color: var(--deep); font-size: 12px; }
.scenario-head small { color: var(--muted); font-size: 10px; }
.scenario-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.scenario-grid article { display: grid; gap: 5px; padding: 9px; border: 1px solid #d4e8ea; background: #fff; }
.scenario-grid article > span { color: var(--teal); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.scenario-grid article strong { color: var(--deep); font-size: 12px; }
.scenario-grid article small, .scenario-grid article p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.scenario-grid article em { color: #a45e13; font-size: 11px; font-style: normal; font-weight: 900; }
.scenario-grid article button { justify-self: start; padding: 7px 9px; border: 1px solid #16818f; background: #effafa; color: var(--deep); font: inherit; font-size: 10px; font-weight: 800; }
@media (max-width: 860px) { .scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .scenario-grid { grid-template-columns: 1fr; } }

.scenario-grid article > div { display: flex; flex-wrap: wrap; gap: 6px; }
.scenario-grid article [data-scenario-compare][aria-pressed="true"] { border-color: #0d7180; background: #0d7180; color: #fff; }
.scenario-comparison { display: grid; gap: 8px; padding: 10px; border: 1px solid #9bcfd4; background: #fff; }
.scenario-comparison-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.scenario-comparison h4 { margin: 2px 0 0; color: var(--deep); }
#scenarioComparisonStatus { color: var(--teal); font-size: 10px; font-weight: 900; }
.scenario-comparison-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.scenario-comparison-grid article { display: grid; gap: 5px; padding: 9px; border: 1px solid #c9e2e4; background: #f8fcfc; }
.scenario-comparison-grid strong { color: var(--deep); font-size: 12px; }
.scenario-comparison-grid span, .scenario-comparison-grid small, .scenario-comparison-grid p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.scenario-comparison-grid em { color: #a45e13; font-size: 11px; font-style: normal; font-weight: 900; }
.scenario-comparison-grid button { justify-self: start; padding: 6px 8px; border: 1px solid #bdd7da; background: #fff; color: var(--deep); font: inherit; font-size: 10px; font-weight: 800; }
@media (max-width: 700px) { .scenario-comparison-grid { grid-template-columns: 1fr; } }

.investment-calculator { display: grid; gap: 9px; padding: 10px; border: 1px solid #9bcfd4; background: #fff; }
.investment-calculator-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.investment-calculator h4 { margin: 2px 0 0; color: var(--deep); }
.investment-calculator p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.investment-calculator-head button { padding: 7px 9px; border: 1px solid #16818f; background: #0d7180; color: #fff; font: inherit; font-size: 10px; font-weight: 800; white-space: nowrap; }
.investment-input-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.investment-input-grid label { display: grid; gap: 4px; color: var(--deep); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.investment-input-grid input { width: 100%; box-sizing: border-box; min-height: 32px; padding: 6px 7px; border: 1px solid #bdd7da; background: #fff; }
.investment-estimate-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 9px; border: 1px solid #d4e8ea; background: #f8fcfc; color: var(--muted); font-size: 10px; }
.investment-estimate-result > div { display: grid; gap: 3px; padding: 7px; border: 1px solid #e1eeee; background: #fff; }
.investment-estimate-result span { color: var(--muted); font-size: 9px; }
.investment-estimate-result strong { color: var(--deep); font-size: 12px; }
.investment-estimate-result .investment-total { border-color: #0d7180; background: #effafa; }
.investment-estimate-result small { grid-column: 1 / -1; color: #7b5c2d; font-size: 9px; line-height: 1.4; }
@media (max-width: 760px) { .investment-input-grid, .investment-estimate-result { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .investment-calculator-head { display: grid; } .investment-input-grid, .investment-estimate-result { grid-template-columns: 1fr; } }


.client-checkout { width: min(820px, calc(100% - 24px)); max-width: 820px; max-height: 92vh; padding: 0; border: 1px solid #a8d5d9; border-radius: 14px; background: #f7fcfc; color: var(--deep); box-shadow: 0 24px 80px rgba(9, 44, 53, .28); overflow: hidden; }
.client-checkout::backdrop { background: rgba(8, 31, 39, .62); backdrop-filter: blur(2px); }
.checkout-shell { display: grid; gap: 12px; max-height: 92vh; overflow: auto; padding: 18px; }
.checkout-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.checkout-head h2 { margin: 3px 0 4px; color: var(--deep); }
.checkout-head p { margin: 0; max-width: 650px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.checkout-close { width: 34px; height: 34px; border: 1px solid #bdd7da; border-radius: 50%; background: #fff; color: var(--deep); font-size: 22px; cursor: pointer; }
.checkout-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.checkout-steps button { display: grid; grid-template-columns: auto 1fr; gap: 5px; align-items: center; padding: 8px; border: 1px solid #c8e0e2; background: #fff; color: var(--muted); font: inherit; font-size: 10px; font-weight: 900; text-align: left; cursor: pointer; }
.checkout-steps button b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #edf7f7; color: var(--teal); }
.checkout-steps button[aria-pressed="true"] { border-color: var(--teal); background: #0d7180; color: #fff; }
.checkout-steps button[aria-pressed="true"] b { background: #fff; color: var(--teal); }
.checkout-status { padding: 9px 10px; border-left: 4px solid var(--teal); background: #eaf8f8; color: var(--deep); font-size: 11px; line-height: 1.4; }
.checkout-status[data-tone="warning"] { border-color: #c28a2c; background: #fff7e6; }
.checkout-status[data-tone="error"] { border-color: #b64e4e; background: #fff0f0; }
.checkout-status[data-tone="success"] { border-color: #2b9a70; background: #ebfaf2; }
.checkout-step-panel { display: grid; gap: 12px; }
.checkout-review-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 10px; }
.checkout-review { white-space: pre-line; min-height: 150px; padding: 12px; border: 1px solid #c8e0e2; background: #fff; color: var(--deep); font-size: 12px; line-height: 1.65; }
.checkout-customer, .checkout-payment-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; border: 1px solid #c8e0e2; background: #fff; }
.checkout-customer label { display: grid; gap: 4px; color: var(--deep); font-size: 10px; font-weight: 900; }
.checkout-customer input, .checkout-customer select, .checkout-proof input { width: 100%; box-sizing: border-box; min-height: 34px; padding: 7px 8px; border: 1px solid #bdd7da; background: #fff; color: var(--deep); font: inherit; }
.checkout-consent { grid-column: 1 / -1; display: flex !important; grid-template-columns: auto 1fr; align-items: start; gap: 7px; color: var(--muted) !important; font-weight: 700 !important; line-height: 1.35; }
.checkout-consent input { width: auto; min-height: auto; margin-top: 2px; }
.checkout-customer button { grid-column: 1 / -1; justify-self: start; }
.checkout-note { padding: 8px 10px; border: 1px solid #e4d4ad; background: #fff9e9; color: #765b2e; font-size: 10px; line-height: 1.4; }
.checkout-payment-instructions, .checkout-verification-card, .checkout-proof { display: grid; gap: 8px; padding: 14px; border: 1px solid #c8e0e2; background: #fff; }
.checkout-payment-instructions { white-space: normal; color: var(--deep); font-size: 12px; line-height: 1.55; }
.checkout-payment-actions, .checkout-receipt-actions, .checkout-footer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.checkout-proof h3 { margin: 0; color: var(--deep); }
.checkout-proof p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.checkout-proof label { display: grid; gap: 4px; color: var(--deep); font-size: 10px; font-weight: 900; }
.checkout-verification-card strong { color: var(--deep); }
.checkout-verification-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.checkout-receipt { min-height: 180px; padding: 14px; white-space: pre-line; border: 1px solid #96cfc1; background: #effaf3; color: #184e3c; font-size: 12px; line-height: 1.7; }
.checkout-footer { justify-content: space-between; padding-top: 2px; }
.checkout-footer small { max-width: 560px; color: var(--muted); font-size: 10px; line-height: 1.4; }
@media (max-width: 680px) { .client-checkout { width: calc(100% - 10px); } .checkout-shell { padding: 12px; } .checkout-steps { grid-template-columns: repeat(2, 1fr); } .checkout-review-grid, .checkout-customer, .checkout-payment-methods { grid-template-columns: 1fr; } .checkout-consent, .checkout-customer button { grid-column: auto; } }

/* Menu contrast must be last so legacy theme rules cannot override it. */
#componentSideMenu { background: #ffffff !important; border-right-color: #b8cdd0 !important; }
#componentSideMenu .component-side-menu-head,
#componentSideMenu .component-side-menu-head span,
#componentSideMenu .component-side-menu-head strong,
#componentSideMenu nav a,
#componentSideMenu nav a strong { color: #000000 !important; }
#componentSideMenu nav a:hover,
#componentSideMenu nav a.active { background: #e8f7f7 !important; color: #000000 !important; }

/* Compact catalog filter alignment */
.public-product-filters { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.45rem; max-height:10.5rem; overflow-y:auto; overflow-x:hidden; padding:.65rem; border:1px solid rgba(18,60,74,.14); border-radius:14px; background:#f7fafb; align-content:start; }
.public-product-filters button { min-height:2.35rem; text-align:left; }
@media (max-width:640px) { .public-product-filters { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:13rem; } }

.public-product-filters { display:block !important; max-height:16rem; }
.public-filter-group { margin:.15rem 0 .7rem; }
.public-filter-group > strong { display:block; margin:0 0 .35rem; color:#123c4a; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; }
.public-filter-group > div { display:flex; flex-wrap:wrap; gap:.4rem; }
.public-filter-group button { min-height:2.2rem; }

.public-filter-group { border-bottom:1px solid rgba(18,60,74,.12); padding:.2rem 0 .45rem; }
.public-filter-group summary { cursor:pointer; list-style:none; color:#123c4a; font-size:.76rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:.45rem .2rem; }
.public-filter-group summary::-webkit-details-marker { display:none; }
.public-filter-group summary::after { content:"+"; float:right; font-size:1rem; }
.public-filter-group[open] summary::after { content:"−"; }
.public-filter-group > div { padding:.15rem .2rem .35rem; }

.analysis-scan-overlay { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:1rem; background:rgba(4,22,31,.58); backdrop-filter:blur(8px); }
.analysis-scan-overlay[hidden] { display:none; }
.analysis-scan-card { width:min(430px,100%); padding:2rem; border:1px solid rgba(142,238,255,.35); border-radius:24px; color:#eafcff; background:linear-gradient(145deg,#082839,#0e5262); box-shadow:0 24px 70px rgba(0,0,0,.35); text-align:center; }
.analysis-scan-card h3 { margin:.5rem 0; font-size:1.35rem; }
.analysis-scan-card p { color:#c6e9ef; min-height:2.8rem; }
.analysis-scan-bar { height:8px; margin:1.2rem 0 .6rem; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.16); }
.analysis-scan-bar b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#65e6d8,#fff08a); transition:width .35s ease; }
.analysis-scan-orbit { display:flex; justify-content:center; gap:.45rem; margin-bottom:1rem; }
.analysis-scan-orbit i { width:10px; height:10px; border-radius:50%; background:#7ff7e9; animation:analysisScanPulse 1s infinite alternate; }
.analysis-scan-orbit i:nth-child(2) { animation-delay:.2s; } .analysis-scan-orbit i:nth-child(3) { animation-delay:.4s; }
@keyframes analysisScanPulse { from { opacity:.25; transform:scale(.75); } to { opacity:1; transform:scale(1.2); } }

/* Final phone and tablet alignment layer */
@media (max-width: 980px) {
  .component-app-shell { grid-template-columns: 1fr; min-width:0; }
  .component-side-menu { position:relative; top:auto; height:auto; max-height:none; overflow:visible; border-right:0; border-bottom:1px solid #304952; padding:10px 12px; }
  .component-side-menu-head { grid-template-columns:1fr auto; align-items:center; padding:6px 8px 10px; margin-bottom:8px; }
  .component-menu-filters { grid-column:1/-1; flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; }
  .component-menu-filters button { flex:0 0 auto; }
  .component-side-menu nav { display:flex; gap:6px; overflow-x:auto; padding-bottom:3px; scroll-snap-type:x proximity; }
  .component-side-menu nav a { flex:0 0 180px; min-height:48px; scroll-snap-align:start; }
  .component-pages { min-width:0; width:100%; }
  .component-page-header, .component-page, .hmap-explorer, .analysis-decoder { min-width:0; max-width:100%; }
  .topbar { min-width:0; }
}
@media (max-width: 640px) {
  .component-side-menu { padding:8px; }
  .component-side-menu-head { display:block; }
  .component-side-menu-head strong { font-size:14px; }
  .component-side-menu nav a { flex-basis:155px; padding:9px; }
  .component-pages { padding-inline:8px !important; }
  .component-page-header { padding:14px !important; }
  .workspace-launch-head, .workspace-completion-head, .analysis-first-step, .analysis-recommendation-head, .hmap-map-head { display:grid !important; gap:10px; }
  .workspace-launch-actions, .analysis-actions, .public-actions { width:100%; }
  .workspace-launch-actions > *, .analysis-actions > *, .button { max-width:100%; }
  .analysis-first-inputs, .analysis-recommendation-grid, .analysis-recommendation-columns, .decoder-grid { grid-template-columns:1fr !important; }
  .analysis-first-inputs textarea, .analysis-first-inputs input { min-width:0; width:100%; }
  .hmap-focus-toolbar { position:static !important; display:flex; overflow-x:auto; }
  .hmap-focus-toolbar button { flex:0 0 auto; }
  .hmap-map-stage, .hmap-map-fallback { min-height:300px !important; }
  .topbar { padding-inline:10px !important; }
  .topbar nav { max-width:100%; overflow-x:auto; }
}

.analysis-extracted-preview{margin:0 0 1rem;border:1px solid rgba(40,80,110,.2);border-radius:14px;background:#f7fbfd;padding:.75rem 1rem}.analysis-extracted-preview summary{cursor:pointer;font-weight:700}.analysis-extracted-preview pre{max-height:260px;overflow:auto;white-space:pre-wrap;font:12px/1.5 ui-monospace,monospace;color:#183247;margin:.75rem 0 0}

.analysis-lab-status{display:inline-block;margin-left:.45rem;font-size:.68rem;border-radius:999px;padding:.15rem .4rem;background:#dcefe4;color:#145c35}.analysis-lab-status[data-status="FAIL"]{background:#ffe1df;color:#9b2923}

.analysis-sizing-budget{display:grid;grid-template-columns:1fr 140px 220px;gap:1rem;margin-top:1rem;padding:1rem;border:1px solid #c5d7df;border-radius:16px;background:#f5fafc}.analysis-sizing-budget label{display:grid;gap:.35rem;font-weight:700}.analysis-sizing-budget input,.analysis-sizing-budget select{padding:.65rem;border:1px solid #b8cad4;border-radius:10px}.analysis-sizing-budget [role=status]{grid-column:1/-1;padding:.7rem;border-radius:10px;background:#e8f0f4}@media(max-width:760px){.analysis-sizing-budget{grid-template-columns:1fr}}

.analysis-capacity-options{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem}.analysis-capacity-option{display:grid;gap:.2rem;text-align:left;padding:.7rem;border:1px solid #c5d7df;border-radius:12px;background:#fff;cursor:pointer}.analysis-capacity-option.is-selected{border-color:#16818f;box-shadow:0 0 0 2px #16818f33}.analysis-capacity-option span{font-size:.75rem}.analysis-capacity-option small{color:#607582}@media(max-width:760px){.analysis-capacity-options{grid-template-columns:repeat(2,1fr)}}

@media (prefers-reduced-motion:no-preference){.analysis-recommendation-panel,.analysis-sizing-budget,.analysis-treatment-product{animation:ht-rise .35s ease both}.analysis-scan-card{animation:ht-pop .28s ease both}.analysis-scan-orbit i{animation:ht-spin 1.5s linear infinite}}@keyframes ht-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes ht-pop{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes ht-spin{to{transform:rotate(360deg)}}@media(max-width:700px){.analysis-recommendation-grid,.analysis-treatment-product-grid{grid-template-columns:1fr!important}.analysis-capacity-options{grid-template-columns:repeat(2,minmax(0,1fr))}.analysis-scan-card{width:min(100%,420px);padding:1.1rem}.analysis-scan-card h3{font-size:1.1rem}.analysis-scan-bar{width:100%}.analysis-actions{display:grid;grid-template-columns:1fr}.analysis-actions .button{width:100%}}

/* Mobile screenshot pass: prevent horizontal bleed and make dense controls touch-safe. */
html,body{max-width:100%;overflow-x:hidden}img,svg,canvas,video{max-width:100%;height:auto}.component-page,.component-pages,.workspace-shell,main{overflow-x:clip}.component-side-menu nav,.component-menu-filters,.topbar nav{scrollbar-width:thin;-webkit-overflow-scrolling:touch}.component-side-menu nav a{white-space:normal;overflow-wrap:anywhere}.analysis-recommendation-panel,.analysis-first-step,.analysis-sizing-budget,.analysis-treatment-products,.hmap-explorer,.capacity-machine-workbench,.client-checkout{max-width:100%;box-sizing:border-box}.analysis-recommendation-grid,.analysis-recommendation-columns,.analysis-treatment-product-grid,.analysis-first-inputs,.decoder-grid{min-width:0}.analysis-recommendation-grid>* ,.analysis-treatment-product-grid>*{min-width:0;overflow-wrap:anywhere}.analysis-extracted-preview pre{max-width:100%;overflow:auto}.button,button,input,select,textarea{font:inherit}.button,button{min-height:44px;touch-action:manipulation}.client-checkout{max-height:calc(100dvh - 16px);overflow:auto}.hmap-map-stage{width:100%;max-width:100%;overflow:hidden}@media(max-width:420px){.component-side-menu nav a{flex-basis:132px}.analysis-capacity-options{grid-template-columns:1fr 1fr!important}.analysis-sizing-budget{padding:.75rem}.analysis-sizing-budget h3{font-size:1rem}.analysis-scan-card{border-radius:16px;padding:1rem}.analysis-scan-card p{font-size:.85rem}.workspace-launch-actions,.analysis-actions{gap:.5rem}.workspace-launch-actions .button,.analysis-actions .button{width:100%}}

.builder-step-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1rem 0;padding:.8rem;border:1px solid #c5d7df;border-radius:14px;background:#f6fafc}.builder-step-guide span{display:grid;grid-template-columns:auto 1fr;column-gap:.5rem;align-items:center;color:#607582}.builder-step-guide b{grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#dce8ed}.builder-step-guide strong{color:#183247}.builder-step-guide small{font-size:.72rem}.builder-step-guide .is-current b{background:#16818f;color:#fff}.builder-step-guide .is-current strong{color:#16818f}.system-builder-active-rail{scroll-margin-top:1rem}.system-builder-active-rail:before{content:"STEP 2 · CONFIGURE THIS MACHINE";display:block;font-size:.7rem;font-weight:800;letter-spacing:.08em;color:#16818f;margin-bottom:.35rem}@media(max-width:600px){.builder-step-guide{grid-template-columns:1fr;gap:.4rem}.builder-step-guide span{padding:.35rem}.system-builder-toolbar{display:grid!important;grid-template-columns:1fr!important}.system-builder-toolbar>*{width:100%!important}.system-builder-active-rail{display:grid!important;grid-template-columns:1fr!important}}

/* Guided workstream handoff */
.component-flow-controls { display:grid; gap:12px; margin-top:14px; }
.component-action-guide { display:grid; gap:6px; padding:12px 14px; border:1px solid rgba(22,129,143,.25); border-left:4px solid var(--teal,#16818f); border-radius:10px; background:linear-gradient(135deg,#f5fbfb,#fff); max-width:760px; }
.component-action-guide-kicker { color:var(--teal,#16818f); font-size:10px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.component-action-guide strong { color:var(--deep,#102b36); font-size:14px; }
.component-action-guide-meta { display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--muted,#63747a); font-size:12px; }
.component-action-guide-meta span { display:inline-flex; gap:5px; }
.component-action-guide-meta b { color:var(--deep,#102b36); }
.component-flow-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
@media (max-width:620px) { .component-action-guide { max-width:none; padding:11px 12px; } .component-action-guide-meta { display:grid; gap:4px; } .component-flow-actions { display:grid; grid-template-columns:1fr; } .component-flow-actions .button { width:100%; text-align:center; } }
@media (prefers-reduced-motion:no-preference) { .component-action-guide { animation:componentPanelIn .3s ease both; } }

/* Builder decision-first layout */
.system-builder-toolbar{display:grid;grid-template-columns:minmax(260px,1.7fr) repeat(4,auto);align-items:end;gap:9px}
.builder-recipe-field span{color:var(--teal);font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.system-builder-advanced-actions{grid-column:1/-1;border-top:1px solid #d8e1e5;padding-top:8px}
.system-builder-advanced-actions summary{cursor:pointer;color:var(--teal);font-size:11px;font-weight:900}
.system-builder-advanced-actions>div{display:flex;flex-wrap:wrap;gap:8px;padding-top:9px}
@media(max-width:980px){.system-builder-toolbar{grid-template-columns:1fr 1fr}.builder-recipe-field{grid-column:1/-1}.system-builder-advanced-actions{grid-column:1/-1}}
@media(max-width:600px){.system-builder-toolbar{grid-template-columns:1fr!important}.builder-recipe-field,.system-builder-advanced-actions{grid-column:auto}.system-builder-advanced-actions>div{display:grid;grid-template-columns:1fr}.system-builder-advanced-actions .button,.system-builder-advanced-actions label{width:100%}}

/* Keep the first builder view calm; deeper engineering detail is progressive. */
.builder-secondary-panel{border:1px solid #d8e4e7;border-radius:12px;background:#fbfdfd;padding:0 12px}
.builder-secondary-panel>summary{cursor:pointer;padding:12px 2px;color:var(--deep);font-size:12px;font-weight:900;list-style-position:inside}
.builder-secondary-panel[open]>summary{border-bottom:1px solid #d8e4e7;margin-bottom:10px;color:var(--teal)}
.builder-secondary-panel .htech-catalog-coverage{margin:0 0 12px;border:0;border-radius:0;padding:4px 0;background:transparent}
.builder-secondary-panel .system-builder-layout{padding-bottom:12px}

.builder-decision-card{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 16px;border:1px solid #b9dfe0;border-left:5px solid var(--teal);border-radius:12px;background:linear-gradient(120deg,#effafa,#fff)}
.builder-decision-card>div{display:grid;gap:4px;min-width:0}.builder-decision-card strong{color:var(--deep);font-size:16px}.builder-decision-card p{margin:0;color:var(--muted);font-size:12px}.builder-decision-card .eyebrow{color:var(--teal);font-size:10px;font-weight:900}
@media(max-width:620px){.builder-decision-card{display:grid;align-items:start}.builder-decision-card .button{width:100%;text-align:center}}

/* Mobile stage focus: keep the active workstream primary and defer global shortcuts. */
@media (max-width:600px){
  body[data-component-page="builder"] .shared-system-context nav,
  body[data-component-page="machine-tinker"] .shared-system-context nav,
  body[data-component-page="plc-simulator"] .shared-system-context nav,
  body[data-component-page="circuit-studio"] .shared-system-context nav{display:none}
  body[data-component-page="builder"] .shared-system-context,
  body[data-component-page="machine-tinker"] .shared-system-context,
  body[data-component-page="plc-simulator"] .shared-system-context,
  body[data-component-page="circuit-studio"] .shared-system-context{grid-template-columns:1fr 1fr;padding:10px}
  body[data-component-page="builder"] .shared-system-context > div:first-child,
  body[data-component-page="machine-tinker"] .shared-system-context > div:first-child,
  body[data-component-page="plc-simulator"] .shared-system-context > div:first-child,
  body[data-component-page="circuit-studio"] .shared-system-context > div:first-child{grid-column:1/-1}
  .component-page-header{position:relative;z-index:3}
  .component-flow{overflow-x:auto;display:flex;flex-wrap:nowrap;padding-bottom:3px}
  .component-flow>a{flex:0 0 auto}
  .component-flow-status,.component-flow-next{flex:0 0 auto}
}

.capacity-preview-copy{min-width:0}.capacity-preview-copy>p{line-height:1.45}.capacity-preview-controls{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 9px}.capacity-preview-controls>button:not(.button){min-height:36px;padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--deep);font-weight:850;cursor:pointer}.capacity-preview-controls>button:not(.button):hover{border-color:var(--teal);color:var(--teal)}.capacity-preview-help,.capacity-preview-note{display:block;font-size:11px;line-height:1.4}.capacity-preview-note{margin-top:10px}.capacity-preview-readout{display:grid;gap:3px;margin-top:13px;padding:10px 12px;border:1px solid #c8e2e3;border-left:4px solid var(--teal);border-radius:10px;background:#f3fbfb}.capacity-preview-readout span{color:var(--teal);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.capacity-preview-readout strong{color:var(--deep);font-size:14px}.capacity-preview-readout small{color:var(--muted);font-size:10px}.capacity-preview-stage{min-width:0;padding:10px;border:1px solid #cfe3e5;border-radius:14px;background:#f4fbfb}.capacity-preview-stage-head{display:flex;justify-content:space-between;gap:8px;padding:2px 4px 8px;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.capacity-preview-stage-head span:last-child{color:var(--teal)}.capacity-preview-legend{display:flex;flex-wrap:wrap;gap:8px 14px;padding:8px 4px 2px;color:var(--muted);font-size:10px}.capacity-preview-legend span{display:inline-flex;align-items:center;gap:5px}.capacity-preview-legend i{display:inline-block;width:9px;height:9px;border-radius:3px}.legend-machine{background:#16818f}.legend-process{background:#16c7d9}.legend-control{background:#f4b942}@media(max-width:760px){.capacity-preview-stage{order:-1}.capacity-preview-controls{display:grid;grid-template-columns:1fr 1fr}.capacity-preview-controls .button{grid-column:1/-1;width:100%}.capacity-preview-controls>button:not(.button){width:100%}}
.capacity-preview-actions{display:grid;grid-template-columns:1fr;gap:7px;margin-top:13px}.capacity-preview-actions .button{width:100%;text-align:center}

/* Final narrow-screen containment pass */
@media (max-width:600px){
  *,*::before,*::after{box-sizing:border-box}
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  main,.workspace-shell,.component-app-shell,.component-pages,.component-pages>section,.component-page-header,.shared-system-context,.product-system-builder,.capacity-machine-configurator,.project-scene-builder,.machine-studio,.plc-studio,.circuit-studio,.quote-request,.catalog{width:100%;max-width:100%;min-width:0}
  .component-pages{padding-inline:8px}
  .component-pages>section,.component-pages [id]{min-width:0}
  .component-pages *{max-width:100%}
  .component-pages img,.component-pages svg,.component-pages canvas,.component-pages video{max-width:100%}
  .component-pages h1,.component-pages h2,.component-pages h3,.component-pages h4,.component-pages p,.component-pages strong,.component-pages small,.component-pages span{overflow-wrap:anywhere}
  .component-pages input,.component-pages select,.component-pages textarea{width:100%;min-width:0;max-width:100%}
  .component-pages table{display:block;width:100%;max-width:100%;overflow-x:auto}
  .component-pages pre,.component-pages code{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
  .capacity-configurator-controls,.system-builder-toolbar,.scene-builder-controls,.studio-toolbar,.studio-head,.circuit-studio-nav,.quote-request form{width:100%;min-width:0}
  .capacity-configurator-controls>*,.system-builder-toolbar>*,.scene-builder-controls>*,.studio-toolbar>*,.quote-request form>*{min-width:0;max-width:100%}
  .capacity-machine-visual,.capacity-cut-layout-wrap,.capacity-component-workbench,.scene-builder-layout,.machine-studio-layout,.studio-layout,.circuit-layout,.quote-request-layout{grid-template-columns:1fr!important;min-width:0}
  .capacity-machine-visual{padding:12px}
  #capacityMachine3dSvg,#capacityMachineCutLayout,#capacityComponentLayout{width:100%;height:auto;min-height:190px}
  .capacity-preview-stage{width:100%;min-width:0;overflow:hidden}
  .capacity-preview-stage-head,.capacity-preview-legend{min-width:0;flex-wrap:wrap}
  .system-builder-items,.system-builder-summary,.system-builder-layout{min-width:0}
  .system-builder-items{grid-template-columns:1fr!important}
  .system-builder-summary{overflow-wrap:anywhere}
  .component-flow-controls,.component-flow-actions,.component-action-guide{min-width:0;max-width:100%}
  .component-flow-actions .button,.component-page-header>.button{width:100%;max-width:100%}
  .shared-system-context{overflow:hidden}
  .shared-system-context>div{min-width:0;max-width:100%}
  .shared-system-context strong,.shared-system-context small{overflow-wrap:anywhere}
  .shared-system-context nav{min-width:0;max-width:100%;overflow:hidden}
  .button,button{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .checkout-shell,.client-checkout,.checkout-footer,.checkout-head{min-width:0;max-width:100%}
}
@media (max-width:360px){
  .component-page-header{padding:12px}
  .product-system-builder,.capacity-machine-configurator,.project-scene-builder{padding:12px}
  .shared-system-context{padding:8px}
  .component-flow a{min-width:96px;padding-inline:7px}
  .capacity-preview-controls{grid-template-columns:1fr!important}
  .capacity-preview-controls .button{grid-column:auto}
  .capacity-preview-legend{display:grid;grid-template-columns:1fr 1fr}
}
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.75,.25,1)}[data-reveal].is-visible{opacity:1;transform:none}.public-card,.public-product-card{transition:transform .24s ease,box-shadow .24s ease}.public-card:hover,.public-product-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(8,31,61,.14)}#publicProductShowcase,#publicCategories{scroll-margin-top:92px}@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}