.icon {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.mes-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 272px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  height: 100vh;
  padding: 1.25rem 1rem;
  border-right: 1px solid var(--bd);
  background: rgb(7 16 10 / 92%);
  backdrop-filter: blur(22px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.sidebar > header {
  padding: 0.4rem 0.55rem 1.6rem;
}

.brand-lockup.compact .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1rem;
}

.brand-lockup.compact .brand-copy {
  font-size: 0.84rem;
}

.sidebar nav {
  padding-right: 0.25rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.nav-section {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 1.35rem;
}

.nav-section > span {
  padding: 0 0.75rem 0.45rem;
  color: var(--tx3);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.nav-item {
  position: relative;
  display: grid;
  min-height: 45px;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--tx2);
  grid-template-columns: 22px 1fr auto;
  gap: 0.7rem;
  align-items: center;
  text-align: left;
  transition: 160ms ease;
}

.nav-item:hover {
  background: var(--s1);
  color: var(--wh);
}

.nav-item.active {
  background: linear-gradient(100deg, rgb(61 220 132 / 16%), rgb(61 220 132 / 5%));
  color: var(--brand-green);
}

.nav-item.active::before {
  position: absolute;
  left: -1rem;
  width: 3px;
  height: 24px;
  border-radius: 0 4px 4px 0;
  background: var(--brand-green);
  box-shadow: 0 0 16px rgb(61 220 132 / 65%);
  content: "";
}

.nav-item b {
  display: grid;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgb(240 82 82 / 18%);
  color: var(--danger);
  font-size: 0.68rem;
  place-items: center;
}

.sidebar footer {
  padding-top: 1rem;
  border-top: 1px solid var(--bd);
}

.user-card {
  display: flex;
  padding: 0.65rem;
  gap: 0.75rem;
  align-items: center;
}

.user-card > span {
  display: grid;
  width: 36px;
  height: 36px;
  border: 1px solid rgb(61 220 132 / 22%);
  border-radius: 11px;
  background: rgb(61 220 132 / 10%);
  color: var(--brand-green);
  font-weight: 800;
  place-items: center;
}

.user-card div {
  display: grid;
  min-width: 0;
}

.user-card strong {
  overflow: hidden;
  color: var(--wh);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-card small {
  color: var(--tx2);
  font-size: 0.68rem;
}

.workspace {
  min-width: 0;
}

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  min-height: 72px;
  padding: 0 2rem;
  border-bottom: 1px solid var(--bd);
  background: rgb(7 16 10 / 72%);
  backdrop-filter: blur(20px);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.global-search {
  display: flex;
  width: min(460px, 50vw);
  height: 42px;
  padding: 0 0.9rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--s1);
  color: var(--tx2);
  align-items: center;
  gap: 0.65rem;
}

.global-search:focus-within {
  border-color: var(--brand-green);
  box-shadow: var(--focus-ring);
}

.global-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tx);
  font-size: 0.82rem;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.alert-button {
  position: relative;
  display: inline-grid;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgb(240 180 41 / 24%);
  border-radius: 11px;
  background: rgb(240 180 41 / 7%);
  color: var(--warn);
  place-items: center;
}

.alert-button b {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  min-width: 19px;
  height: 19px;
  padding-inline: 4px;
  border: 2px solid var(--bg);
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.57rem;
  place-items: center;
}

.icon-button {
  display: inline-grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--bd);
  border-radius: 11px;
  background: var(--s1);
  color: var(--tx2);
  place-items: center;
}

.icon-button:hover {
  border-color: var(--brand-green);
  color: var(--brand-green);
}

.button.quiet {
  background: var(--s1);
  color: var(--tx);
}

.button.compact {
  min-height: 38px;
  padding: 0 0.9rem;
  border-radius: 10px;
  font-size: 0.74rem;
  gap: 0.4rem;
}

.page {
  width: min(1560px, 100%);
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 3rem);
}

.page-head {
  display: flex;
  margin-bottom: 2rem;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.page-head > div {
  max-width: 820px;
}

.page-eyebrow,
.panel-kicker {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--brand-lime);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.page-head h1 {
  margin-bottom: 0.6rem;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
}

.page-head p {
  max-width: 70ch;
  margin: 0;
  color: var(--tx2);
}

.panel {
  border: 1px solid var(--bd);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgb(17 30 21 / 94%), rgb(12 23 16 / 94%));
  box-shadow: 0 16px 42px rgb(0 0 0 / 12%);
}

.panel-head {
  display: flex;
  margin-bottom: 1.25rem;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.panel-head span:first-child {
  color: var(--tx3);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.panel-head h2 {
  margin: 0.25rem 0 0;
  font-size: 1.2rem;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.kpi {
  position: relative;
  min-height: 140px;
  padding: 1.3rem;
  overflow: hidden;
  border: 1px solid var(--bd);
  border-radius: var(--radius-lg);
  background: var(--s0);
}

.kpi::after {
  position: absolute;
  right: -25px;
  bottom: -45px;
  width: 110px;
  height: 110px;
  border: 1px solid var(--bd);
  border-radius: 50%;
  content: "";
}

.kpi > span {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--tx2);
  font-size: 0.76rem;
}

.kpi strong {
  display: block;
  color: var(--wh);
  font-family: var(--font-display);
  font-size: 2.3rem;
  line-height: 1.05;
}

.kpi small {
  display: block;
  margin-top: 0.6rem;
  color: var(--tx3);
}

.kpi.accent {
  border-color: rgb(61 220 132 / 32%);
  background: linear-gradient(145deg, rgb(61 220 132 / 12%), var(--s0));
}

.kpi.warning strong,
.kpi.warning small {
  color: var(--warn);
}

.kpi.danger strong,
.kpi.danger small {
  color: var(--danger);
}

.kpi.success strong {
  color: var(--ok);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.82fr;
  gap: 1rem;
}

.dashboard-grid > .panel {
  min-height: 310px;
  padding: 1.35rem;
}

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

.live-dot {
  color: var(--ok) !important;
  font-size: 0.6rem !important;
}

.live-dot::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 12px var(--ok);
  content: "";
}

.pipeline-chart {
  display: flex;
  height: 210px;
  padding: 1rem 0.25rem 0;
  align-items: end;
  justify-content: space-around;
  gap: 1rem;
}

.bar-wrap {
  display: grid;
  height: 100%;
  min-width: 54px;
  color: var(--tx2);
  font-size: 0.62rem;
  text-align: center;
  grid-template-rows: 22px 1fr 32px;
  align-items: end;
}

.bar-wrap > strong {
  color: var(--wh);
  font-family: var(--font-mono);
}

.bar {
  width: 26px;
  height: 100%;
  margin-inline: auto;
  border-radius: 8px 8px 3px 3px;
  background: var(--s2);
  overflow: hidden;
}

.bar i {
  display: block;
  width: 100%;
  margin-top: auto;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--brand-lime), var(--brand-green));
  box-shadow: 0 0 20px rgb(61 220 132 / 24%);
}

.bought-focus {
  background:
    radial-gradient(circle at 100% 0%, rgb(240 180 41 / 14%), transparent 65%),
    linear-gradient(145deg, var(--s1), var(--s0));
}

.bought-focus > strong {
  display: block;
  margin: 1rem 0 0.4rem;
  color: var(--warn);
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
}

.bought-focus p {
  color: var(--tx2);
}

.cost-composition {
  height: 8px;
  margin: 2rem 0 0.7rem;
  border-radius: 10px;
  background: var(--s3);
  overflow: hidden;
}

.cost-composition i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--warn);
}

.bought-focus small {
  color: var(--tx3);
}

.delivery-list {
  display: grid;
}

.delivery-row {
  display: grid;
  min-height: 58px;
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid var(--bd);
  background: transparent;
  color: var(--tx);
  grid-template-columns: 40px 1fr auto;
  gap: 0.8rem;
  align-items: center;
  text-align: left;
}

.delivery-row:last-child {
  border-bottom: 0;
}

.machine-mini {
  display: grid;
  width: 38px;
  height: 38px;
  border: 1px solid var(--bd2);
  border-radius: 10px;
  background: var(--s2);
  color: var(--brand-green);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  place-items: center;
}

.delivery-row div {
  display: grid;
}

.delivery-row strong {
  color: var(--wh);
  font-size: 0.78rem;
}

.delivery-row small {
  color: var(--tx3);
  font-size: 0.68rem;
}

.delivery-date {
  text-align: right;
}

.delivery-date.late strong,
.delivery-date.late small {
  color: var(--danger);
}

.cpm-card {
  display: grid;
  align-content: space-between;
}

.cpm-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.cpm-values > div:not(.cpm-arrow) {
  display: grid;
}

.cpm-values strong {
  color: var(--wh);
  font-family: var(--font-display);
  font-size: 1.65rem;
}

.cpm-values span {
  color: var(--tx3);
  font-size: 0.65rem;
}

.cpm-arrow {
  color: var(--brand-green);
}

.cpm-card p {
  color: var(--tx2);
  font-size: 0.78rem;
}

.estimate-flag {
  display: inline-flex;
  width: fit-content;
  padding: 0.38rem 0.6rem;
  border: 1px solid rgb(240 180 41 / 28%);
  border-radius: 999px;
  background: rgb(240 180 41 / 8%);
  color: var(--warn);
  font-family: var(--font-mono);
  font-size: 0.59rem;
}

.warning-button {
  border-color: rgb(240 180 41 / 36%);
  background: rgb(240 180 41 / 12%);
  color: var(--warn);
}

.scenario-banner {
  display: flex;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(240 180 41 / 32%);
  border-radius: 12px;
  background: linear-gradient(90deg, rgb(240 180 41 / 12%), transparent);
  color: var(--warn);
  align-items: center;
  gap: 0.8rem;
}

.scenario-banner div {
  display: grid;
}

.scenario-banner strong {
  font-family: var(--font-mono);
  font-size: 0.66rem;
}

.scenario-banner span {
  color: var(--tx2);
  font-size: 0.68rem;
}

.planning-panel {
  padding: 1.25rem;
  overflow: hidden;
}

.gantt {
  min-width: 920px;
  overflow-x: auto;
}

.gantt-head,
.gantt-row {
  display: grid;
  grid-template-columns: 210px minmax(540px, 1fr) 100px;
  align-items: center;
}

.gantt-head {
  min-height: 38px;
  color: var(--tx3);
  font-family: var(--font-mono);
  font-size: 0.56rem;
}

.gantt-head > div {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(4, 1fr);
}

.gantt-head strong {
  display: grid;
  border-left: 1px solid var(--bd);
  align-items: center;
  text-align: center;
}

.gantt-row {
  min-height: 62px;
  border-top: 1px solid var(--bd);
}

.gantt-row.overloaded {
  background: linear-gradient(90deg, transparent, rgb(240 82 82 / 5%));
}

.gantt-center {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}

.gantt-center > span {
  display: grid;
  width: 38px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--section) 14%, var(--s2));
  color: var(--section);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  place-items: center;
}

.gantt-center > div {
  display: grid;
}

.gantt-center strong {
  color: var(--tx);
  font-size: 0.67rem;
}

.gantt-center small {
  color: var(--tx3);
  font-size: 0.57rem;
}

.gantt-track {
  position: relative;
  display: grid;
  height: 42px;
  overflow: hidden;
  border-block: 1px solid var(--bd);
  background: rgb(7 16 10 / 22%);
  grid-template-columns: repeat(4, 1fr);
}

.gantt-track > i {
  border-left: 1px solid var(--bd);
}

.gantt-track button {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: var(--left);
  width: var(--width);
  min-width: 45px;
  height: 25px;
  min-height: 25px;
  padding: 0 0.4rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--order) 72%, white);
  border-radius: 6px;
  background: color-mix(in srgb, var(--order) 25%, var(--s1));
  box-shadow: inset 3px 0 var(--order);
  color: var(--wh);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capacity-value {
  display: grid;
  padding-left: 0.8rem;
  gap: 0.35rem;
}

.capacity-value strong {
  color: var(--wh);
  font-family: var(--font-mono);
  font-size: 0.67rem;
}

.gantt-row.overloaded .capacity-value strong {
  color: var(--danger);
}

.planning-legend {
  display: flex;
  padding-top: 1rem;
  color: var(--tx3);
  font-size: 0.58rem;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.planning-legend > span {
  margin-right: auto;
}

.planning-legend i {
  color: var(--tx2);
  font-style: normal;
}

.planning-legend i::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--order);
  content: "";
}

.planning-bottom > article {
  min-height: 280px;
}

.recommendation-list {
  display: grid;
}

.recommendation-list > div {
  display: grid;
  min-height: 62px;
  border-bottom: 1px solid var(--bd);
  grid-template-columns: 44px 1fr auto;
  gap: 0.75rem;
  align-items: center;
}

.recommendation-list > div > div {
  display: grid;
}

.recommendation-list strong {
  color: var(--wh);
  font-size: 0.69rem;
}

.recommendation-list small {
  color: var(--tx3);
  font-size: 0.59rem;
}

.filter-strip,
.machine-tabs {
  display: flex;
  margin-bottom: 1rem;
  gap: 0.5rem;
  overflow-x: auto;
}

.chip {
  min-height: 38px;
  padding: 0 0.85rem;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--s0);
  color: var(--tx2);
  font-size: 0.72rem;
  white-space: nowrap;
}

.chip.active {
  border-color: var(--brand-green);
  color: var(--brand-green);
}

.chip b {
  margin-left: 0.35rem;
}

.table-panel {
  overflow: hidden;
}

.inside-head {
  display: flex;
  padding: 1.2rem 1.2rem 0;
  align-items: flex-start;
  justify-content: space-between;
}

.inside-head span:first-child {
  color: var(--tx3);
  font-family: var(--font-mono);
  font-size: 0.6rem;
}

.inside-head h2 {
  margin: 0.25rem 0 0;
  font-size: 1.15rem;
}

.material-type {
  display: inline-block;
  margin-bottom: 0.25rem;
  color: var(--brand-lime);
  font-family: var(--font-mono);
  font-size: 0.52rem;
}

.shortage-row {
  background: rgb(240 82 82 / 4%);
}

.shortage-row td:first-child {
  box-shadow: inset 3px 0 var(--danger);
}

.mrp-bottom > article {
  min-height: 330px;
}

.request-list,
.subcontract-list {
  display: grid;
}

.request-list > div {
  display: grid;
  min-height: 62px;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--bd);
  grid-template-columns: 100px 1fr auto;
  gap: 0.7rem;
  align-items: center;
}

.request-list > div > span {
  color: var(--brand-green);
  font-size: 0.58rem;
}

.request-list > div > div {
  display: grid;
}

.request-list strong,
.subcontract-list strong {
  color: var(--wh);
  font-size: 0.7rem;
}

.request-list small,
.subcontract-list small,
.subcontract-list i {
  color: var(--tx3);
  font-size: 0.58rem;
  font-style: normal;
}

.subcontract-list > div {
  display: grid;
  min-height: 76px;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--bd);
  grid-template-columns: 42px 1fr auto;
  gap: 0.7rem;
  align-items: center;
}

.subcontract-list > div.late {
  background: rgb(240 82 82 / 5%);
}

.supplier-mark {
  display: grid;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--s2);
  color: var(--brand-green);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  place-items: center;
}

.subcontract-list > div > div:nth-child(2),
.subcontract-list > div > div:last-child {
  display: grid;
}

.subcontract-list > div > div:last-child {
  justify-items: end;
  gap: 0.35rem;
}

.responsive-table {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 1rem 0.8rem;
  border-bottom: 1px solid var(--bd);
  text-align: left;
  vertical-align: middle;
}

th {
  background: rgb(23 37 25 / 60%);
  color: var(--tx3);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

td {
  color: var(--tx2);
  font-size: 0.76rem;
}

td > strong,
td > small {
  display: block;
}

td > strong {
  color: var(--tx);
}

td > small {
  color: var(--tx3);
}

tbody tr:hover {
  background: rgb(61 220 132 / 3%);
}

.link-strong {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wh);
  font-weight: 700;
}

.model-cell {
  display: flex;
  min-width: 150px;
  gap: 0.7rem;
  align-items: center;
}

.model-cell img {
  width: 48px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  filter: saturate(0.85);
}

.model-cell div {
  display: grid;
}

.model-cell strong {
  color: var(--wh);
}

.model-cell small {
  color: var(--tx3);
}

.progress-cell {
  display: flex;
  min-width: 120px;
  align-items: center;
  gap: 0.5rem;
}

.progress {
  width: 100%;
  height: 6px;
  border-radius: 10px;
  background: var(--s3);
  overflow: hidden;
}

.progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-teal), var(--brand-green));
}

.progress-cell span {
  min-width: 34px;
  color: var(--tx);
  font-family: var(--font-mono);
  font-size: 0.65rem;
}

.status {
  display: inline-flex;
  min-height: 25px;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--bd2);
  border-radius: 999px;
  background: var(--s2);
  color: var(--tx2);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.status.success {
  border-color: rgb(61 220 132 / 24%);
  background: rgb(61 220 132 / 8%);
  color: var(--ok);
}

.status.warning {
  border-color: rgb(240 180 41 / 24%);
  background: rgb(240 180 41 / 8%);
  color: var(--warn);
}

.status.danger {
  border-color: rgb(240 82 82 / 24%);
  background: rgb(240 82 82 / 8%);
  color: var(--danger);
}

.factory-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.section-card {
  position: relative;
  min-height: 340px;
  padding: 1.2rem;
  border: 1px solid var(--bd);
  border-top: 3px solid var(--section);
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, color-mix(in srgb, var(--section) 7%, var(--s1)), var(--s0) 60%);
}

.section-card > header {
  display: flex;
  min-height: 86px;
  gap: 0.85rem;
}

.section-code,
.section-pill {
  display: inline-grid;
  width: 44px;
  height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--section, var(--brand-green)) 15%, var(--s2));
  color: var(--section, var(--brand-green));
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  place-items: center;
}

.section-card h2 {
  margin: 0;
  font-size: 1rem;
}

.section-card p {
  margin-top: 0.3rem;
  color: var(--tx3);
  font-size: 0.7rem;
}

.section-kpis {
  display: grid;
  margin: 0.9rem 0;
  padding: 0.8rem 0;
  border-block: 1px solid var(--bd);
  grid-template-columns: 1fr 1fr;
}

.section-kpis span {
  display: grid;
  color: var(--tx3);
  font-size: 0.62rem;
}

.section-kpis strong {
  color: var(--wh);
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.wip-list {
  min-height: 92px;
}

.wip-list button {
  display: grid;
  width: 100%;
  min-height: 62px;
  padding: 0.55rem;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--s1);
  color: var(--tx2);
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.6rem;
  text-align: left;
}

.wip-list button span {
  color: var(--tx3);
  font-family: var(--font-mono);
  font-size: 0.58rem;
}

.wip-list button strong {
  color: var(--wh);
  font-size: 0.7rem;
}

.wip-list button .progress {
  grid-column: 1 / -1;
}

.section-clear {
  display: grid;
  min-height: 70px;
  border: 1px dashed var(--bd2);
  border-radius: 10px;
  color: var(--tx3);
  font-size: 0.7rem;
  place-items: center;
}

.section-card > footer {
  display: flex;
  margin-top: 1rem;
  gap: 0.5rem;
}

.section-card > footer .button.primary {
  flex: 1;
}

.machine-tabs button {
  position: relative;
  min-width: 150px;
  min-height: 52px;
  padding: 0 1rem;
  border: 1px solid var(--bd);
  border-radius: 13px;
  background: var(--s0);
  color: var(--tx2);
  font-weight: 600;
  text-align: left;
}

.machine-tabs button span {
  display: block;
  color: var(--tx3);
  font-family: var(--font-mono);
  font-size: 0.58rem;
}

.machine-tabs button.active {
  border-color: var(--brand-green);
  background: rgb(61 220 132 / 8%);
  color: var(--wh);
}

.machine-tabs button i {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--warn);
  color: #171005;
  font-size: 0.65rem;
  font-style: normal;
  place-items: center;
}

.file-button {
  position: relative;
  overflow: hidden;
  gap: 0.5rem;
  cursor: pointer;
}

.file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.machine-hero {
  display: grid;
  min-height: 430px;
  padding: 1rem;
  grid-template-columns: minmax(340px, 0.95fr) minmax(400px, 1.05fr);
  gap: 2.2rem;
}

.machine-photo {
  position: relative;
  min-height: 400px;
  border-radius: 16px;
  background: var(--s2);
  overflow: hidden;
}

.machine-photo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(7 16 10 / 76%), transparent 55%);
  content: "";
}

.machine-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.machine-photo > span {
  position: absolute;
  z-index: 2;
  bottom: 1rem;
  left: 1rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
}

.machine-copy {
  display: grid;
  padding: 1.4rem 1.4rem 1.4rem 0;
  align-content: center;
}

.machine-copy h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  line-height: 1.05;
}

.machine-copy > p {
  color: var(--tx2);
}

.spec-strip {
  display: grid;
  margin: 1.4rem 0;
  padding: 1rem 0;
  border-block: 1px solid var(--bd);
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
}

.spec-strip span {
  display: grid;
  color: var(--tx3);
  font-size: 0.59rem;
}

.spec-strip strong {
  color: var(--wh);
  font-family: var(--font-display);
  font-size: 1.3rem;
}

.data-warning,
.critical-banner {
  display: flex;
  padding: 0.85rem;
  border: 1px solid rgb(240 180 41 / 25%);
  border-radius: 12px;
  background: rgb(240 180 41 / 7%);
  color: var(--warn);
  gap: 0.7rem;
}

.data-warning strong,
.critical-banner strong {
  font-size: 0.72rem;
}

.data-warning p,
.critical-banner p {
  margin: 0.2rem 0 0;
  color: var(--tx2);
  font-size: 0.68rem;
}

.data-ready {
  color: var(--ok);
  font-size: 0.74rem;
}

.variant-panel {
  margin-top: 1rem;
  padding: 1.3rem;
}

.variant-grid {
  display: grid;
  grid-template-columns: 2fr 0.65fr 0.65fr;
  gap: 1rem;
  align-items: center;
}

.variant-grid img {
  border-radius: 12px;
}

.variant-grid > div {
  display: grid;
  min-height: 150px;
  padding: 1rem;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--s1);
  align-content: center;
  gap: 0.35rem;
}

.variant-grid strong {
  color: var(--wh);
}

.variant-grid span {
  color: var(--tx2);
  font-size: 0.72rem;
}

.split-grid {
  display: grid;
  margin-top: 1rem;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1rem;
}

.split-grid > article {
  padding: 1.3rem;
}

.routing-list,
.bom-preview {
  display: grid;
}

.routing-list > div {
  display: grid;
  min-height: 50px;
  border-bottom: 1px solid var(--bd);
  grid-template-columns: 24px 8px 1fr;
  gap: 0.65rem;
  align-items: center;
}

.routing-list > div > span {
  color: var(--tx3);
  font-family: var(--font-mono);
  font-size: 0.59rem;
}

.routing-list i {
  width: 4px;
  height: 24px;
  border-radius: 4px;
  background: var(--section);
}

.routing-list div div {
  display: grid;
}

.routing-list strong {
  color: var(--tx);
  font-size: 0.72rem;
}

.routing-list small {
  color: var(--tx3);
  font-size: 0.61rem;
}

.bom-preview > div {
  display: grid;
  min-height: 56px;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--bd);
  grid-template-columns: 1fr auto;
}

.bom-preview span {
  color: var(--tx3);
  font-size: 0.62rem;
}

.bom-preview strong {
  color: var(--wh);
  font-size: 0.72rem;
}

.bom-preview small {
  color: var(--tx3);
  font-size: 0.57rem;
  grid-column: 2;
}

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

.passport {
  overflow: hidden;
  border: 1px solid var(--bd);
  border-radius: var(--radius-lg);
  background: var(--s0);
}

.passport-image {
  position: relative;
  height: 170px;
}

.passport-image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--s0), transparent 70%);
  content: "";
}

.passport-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.passport-image > span {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 0.6rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
}

.passport-body {
  padding: 1rem;
}

.passport-body > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.passport-body > header > span:first-child {
  color: var(--brand-green);
  font-size: 0.7rem;
}

.passport-body h2 {
  margin: 1rem 0 0.2rem;
  font-size: 1.05rem;
}

.passport-body > p {
  color: var(--tx3);
  font-size: 0.7rem;
}

.passport-status {
  display: grid;
  margin-block: 1rem;
  padding-block: 0.8rem;
  border-block: 1px solid var(--bd);
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.passport-status > div {
  display: grid;
  gap: 0.35rem;
}

.passport-status > div > span {
  color: var(--tx3);
  font-size: 0.62rem;
}

.passport-body footer {
  display: flex;
  gap: 0.5rem;
}

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

.gate-panel {
  display: grid;
  margin-top: 1rem;
  padding: 1.3rem;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}

.quality-plan-grid {
  display: grid;
  margin-top: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.quality-plan {
  padding: 1rem;
}

.quality-plan > header {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

.quality-plan > header > div {
  display: grid;
  flex: 1;
}

.quality-plan > header > div span {
  color: var(--tx3);
  font-family: var(--font-mono);
  font-size: 0.55rem;
}

.quality-plan h2 {
  margin: 0.1rem 0 0;
  font-size: 0.88rem;
}

.quality-plan > div {
  display: grid;
  margin-block: 1rem;
  gap: 0.45rem;
}

.quality-plan > div > span {
  display: grid;
  min-height: 60px;
  padding: 0.6rem;
  border: 1px solid var(--bd);
  border-radius: 9px;
  background: var(--s1);
  grid-template-columns: 1fr auto;
}

.quality-plan small {
  color: var(--tx3);
  font-size: 0.59rem;
}

.quality-plan strong {
  color: var(--wh);
  font-size: 0.72rem;
}

.quality-plan i {
  color: var(--brand-green);
  font-size: 0.57rem;
  font-style: normal;
  grid-column: 1 / -1;
}

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

.dispatch-card {
  padding: 1.2rem;
}

.dispatch-card.delivered {
  border-color: rgb(61 220 132 / 25%);
}

.dispatch-card > header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.dispatch-card h2 {
  margin: 0;
  font-size: 1.2rem;
}

.dispatch-card header p {
  margin: 0.25rem 0 0;
  color: var(--tx3);
  font-size: 0.7rem;
}

.dispatch-readiness {
  display: grid;
  margin-block: 1rem;
  padding-block: 0.8rem;
  border-block: 1px solid var(--bd);
  grid-template-columns: 90px 1fr;
  gap: 0.7rem;
  align-items: center;
}

.dispatch-readiness > div {
  display: grid;
  grid-row: span 2;
}

.dispatch-readiness strong {
  color: var(--wh);
  font-family: var(--font-display);
  font-size: 1.8rem;
}

.dispatch-readiness span,
.dispatch-readiness small {
  color: var(--tx3);
  font-size: 0.59rem;
}

.dispatch-checklist {
  display: grid;
  gap: 0.45rem;
}

.dispatch-checklist button {
  display: grid;
  min-height: 44px;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--bd);
  border-radius: 9px;
  background: var(--s1);
  color: var(--tx2);
  grid-template-columns: 28px 1fr;
  gap: 0.5rem;
  align-items: center;
  text-align: left;
}

.dispatch-checklist button i {
  display: grid;
  width: 24px;
  height: 24px;
  border: 1px solid var(--bd2);
  border-radius: 7px;
  color: var(--ok);
  font-style: normal;
  place-items: center;
}

.dispatch-checklist button.done {
  border-color: rgb(61 220 132 / 20%);
  background: rgb(61 220 132 / 5%);
  color: var(--tx);
}

.dispatch-checklist button.done i {
  border-color: var(--ok);
  background: rgb(61 220 132 / 10%);
}

.dispatch-checklist button:disabled {
  cursor: default;
}

.dispatch-meta {
  display: grid;
  margin-block: 1rem;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.dispatch-meta span {
  display: grid;
  padding: 0.55rem;
  border: 1px solid var(--bd);
  border-radius: 8px;
}

.dispatch-meta small {
  color: var(--tx3);
  font-size: 0.52rem;
}

.dispatch-meta strong {
  color: var(--tx);
  font-size: 0.67rem;
}

.dispatch-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.dispatch-card > footer .button:disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.38;
}

.delivery-confirmed {
  color: var(--ok);
  font-size: 0.7rem;
  font-weight: 700;
}

.gate-panel > div:first-child {
  display: flex;
  gap: 1rem;
  color: var(--brand-green);
  align-items: center;
}

.gate-panel h2 {
  margin: 0.2rem 0;
  font-size: 1.1rem;
}

.gate-panel p {
  margin: 0;
  color: var(--tx2);
  font-size: 0.72rem;
}

.gate-panel span {
  color: var(--tx3);
  font-family: var(--font-mono);
  font-size: 0.59rem;
}

.gate-flow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.gate-flow span {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: var(--s1);
}

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

.quotation-pipeline {
  margin-bottom: 1rem;
  padding: 1.2rem;
}

.quotation-pipeline > div {
  display: grid;
}

.quotation-pipeline article {
  display: grid;
  min-height: 66px;
  border-bottom: 1px solid var(--bd);
  grid-template-columns: 110px minmax(180px, 1fr) 130px 100px auto 110px;
  gap: 0.7rem;
  align-items: center;
}

.quotation-pipeline article > span:first-child {
  color: var(--brand-green);
  font-size: 0.57rem;
}

.quotation-pipeline article > div:nth-child(2) {
  display: grid;
}

.quotation-pipeline article > div:nth-child(2) strong {
  color: var(--wh);
  font-size: 0.7rem;
}

.quotation-pipeline article > div:nth-child(2) small {
  color: var(--tx3);
  font-size: 0.58rem;
}

.quote-probability {
  display: grid;
  grid-template-columns: 1fr 30px;
  gap: 0.35rem;
  align-items: center;
}

.quote-probability span {
  color: var(--tx3);
  font-family: var(--font-mono);
  font-size: 0.57rem;
}

.quotation-pipeline article > strong {
  color: var(--wh);
  font-size: 0.7rem;
}

.customer-card {
  padding: 1.2rem;
}

.customer-card > header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.customer-card header > div {
  flex: 1;
}

.customer-avatar {
  display: grid;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--brand-teal), var(--brand-green));
  color: #07100a;
  font-weight: 800;
  place-items: center;
}

.customer-card h2 {
  margin: 0;
  font-size: 1rem;
}

.customer-card header p {
  margin: 0.15rem 0 0;
  color: var(--tx3);
  font-size: 0.68rem;
}

.customer-facts {
  display: grid;
  margin-block: 1rem;
  padding-block: 0.8rem;
  border-block: 1px solid var(--bd);
  grid-template-columns: 1fr 1fr;
}

.customer-facts span {
  display: grid;
  color: var(--tx3);
  font-size: 0.62rem;
}

.customer-facts strong {
  color: var(--wh);
  font-size: 1.3rem;
}

.fleet {
  display: grid;
  gap: 0.45rem;
}

.fleet button {
  display: grid;
  min-height: 48px;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--bd);
  border-radius: 9px;
  background: var(--s1);
  color: var(--tx);
  grid-template-columns: 0.7fr 1fr auto;
  align-items: center;
  text-align: left;
}

.fleet button span,
.fleet button strong {
  font-size: 0.66rem;
}

.next-action {
  display: grid;
  margin-top: 0.8rem;
  padding: 0.8rem;
  border-left: 2px solid var(--brand-green);
  background: rgb(61 220 132 / 5%);
}

.next-action span {
  color: var(--brand-green);
  font-family: var(--font-mono);
  font-size: 0.58rem;
}

.next-action strong {
  margin-top: 0.2rem;
  color: var(--tx);
  font-size: 0.7rem;
}

.maintenance-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1rem;
}

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

.plan-card {
  padding: 1.1rem;
}

.plan-card > header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.plan-card header > div {
  flex: 1;
}

.plan-icon {
  display: grid;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgb(61 220 132 / 9%);
  color: var(--brand-green);
  place-items: center;
}

.plan-card header div span {
  color: var(--tx3);
  font-family: var(--font-mono);
  font-size: 0.58rem;
}

.plan-card h2 {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
}

.interval {
  display: grid;
  margin-block: 1rem;
  padding: 0.7rem;
  border: 1px solid var(--bd);
  border-radius: 10px;
}

.interval strong {
  color: var(--wh);
  font-size: 1.2rem;
}

.interval span {
  color: var(--tx3);
  font-size: 0.62rem;
}

.plan-card ul {
  padding-left: 1.1rem;
  color: var(--tx2);
  font-size: 0.7rem;
}

.plan-card > small {
  color: var(--tx3);
  font-size: 0.58rem;
}

.maintenance-feed {
  padding: 1.2rem;
}

.maintenance-item {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--bd);
}

.maintenance-item > span {
  color: var(--brand-green);
  font-size: 0.59rem;
}

.maintenance-item h3 {
  margin: 0.25rem 0;
  font-size: 0.82rem;
}

.maintenance-item p {
  color: var(--tx3);
  font-size: 0.67rem;
}

.maintenance-item > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.maintenance-item small {
  color: var(--tx3);
}

.critical-banner {
  margin-bottom: 1rem;
}

.programming-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1rem;
}

.programming-grid > article {
  padding: 1.2rem;
}

.software-list {
  display: grid;
}

.software-row {
  display: grid;
  min-height: 88px;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--bd);
  grid-template-columns: 44px 1fr auto;
  gap: 0.8rem;
  align-items: center;
}

.file-ext {
  display: grid;
  width: 44px;
  height: 48px;
  border: 1px solid var(--bd2);
  border-radius: 9px;
  background: var(--s2);
  color: var(--brand-green);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  place-items: center;
}

.software-row > div:nth-child(2) {
  display: grid;
}

.software-row strong {
  color: var(--wh);
  font-size: 0.72rem;
}

.software-row small {
  color: var(--tx3);
  font-size: 0.62rem;
}

.hash {
  margin-top: 0.3rem;
  color: var(--tx3);
  font-size: 0.56rem;
}

.software-row > div:last-child {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

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

.signal-groups section {
  overflow: hidden;
  border: 1px solid var(--bd);
  border-radius: 10px;
}

.signal-groups header {
  display: flex;
  min-height: 34px;
  padding: 0 0.65rem;
  background: var(--s2);
  color: var(--brand-green);
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.58rem;
}

.signal-groups section > div {
  display: grid;
  min-height: 32px;
  padding: 0 0.55rem;
  border-top: 1px solid var(--bd);
  grid-template-columns: 38px 1fr;
  align-items: center;
}

.signal-groups section > div span {
  color: var(--tx3);
  font-size: 0.56rem;
}

.signal-groups section > div strong {
  overflow: hidden;
  color: var(--tx);
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.certificate-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.certificate-card {
  padding: 0.7rem;
  border: 1px solid var(--bd);
  border-radius: var(--radius-lg);
  background: var(--s0);
}

.certificate-thumb {
  position: relative;
  display: grid;
  min-height: 260px;
  padding: 1.2rem;
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0%, rgb(156 203 59 / 25%), transparent 35%),
    linear-gradient(145deg, #f6f9f6, #e6eee8);
  color: #132b19;
  align-content: start;
}

.certificate-thumb > span {
  display: grid;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #2b9b50;
  color: #fff;
  font-weight: 800;
  place-items: center;
}

.certificate-thumb small {
  position: absolute;
  top: 1.6rem;
  left: 4.8rem;
  color: #183d23;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.certificate-thumb h3 {
  max-width: 11ch;
  margin: 3.5rem 0 1rem;
  color: #12331d;
  font-size: 1.5rem;
}

.certificate-thumb strong {
  color: #2b9b50;
  font-size: 0.65rem;
}

.certificate-thumb i {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 52px;
  height: 52px;
  border: 6px double #2b9b50;
  border-radius: 50%;
}

.certificate-meta {
  padding: 0.8rem 0.4rem 0.4rem;
}

.certificate-meta > span {
  color: var(--brand-green);
  font-family: var(--font-mono);
  font-size: 0.58rem;
}

.certificate-meta h2 {
  margin: 0.25rem 0;
  font-size: 0.95rem;
}

.certificate-meta p {
  color: var(--tx3);
  font-size: 0.65rem;
}

.certificate-meta > div {
  display: flex;
  justify-content: space-between;
}

.archive-grid {
  display: grid;
  margin-bottom: 1rem;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
}

.archive-feature {
  display: grid;
  min-height: 360px;
  padding: 1.4rem;
  grid-template-columns: 1fr 190px;
  gap: 1.4rem;
}

.archive-feature h2 {
  font-size: 1.7rem;
}

.archive-feature p {
  color: var(--tx2);
  font-size: 0.75rem;
}

.manual-facts {
  display: grid;
  margin-block: 1rem;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.manual-facts span {
  display: grid;
  padding: 0.65rem;
  border: 1px solid var(--bd);
  border-radius: 9px;
  color: var(--tx3);
  font-size: 0.58rem;
}

.manual-facts strong {
  color: var(--wh);
  font-size: 0.9rem;
}

.manual-cover {
  display: grid;
  min-height: 100%;
  padding: 1rem;
  border-radius: 10px;
  background: linear-gradient(160deg, #1e7e40, #0b3219);
  color: #fff;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 0.9;
  align-content: end;
  box-shadow: 10px 10px 0 rgb(0 0 0 / 25%);
}

.manual-cover span,
.manual-cover small {
  display: block;
}

.manual-cover span {
  color: #9ccb3b;
}

.manual-cover small {
  margin-top: 0.8rem;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 500;
}

.archive-card {
  display: grid;
  padding: 1.2rem;
  align-content: start;
}

.archive-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 2rem;
  border-radius: 14px;
  background: rgb(61 220 132 / 9%);
  color: var(--brand-green);
  place-items: center;
}

.archive-card h2 {
  font-size: 1rem;
}

.archive-card p {
  color: var(--tx2);
  font-size: 0.72rem;
}

.archive-card .button,
.archive-card .estimate-flag {
  margin-top: auto;
}

.archive-grid + .panel {
  padding: 1.2rem;
}

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

.procedure-list button {
  display: grid;
  min-height: 62px;
  padding: 0.6rem;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--s1);
  color: var(--tx2);
  grid-template-columns: 44px 1fr auto;
  gap: 0.7rem;
  align-items: center;
  text-align: left;
}

.procedure-list button div {
  display: grid;
}

.procedure-list strong {
  color: var(--wh);
  font-size: 0.7rem;
}

.procedure-list small {
  color: var(--tx3);
  font-size: 0.59rem;
}

.report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.report-grid > .panel {
  min-height: 310px;
  padding: 1.2rem;
}

.database-health > header {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.health-ring {
  display: grid;
  width: 92px;
  height: 92px;
  border: 8px solid var(--s3);
  border-top-color: var(--brand-green);
  border-right-color: var(--brand-green);
  border-bottom-color: var(--brand-green);
  border-radius: 50%;
  color: var(--wh);
  font-family: var(--font-display);
  font-size: 1.6rem;
  place-items: center;
}

.health-ring small {
  margin-left: -22px;
  margin-top: 22px;
  font-size: 0.55rem;
}

.database-health header div span {
  color: var(--tx3);
  font-family: var(--font-mono);
  font-size: 0.6rem;
}

.database-health h2 {
  margin: 0.2rem 0;
}

.database-health p {
  color: var(--tx2);
  font-size: 0.7rem;
}

.health-list {
  display: grid;
  margin: 1.2rem 0;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.health-list span {
  color: var(--tx2);
  font-size: 0.67rem;
}

.health-list i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--ok);
}

.cost-report {
  display: grid;
  grid-template-columns: 180px 1fr;
}

.cost-report .panel-head {
  grid-column: 1 / -1;
}

.cost-donut {
  display: grid;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(var(--warn) calc(var(--bought) * 1%), var(--brand-green) 0 82%, var(--info) 0);
  place-items: center;
}

.cost-donut::before {
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background: var(--s0);
  content: "";
}

.cost-donut > div {
  position: absolute;
  display: grid;
  text-align: center;
}

.cost-donut strong {
  color: var(--wh);
  font-size: 1.25rem;
}

.cost-donut span {
  color: var(--tx3);
  font-size: 0.55rem;
}

.cost-lines {
  display: grid;
  align-content: center;
}

.cost-lines span {
  display: grid;
  min-height: 42px;
  border-bottom: 1px solid var(--bd);
  color: var(--tx2);
  font-size: 0.66rem;
  grid-template-columns: 10px 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

.cost-lines i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.cost-lines .bought {
  background: var(--warn);
}

.cost-lines .labour {
  background: var(--brand-green);
}

.cost-lines .steel {
  background: var(--info);
}

.cost-lines strong {
  color: var(--wh);
}

.export-actions {
  display: grid;
  gap: 0.6rem;
}

.export-actions button {
  display: grid;
  min-height: 74px;
  padding: 0.8rem;
  border: 1px solid var(--bd);
  border-radius: 11px;
  background: var(--s1);
  color: var(--tx2);
  grid-template-columns: 32px 1fr 24px;
  gap: 0.8rem;
  align-items: center;
  text-align: left;
}

.export-actions button > span {
  display: grid;
}

.export-actions strong {
  color: var(--wh);
  font-size: 0.72rem;
}

.export-actions small {
  color: var(--tx3);
  font-size: 0.62rem;
}

.audit-panel > div:not(.panel-head) {
  display: grid;
  min-height: 42px;
  border-bottom: 1px solid var(--bd);
  grid-template-columns: 80px 1fr 1fr;
  align-items: center;
}

.audit-panel span,
.audit-panel small {
  color: var(--tx3);
  font-size: 0.59rem;
}

.audit-panel strong {
  color: var(--tx);
  font-size: 0.65rem;
}

.variance-bars {
  display: grid;
  gap: 1rem;
}

.variance-bars > div {
  display: grid;
  gap: 0.4rem;
}

.variance-bars span {
  display: flex;
  color: var(--tx2);
  font-size: 0.66rem;
  justify-content: space-between;
}

.variance-bars strong {
  color: var(--wh);
}

.variance-bars i {
  height: 10px;
  border-radius: 999px;
  background: var(--s3);
  overflow: hidden;
}

.variance-bars b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-teal), var(--brand-green));
}

.variance-bars b.over {
  background: linear-gradient(90deg, var(--warn), var(--danger));
}

.execution-breakdown {
  display: grid;
  margin-top: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.execution-breakdown span {
  display: grid;
  padding: 0.7rem;
  border: 1px solid var(--bd);
  border-radius: 9px;
  color: var(--tx3);
  font-size: 0.58rem;
}

.execution-breakdown strong {
  color: var(--wh);
  font-size: 1rem;
}

.scrap-hero {
  display: grid;
  margin-bottom: 1rem;
}

.scrap-hero strong {
  color: var(--warn);
  font-family: var(--font-display);
  font-size: 2.4rem;
}

.scrap-hero span {
  color: var(--tx3);
  font-size: 0.62rem;
}

.scrap-list {
  display: grid;
}

.scrap-list > div {
  display: grid;
  min-height: 46px;
  border-bottom: 1px solid var(--bd);
  grid-template-columns: 42px 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

.scrap-list span {
  color: var(--brand-green);
  font-family: var(--font-mono);
  font-size: 0.58rem;
}

.scrap-list strong {
  color: var(--tx);
  font-size: 0.66rem;
}

.scrap-list small {
  color: var(--tx3);
  font-size: 0.57rem;
}

.sustainability-panel > footer {
  display: flex;
  margin-top: 1rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--bd);
  color: var(--tx3);
  font-size: 0.64rem;
  justify-content: space-between;
}

.sustainability-panel > footer strong {
  color: var(--ok);
}

.overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  padding: 1rem;
  place-items: center;
}

.overlay-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgb(2 8 4 / 76%);
  backdrop-filter: blur(8px);
}

.overlay-card {
  position: relative;
  z-index: 1;
  width: min(680px, 96vw);
  max-height: 94vh;
  padding: 1.5rem;
  overflow-y: auto;
  border: 1px solid var(--bd2);
  border-radius: 20px;
  background: var(--s0);
  box-shadow: 0 30px 100px rgb(0 0 0 / 55%);
}

.wide-overlay .overlay-card {
  width: min(900px, 96vw);
}

.overlay-close {
  position: absolute;
  z-index: 3;
  top: 1rem;
  right: 1rem;
  display: grid;
  width: 40px;
  height: 40px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--s1);
  color: var(--tx2);
  place-items: center;
}

.modal-open {
  overflow: hidden;
}

.detail-modal > header,
.modal-form > header {
  padding-right: 3rem;
}

.detail-modal h1,
.modal-form h1,
.procedure-modal h1 {
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
}

.detail-modal header p {
  color: var(--tx2);
}

.detail-progress {
  padding-block: 1rem;
  border-block: 1px solid var(--bd);
}

.detail-progress > div {
  display: flex;
  margin-top: 0.7rem;
  align-items: center;
  justify-content: space-between;
}

.detail-progress > div > strong {
  color: var(--wh);
  font-family: var(--font-mono);
}

.detail-facts,
.config-grid {
  display: grid;
  margin-block: 1rem;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

.detail-facts span,
.config-grid span {
  display: grid;
  padding: 0.7rem;
  border: 1px solid var(--bd);
  border-radius: 9px;
  background: var(--s1);
}

.detail-facts small,
.config-grid small {
  color: var(--tx3);
  font-size: 0.57rem;
  text-transform: uppercase;
}

.detail-facts strong,
.config-grid strong {
  color: var(--wh);
  font-size: 0.72rem;
}

.detail-modal h2 {
  margin: 1.4rem 0 0.7rem;
  font-size: 0.9rem;
}

.active-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.active-sections > span {
  display: grid;
  min-width: 110px;
  padding: 0.7rem;
  border-left: 3px solid var(--section);
  border-radius: 7px;
  background: var(--s1);
  color: var(--section);
  font-family: var(--font-mono);
  font-size: 0.65rem;
}

.active-sections small {
  color: var(--tx3);
  font-family: var(--font-ui);
  font-size: 0.58rem;
}

.modal-actions {
  display: flex;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bd);
  justify-content: flex-end;
  gap: 0.6rem;
}

.form-grid {
  display: grid;
  margin-top: 1.5rem;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-grid.single {
  grid-template-columns: 1fr;
}

.field input,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 0 0.85rem;
  border: 1px solid var(--bd2);
  border-radius: 10px;
  outline: 0;
  background: var(--s1);
}

.procedure-modal > header {
  display: flex;
  padding-right: 3rem;
  gap: 1rem;
  align-items: flex-start;
}

.formula {
  margin-block: 1rem;
  padding: 1rem;
  border: 1px solid var(--bd2);
  border-radius: 10px;
  background: var(--s2);
  color: var(--brand-green);
  font-family: var(--font-mono);
  text-align: center;
}

.procedure-modal ol {
  padding: 0;
  list-style: none;
  counter-reset: steps;
}

.procedure-modal li {
  position: relative;
  min-height: 52px;
  padding: 0.7rem 0.7rem 0.7rem 3.4rem;
  border-bottom: 1px solid var(--bd);
  counter-increment: steps;
  color: var(--tx);
  font-size: 0.75rem;
}

.procedure-modal li::before {
  position: absolute;
  top: 0.5rem;
  left: 0;
  display: grid;
  width: 32px;
  height: 32px;
  border: 1px solid rgb(61 220 132 / 25%);
  border-radius: 9px;
  background: rgb(61 220 132 / 8%);
  color: var(--brand-green);
  content: counter(steps, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  place-items: center;
}

.procedure-modal footer {
  display: flex;
  margin-top: 1rem;
  align-items: center;
  justify-content: space-between;
}

.procedure-modal footer span {
  color: var(--tx3);
  font-size: 0.6rem;
}

.alerts-modal > header p {
  color: var(--tx2);
}

.alerts-list {
  display: grid;
  margin-top: 1.2rem;
}

.alert-row {
  display: grid;
  min-height: 92px;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--bd);
  grid-template-columns: 36px 1fr auto;
  gap: 0.8rem;
  align-items: center;
}

.alert-row > span {
  display: grid;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgb(240 180 41 / 8%);
  color: var(--warn);
  place-items: center;
}

.alert-row.critica > span,
.alert-row.alta > span {
  background: rgb(240 82 82 / 8%);
  color: var(--danger);
}

.alert-row > div:nth-child(2) {
  display: grid;
}

.alert-row small {
  color: var(--tx3);
  font-family: var(--font-mono);
  font-size: 0.55rem;
}

.alert-row strong {
  margin-top: 0.2rem;
  color: var(--wh);
  font-size: 0.78rem;
}

.alert-row p {
  margin: 0.25rem 0 0;
  color: var(--tx2);
  font-size: 0.66rem;
}

.alert-row > div:last-child {
  display: flex;
  gap: 0.4rem;
}

.terminal-overlay .overlay-card {
  width: min(980px, 98vw);
  padding: 0;
  overflow: hidden;
  background: #07100a;
}

.operator-terminal {
  min-height: 640px;
  padding: 1.5rem;
}

.operator-terminal > header {
  display: flex;
  padding-right: 3.5rem;
  align-items: center;
  justify-content: space-between;
}

.operator-terminal > header > div {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.operator-terminal > header > span {
  color: var(--tx2);
  font-family: var(--font-mono);
}

.terminal-order {
  margin-block: 1.5rem;
  padding: 1.4rem;
  border: 1px solid var(--bd2);
  border-radius: 15px;
  background: linear-gradient(145deg, rgb(61 220 132 / 8%), var(--s0));
}

.terminal-order > span {
  color: var(--brand-green);
  font-size: 0.7rem;
}

.terminal-order h1 {
  margin: 0.4rem 0;
  font-size: 2rem;
}

.terminal-order p {
  color: var(--tx2);
}

.terminal-order .progress {
  height: 12px;
}

.terminal-metrics {
  display: grid;
  margin-bottom: 1rem;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
}

.terminal-metrics div {
  display: grid;
  min-height: 94px;
  padding: 1rem;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--s1);
}

.terminal-metrics span {
  color: var(--tx3);
  font-size: 0.66rem;
}

.terminal-metrics strong {
  color: var(--wh);
  font-family: var(--font-display);
  font-size: 1.6rem;
}

.terminal-metrics .negative strong {
  color: var(--danger);
}

.terminal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.terminal-actions button {
  display: flex;
  min-height: 92px;
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 800;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.terminal-start {
  background: linear-gradient(135deg, var(--brand-lime), var(--brand-green));
  color: #07100a;
}

.terminal-complete {
  border: 1px solid var(--bd2) !important;
  background: var(--s2);
  color: var(--wh);
}

.downtime-reasons {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--bd);
  border-radius: 12px;
}

.downtime-reasons > span {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--tx2);
  font-size: 0.7rem;
}

.downtime-reasons > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.downtime-reasons button {
  display: flex;
  min-height: 42px;
  padding: 0 0.7rem;
  border: 1px solid var(--bd);
  border-radius: 9px;
  background: var(--s1);
  color: var(--tx2);
  font-size: 0.65rem;
  align-items: center;
  gap: 0.45rem;
}

.downtime-reasons i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--reason);
}

.operator-terminal > footer {
  display: flex;
  margin-top: 1rem;
  align-items: center;
  justify-content: space-between;
}

.operator-terminal > footer span {
  color: var(--tx3);
  font-size: 0.6rem;
}

.measurement-form {
  display: grid;
  margin-top: 1rem;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.measurement-form .field > span {
  color: var(--tx3);
  font-size: 0.58rem;
}

.print-overlay .overlay-card {
  width: min(1080px, 98vw);
  padding: 0;
  border: 0;
  background: #dfe6e0;
}

.print-overlay .overlay-close {
  border-color: #cad4cc;
  background: #fff;
  color: #1b3021;
}

.print-toolbar {
  display: flex;
  min-height: 74px;
  padding: 0 4.5rem 0 1.5rem;
  border-bottom: 1px solid #c7d2c9;
  background: #edf2ee;
  color: #1a3020;
  align-items: center;
  justify-content: space-between;
}

.print-toolbar > div {
  display: grid;
}

.print-toolbar span {
  color: #67816d;
  font-size: 0.64rem;
}

.print-toolbar strong {
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.plate-sheet {
  padding-bottom: 2rem;
}

.engraving-plate {
  position: relative;
  width: min(760px, calc(100% - 3rem));
  margin: 2rem auto;
  padding: 1.6rem;
  border: 8px double #2a2a2a;
  border-radius: 8px;
  background:
    linear-gradient(105deg, #d8d8d8, #fff 36%, #c8c8c8 66%, #f6f6f6);
  box-shadow: 0 18px 42px rgb(0 0 0 / 25%);
  color: #171717;
}

.print-watermark {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  padding: 0.7rem 1.3rem;
  border: 4px solid rgb(173 31 31 / 70%);
  color: rgb(173 31 31 / 70%);
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-12deg);
  white-space: nowrap;
}

.certificate-page {
  position: relative;
}

.certificate-mark {
  top: 48%;
  font-size: 2rem;
}

.print-toolbar .button:disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.45;
}

.plate-brand {
  padding-bottom: 0.8rem;
  border-bottom: 3px solid #161616;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.plate-brand small {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
}

.plate-grid {
  display: grid;
  padding-block: 1rem;
  grid-template-columns: 1fr 1fr;
}

.plate-grid span {
  display: grid;
  min-height: 62px;
  padding: 0.5rem;
  border-bottom: 1px solid #555;
  color: #555;
  font-size: 0.58rem;
}

.plate-grid strong {
  color: #111;
  font-size: 1rem;
}

.engraving-plate footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
}

.engraving-plate footer strong {
  font-size: 2rem;
}

.plate-note {
  display: flex;
  width: min(760px, calc(100% - 3rem));
  margin-inline: auto;
  color: #415347;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
}

.certificate-page {
  width: min(850px, calc(100% - 3rem));
  min-height: 1120px;
  margin: 1.5rem auto;
  padding: 3.4rem;
  background:
    radial-gradient(circle at 100% 0%, rgb(156 203 59 / 18%), transparent 30%),
    linear-gradient(145deg, #fff, #f3f6f3);
  box-shadow: 0 20px 55px rgb(0 0 0 / 18%);
  color: #17301e;
}

.cert-top,
.cert-brand,
.cert-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cert-brand {
  gap: 0.7rem;
}

.cert-brand > span {
  display: grid;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(145deg, #9ccb3b, #2a9d58);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  place-items: center;
}

.cert-brand > div {
  display: grid;
}

.cert-brand strong {
  letter-spacing: 0.12em;
}

.cert-brand small {
  color: #66816d;
  font-size: 0.52rem;
  letter-spacing: 0.12em;
}

.cert-number {
  color: #66816d;
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

.cert-title {
  margin-top: 5rem;
}

.cert-title > span {
  color: #2a9d58;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.cert-title h1 {
  margin: 1rem 0;
  color: #142d1b;
  font-size: 3.8rem;
  line-height: 0.9;
}

.cert-title p {
  max-width: 62ch;
  color: #5d7363;
  font-size: 0.82rem;
}

.cert-machine {
  display: grid;
  min-height: 210px;
  margin-block: 2rem;
  overflow: hidden;
  border-radius: 16px;
  background: #132d1b;
  grid-template-columns: 1fr 1.4fr;
}

.cert-machine img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cert-machine > div {
  display: grid;
  padding: 1.8rem;
  align-content: center;
}

.cert-machine span {
  color: #9ccb3b;
  font-size: 0.58rem;
  letter-spacing: 0.15em;
}

.cert-machine h2 {
  margin: 0.5rem 0 1rem;
  color: #fff;
  font-size: 1.4rem;
}

.cert-machine strong {
  color: #8ab496;
  font-size: 0.7rem;
}

.cert-data {
  display: grid;
  margin-block: 1rem;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #d8e2da;
}

.cert-data span {
  display: grid;
  min-height: 80px;
  padding: 0.9rem;
  background: #f7f9f7;
}

.cert-data small {
  color: #718576;
  font-size: 0.5rem;
}

.cert-data strong {
  color: #1b3824;
  font-size: 0.72rem;
}

.cert-statement {
  display: flex;
  margin-top: 2rem;
  padding: 1.2rem;
  border: 1px solid #d4e0d6;
  border-radius: 12px;
  gap: 1rem;
  align-items: center;
}

.cert-seal {
  display: grid;
  width: 70px;
  height: 70px;
  border: 4px double #2a9d58;
  border-radius: 50%;
  color: #2a9d58;
  font-size: 1.5rem;
  font-weight: 800;
  place-items: center;
}

.cert-seal small {
  display: block;
  font-size: 0.35rem;
}

.cert-statement p {
  flex: 1;
  margin: 0;
  color: #5d7363;
  font-size: 0.68rem;
}

.cert-footer {
  margin-top: 4rem;
}

.cert-footer > div:first-child {
  display: grid;
}

.cert-footer span {
  color: #718576;
  font-size: 0.56rem;
}

.cert-footer strong {
  margin-top: 1.2rem;
  font-size: 0.7rem;
}

.cert-footer div:first-child i {
  width: 180px;
  margin-top: 0.4rem;
  border-top: 1px solid #718576;
}

.cert-qr {
  display: grid;
  width: 70px;
  height: 70px;
  padding: 4px;
  border: 2px solid #17301e;
  background: #fff;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.cert-qr i {
  background: color-mix(in srgb, #17301e calc(var(--on) * 100%), #fff);
}

.packing-page {
  width: min(850px, calc(100% - 3rem));
  min-height: 1050px;
  margin: 1.5rem auto;
  padding: 3rem;
  background: #fff;
  box-shadow: 0 20px 55px rgb(0 0 0 / 18%);
  color: #17301e;
}

.packing-brand {
  display: flex;
  padding-bottom: 1.2rem;
  border-bottom: 3px solid #17301e;
  align-items: center;
  justify-content: space-between;
}

.packing-brand .brand-copy {
  color: #17301e;
}

.packing-brand > span {
  color: #2a9d58;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.packing-data {
  display: grid;
  margin-block: 2rem;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #d8e2da;
}

.packing-data span {
  display: grid;
  min-height: 74px;
  padding: 0.8rem;
  background: #f6f9f6;
}

.packing-data small {
  color: #718576;
  font-size: 0.52rem;
}

.packing-data strong {
  color: #17301e;
  font-size: 0.72rem;
}

.packing-page h2 {
  color: #17301e;
}

.packing-page table {
  color: #17301e;
}

.packing-page th {
  background: #e8f0ea;
  color: #486250;
}

.packing-page td {
  border-color: #d8e2da;
  color: #17301e;
}

.packing-page > footer {
  display: grid;
  margin-top: 3rem;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.packing-page > footer span {
  padding-top: 2rem;
  border-top: 1px solid #718576;
  color: #5e7464;
  font-size: 0.62rem;
}

.toast {
  position: fixed;
  z-index: 200;
  right: 1.5rem;
  bottom: 1.5rem;
  max-width: 360px;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgb(61 220 132 / 30%);
  border-radius: 12px;
  background: #102419;
  box-shadow: 0 20px 50px rgb(0 0 0 / 35%);
  color: var(--ok);
  font-size: 0.76rem;
}

.toast.error {
  border-color: rgb(240 82 82 / 30%);
  color: var(--danger);
}

.empty {
  padding: 2rem !important;
  color: var(--tx3) !important;
  text-align: center;
}

.mobile-only {
  display: none;
}

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

  .bought-focus,
  .cpm-card {
    grid-column: auto;
  }

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

  .maintenance-layout,
  .programming-grid {
    grid-template-columns: 1fr;
  }

  .maintenance-feed {
    order: -1;
  }

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

  .archive-feature {
    grid-column: 1 / -1;
  }

  .quality-plan-grid {
    grid-template-columns: 1fr 1fr;
  }

  .quotation-pipeline article {
    grid-template-columns: 95px 1fr 110px auto;
  }

  .quotation-pipeline article > strong,
  .quotation-pipeline article > .status {
    display: none;
  }
}

@media (max-width: 900px) {
  .mes-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    left: -290px;
    width: 272px;
    transition: left 220ms ease;
  }

  .sidebar.open {
    left: 0;
    box-shadow: 20px 0 60px rgb(0 0 0 / 45%);
  }

  .mobile-only {
    display: inline-grid;
  }

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

  .machine-hero,
  .split-grid {
    grid-template-columns: 1fr;
  }

  .machine-copy {
    padding: 1rem;
  }

  .gate-panel {
    grid-template-columns: 1fr;
  }

  .gate-flow {
    overflow-x: auto;
  }

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

@media (max-width: 680px) {
  .topbar {
    padding: 0 0.75rem;
  }

  .global-search {
    width: auto;
    flex: 1;
  }

  .top-actions .button.quiet {
    display: none;
  }

  .language-select {
    width: 58px;
  }

  .page {
    padding: 1.1rem 0.8rem 2rem;
  }

  .page-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .page-head .button {
    width: 100%;
  }

  .page-head h1 {
    font-size: 2rem;
  }

  .kpi-grid,
  .compact-grid,
  .dashboard-grid,
  .factory-board,
  .passport-grid,
  .customer-grid,
  .maintenance-plans,
  .certificate-gallery,
  .report-grid,
    .archive-grid {
    grid-template-columns: 1fr;
  }

  .span-2,
  .archive-feature {
    grid-column: auto;
  }

  .kpi {
    min-height: 110px;
  }

  .dashboard-grid > .panel {
    min-height: auto;
  }

  .machine-hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .machine-photo {
    min-height: 260px;
  }

  .spec-strip {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .archive-feature {
    grid-template-columns: 1fr;
  }

  .manual-cover {
    min-height: 220px;
  }

  .procedure-list,
  .signal-groups {
    grid-template-columns: 1fr;
  }

  .cost-report {
    grid-template-columns: 1fr;
  }

  .cost-donut {
    margin: auto;
  }

  .detail-facts,
  .config-grid,
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .certificate-page {
    min-height: auto;
    padding: 1.4rem;
  }

  .cert-title {
    margin-top: 2.5rem;
  }

  .cert-title h1 {
    font-size: 2.5rem;
  }

  .cert-machine {
    grid-template-columns: 1fr;
  }

  .cert-machine img {
    height: 160px;
  }

  .cert-data {
    grid-template-columns: 1fr 1fr;
  }

  .quality-plan-grid {
    grid-template-columns: 1fr;
  }

  .quotation-pipeline {
    overflow-x: auto;
  }

  .quotation-pipeline article {
    min-width: 720px;
  }

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

  .measurement-form {
    grid-template-columns: 1fr;
  }

  .dispatch-meta,
  .packing-data,
  .packing-page > footer {
    grid-template-columns: 1fr;
  }

  .packing-page {
    padding: 1.2rem;
  }
}