:root {
  color-scheme: light;
  --bg: oklch(1 0 0);
  --surface: oklch(0.975 0.008 260);
  --surface-strong: oklch(0.94 0.015 260);
  --surface-hover: oklch(0.965 0.014 260);
  --ink: oklch(0.22 0.035 260);
  --ink-soft: oklch(0.38 0.035 260);
  --muted: oklch(0.46 0.03 260);
  --border: oklch(0.89 0.018 260);
  --border-strong: oklch(0.78 0.03 260);
  --primary: oklch(0.45 0.15 260);
  --primary-hover: oklch(0.39 0.145 260);
  --primary-active: oklch(0.34 0.13 260);
  --primary-soft: oklch(0.95 0.032 260);
  --nav: oklch(0.22 0.055 260);
  --nav-hover: oklch(0.29 0.065 260);
  --success: oklch(0.46 0.115 155);
  --success-soft: oklch(0.95 0.045 155);
  --warning: oklch(0.63 0.145 75);
  --warning-soft: oklch(0.96 0.052 75);
  --danger: oklch(0.53 0.18 25);
  --danger-soft: oklch(0.96 0.04 25);
  --info: oklch(0.52 0.13 235);
  --info-soft: oklch(0.95 0.035 235);
  --white: oklch(1 0 0);
  --shadow-overlay: 0 18px 44px oklch(0.15 0.035 260 / 0.2);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --sidebar-width: 248px;
  --topbar-height: 72px;
  --mobile-nav-height: 72px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --font-ui: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-width: 320px;
  background: var(--bg);
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--ink);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--bg);
  overscroll-behavior: contain;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid oklch(0.72 0.12 260 / 0.55);
  outline-offset: 2px;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  padding: 22px 16px 18px;
  background: var(--nav);
  color: var(--white);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 4px 8px 20px;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  background: var(--white);
  color: var(--primary);
  font-size: 21px;
  font-weight: 800;
}

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

.brand strong {
  margin-bottom: 2px;
  font-size: 18px;
  letter-spacing: 0.01em;
}

.brand small {
  color: oklch(0.82 0.025 260);
  font-size: 12px;
}

.side-nav {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.nav-group-label {
  margin: 20px 12px 7px;
  color: oklch(0.7 0.025 260);
  font-size: 12px;
  font-weight: 600;
}

.nav-item {
  position: relative;
  display: flex;
  min-height: 48px;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 12px;
  background: transparent;
  color: oklch(0.86 0.018 260);
  text-align: left;
  transition:
    background 180ms var(--ease-out),
    color 180ms var(--ease-out);
}

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

.nav-item.is-active {
  background: var(--white);
  color: var(--nav);
  font-weight: 700;
}

.nav-item svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
}

.nav-count {
  min-width: 23px;
  margin-left: auto;
  border-radius: 999px;
  padding: 2px 7px;
  background: oklch(0.34 0.06 260);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.nav-item.is-active .nav-count {
  background: var(--primary-soft);
  color: var(--primary);
}

.nav-count-warning,
.nav-item.is-active .nav-count-warning {
  background: var(--warning-soft);
  color: oklch(0.42 0.11 70);
}

.nav-dot {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: oklch(0.8 0.17 80);
}

.sidebar-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  width: 100%;
  cursor: pointer;
  margin-top: 18px;
  border: 0;
  border-top: 1px solid oklch(0.36 0.055 260);
  padding: 17px 4px 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.sidebar-footer:hover .sidebar-user-copy strong,
.sidebar-footer:focus-visible .sidebar-user-copy strong {
  color: var(--white);
}

.sidebar-user-copy {
  min-width: 0;
}

.sidebar-footer strong,
.sidebar-footer small {
  display: block;
}

.sidebar-footer strong {
  font-size: 14px;
}

.sidebar-footer small {
  margin-top: 2px;
  color: oklch(0.72 0.025 260);
  font-size: 12px;
}

.user-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: oklch(0.78 0.12 75);
  color: oklch(0.26 0.055 260);
  font-weight: 800;
}

.sidebar-role-icon {
  width: 20px;
  height: 20px;
  color: oklch(0.7 0.025 260);
}

.role-dialog {
  width: min(620px, calc(100% - 32px));
  max-width: none;
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--white);
  box-shadow: var(--shadow-overlay);
}

.role-dialog::backdrop {
  background: oklch(0.16 0.035 260 / 0.48);
}

.role-dialog-shell {
  overflow: hidden;
  border-radius: inherit;
}

.role-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--border);
  padding: 22px 22px 18px;
}

.role-dialog-header h2 {
  margin: 0;
  font-size: 21px;
}

.role-dialog-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.role-options {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.role-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 74px;
  cursor: pointer;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  background: var(--white);
  text-align: left;
  transition:
    border-color 180ms var(--ease-out),
    background 180ms var(--ease-out);
}

.role-option:hover {
  border-color: var(--border-strong);
  background: var(--surface);
}

.role-option.is-selected {
  border-color: oklch(0.73 0.075 260);
  background: var(--primary-soft);
}

.role-option-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 10px;
  background: var(--warning-soft);
  color: oklch(0.42 0.11 70);
  font-weight: 800;
}

.role-option-avatar.is-workshop {
  background: var(--info-soft);
  color: var(--info);
}

.role-option-avatar.is-warehouse {
  background: var(--success-soft);
  color: var(--success);
}

.role-option-avatar.is-admin {
  background: var(--primary-soft);
  color: var(--primary);
}

.role-option strong,
.role-option small {
  display: block;
}

.role-option strong {
  font-size: 14px;
}

.role-option small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.role-option-state {
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.role-dialog-footer {
  border-top: 1px solid var(--border);
  padding: 13px 22px 15px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
}

.account-dialog {
  width: min(760px, calc(100% - 28px));
}

.account-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  background: var(--primary-soft);
}

.account-current strong,
.account-current span {
  display: block;
}

.account-current span {
  color: var(--muted);
  font-size: 13px;
}

.account-admin-panel {
  max-height: min(62vh, 620px);
  overflow: auto;
  padding: 20px 22px;
}

.account-admin-panel h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.account-create-form {
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
}

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

.account-form-grid label span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.account-form-grid input,
.account-form-grid select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 11px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

.account-form-error {
  margin: 0 0 10px;
  color: var(--danger);
  font-size: 13px;
}

.account-list-wrap {
  padding-top: 20px;
}

.account-list {
  display: grid;
  gap: 8px;
}

.account-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 12px;
}

.account-row.is-disabled {
  opacity: 0.58;
  background: var(--surface);
}

.account-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

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

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

.account-row-actions {
  display: flex;
  gap: 8px;
}

.row-action-text {
  cursor: pointer;
  border: 0;
  padding: 6px;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.account-dialog-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  padding: 14px 22px;
}

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

  .account-admin-panel {
    max-height: 62vh;
    padding: 16px;
  }

  .account-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .account-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

.workspace {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  background: var(--bg);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  height: var(--topbar-height);
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  padding: 0 clamp(20px, 3vw, 44px);
  background: oklch(1 0 0 / 0.96);
}

.mobile-brand,
.mobile-menu-button,
.mobile-search-button {
  display: none;
}

.global-search {
  display: flex;
  width: min(520px, 45vw);
  min-height: 44px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 12px;
  background: var(--surface);
  color: var(--muted);
  transition:
    border-color 180ms var(--ease-out),
    background 180ms var(--ease-out);
}

.global-search:focus-within {
  border-color: var(--primary);
  background: var(--white);
}

.global-search svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.global-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
}

.global-search input::placeholder,
.dialog-search-field input::placeholder {
  color: var(--muted);
  opacity: 1;
}

kbd {
  border: 1px solid var(--border);
  border-bottom-color: var(--border-strong);
  border-radius: 5px;
  padding: 2px 6px;
  background: var(--white);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 11px;
}

.top-actions {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 12px;
}

.prototype-badge {
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.icon-button,
.mobile-menu-button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  cursor: pointer;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  transition: background 180ms var(--ease-out);
}

.mobile-menu-button,
.mobile-search-button {
  display: none;
}

.icon-button:hover,
.mobile-menu-button:hover {
  background: var(--surface-strong);
}

.icon-button svg,
.mobile-menu-button svg {
  width: 21px;
  height: 21px;
}

.icon-button-dark {
  color: oklch(0.8 0.02 260);
}

.icon-button-dark:hover {
  background: var(--nav-hover);
}

.notification-button {
  position: relative;
  border: 1px solid var(--border);
}

.notification-button span {
  position: absolute;
  top: -5px;
  right: -4px;
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid var(--white);
  border-radius: 999px;
  background: var(--danger);
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
}

#mainContent {
  width: 100%;
  min-height: calc(100vh - var(--topbar-height));
}

.page {
  width: min(100%, 1560px);
  margin: 0 auto;
  padding: 32px clamp(20px, 3vw, 44px) 56px;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.page-heading h1,
.page-heading h2,
.section-header h2,
.detail-heading h1,
.sheet-title-row h2 {
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

.page-heading h1,
.detail-heading h1 {
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.page-heading p,
.detail-heading p {
  max-width: 68ch;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.page-actions,
.button-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.button {
  display: inline-flex;
  min-height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    background 180ms var(--ease-out),
    color 180ms var(--ease-out),
    transform 120ms var(--ease-out);
}

.button:active {
  transform: translateY(1px);
}

.button svg {
  width: 19px;
  height: 19px;
}

.button-primary {
  background: var(--primary);
  color: var(--white);
}

.button-primary:hover {
  background: var(--primary-hover);
}

.button-primary:active {
  background: var(--primary-active);
}

.button-secondary {
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--ink);
}

.button-secondary:hover {
  background: var(--surface);
}

.button-soft {
  background: var(--primary-soft);
  color: var(--primary);
}

.button-soft:hover {
  background: oklch(0.92 0.045 260);
}

.button-danger {
  background: var(--danger);
  color: var(--white);
}

.button-danger:hover {
  background: oklch(0.47 0.17 25);
}

.button-danger-text {
  border: 1px solid oklch(0.84 0.055 25);
  background: var(--white);
  color: var(--danger);
}

.button-danger-text:hover:not(:disabled) {
  background: var(--danger-soft);
}

.button-block {
  width: 100%;
}

.text-button,
.inline-action {
  min-height: 44px;
  cursor: pointer;
  border: 0;
  padding: 0 8px;
  background: transparent;
  color: var(--primary);
  font-weight: 700;
}

.text-button:hover,
.inline-action:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.summary-item {
  min-width: 0;
  padding: 20px 22px;
}

.summary-item + .summary-item {
  border-left: 1px solid var(--border);
}

.summary-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
}

.summary-label svg {
  width: 17px;
  height: 17px;
}

.summary-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
}

.summary-value strong {
  font-size: 29px;
  line-height: 1;
}

.summary-value span {
  color: var(--muted);
  font-size: 13px;
}

.summary-value .value-danger {
  color: var(--danger);
}

.summary-value .value-warning {
  color: oklch(0.48 0.13 70);
}

.summary-value .value-success {
  color: var(--success);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
  align-items: start;
  gap: 24px;
}

.dashboard-column {
  display: grid;
  min-width: 0;
  gap: 24px;
}

.section {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.section-header {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  padding: 13px 20px;
}

.section-header h2 {
  font-size: 18px;
  line-height: 1.35;
}

.section-header p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.attention-section {
  overflow: hidden;
  border-color: oklch(0.87 0.04 75);
}

.attention-section .section-header {
  background: var(--warning-soft);
}

.attention-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.attention-title > svg {
  width: 21px;
  height: 21px;
  color: oklch(0.47 0.13 70);
}

.attention-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.attention-item {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 12px 18px;
}

.attention-item + .attention-item {
  border-top: 1px solid var(--border);
}

.attention-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 10px;
  background: var(--surface);
}

.attention-icon svg {
  width: 20px;
  height: 20px;
}

.attention-icon.is-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.attention-icon.is-warning {
  background: var(--warning-soft);
  color: oklch(0.48 0.13 70);
}

.attention-icon.is-info {
  background: var(--info-soft);
  color: var(--info);
}

.attention-copy {
  min-width: 0;
}

.attention-copy strong {
  display: block;
  font-size: 15px;
}

.attention-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.attention-action {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.attention-action svg {
  width: 17px;
  height: 17px;
}

.order-focus {
  padding: 20px;
}

.order-focus-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.order-focus-title {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 12px;
}

.order-code {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

.order-focus h3 {
  margin: 0;
  font-size: 17px;
}

.order-focus p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.status {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.status::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.status-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.status-warning {
  background: var(--warning-soft);
  color: oklch(0.44 0.12 70);
}

.status-success {
  background: var(--success-soft);
  color: var(--success);
}

.status-info {
  background: var(--info-soft);
  color: var(--info);
}

.status-neutral {
  background: var(--surface-strong);
  color: var(--ink-soft);
}

.progress-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: 24px;
}

.progress-step {
  position: relative;
  min-width: 0;
  padding-top: 24px;
  color: var(--muted);
  font-size: 12px;
}

.progress-step::before {
  position: absolute;
  top: 5px;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--border);
  content: "";
}

.progress-step:first-child::before {
  left: 50%;
}

.progress-step:last-child::before {
  right: 50%;
}

.progress-dot {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--border-strong);
  box-shadow: 0 0 0 1px var(--border-strong);
}

.progress-step.is-complete::before,
.progress-step.is-current::before {
  background: var(--primary);
}

.progress-step.is-complete .progress-dot {
  background: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.progress-step.is-current {
  color: var(--primary);
  font-weight: 700;
}

.progress-step.is-current .progress-dot {
  background: var(--white);
  box-shadow: 0 0 0 3px var(--primary);
}

.progress-step span:last-child {
  display: block;
  padding: 0 6px;
  text-align: center;
}

.order-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.order-stat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.order-stat strong {
  display: block;
  margin-top: 5px;
  font-size: 16px;
}

.schedule-list,
.activity-list,
.compact-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule-item,
.activity-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 15px 18px;
}

.schedule-item + .schedule-item,
.activity-item + .activity-item {
  border-top: 1px solid var(--border);
}

.date-block {
  width: 48px;
  padding-top: 2px;
  text-align: center;
}

.date-block strong,
.date-block span {
  display: block;
}

.date-block strong {
  color: var(--primary);
  font-size: 18px;
}

.date-block span {
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
}

.schedule-item h3,
.activity-item h3 {
  margin: 0;
  font-size: 14px;
}

.schedule-item p,
.activity-item p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.activity-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-soft);
}

.activity-icon svg {
  width: 17px;
  height: 17px;
}

.table-shell {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.procurement-search-field {
  width: min(330px, 100%);
  flex: 0 1 330px;
}

.procurement-order-list {
  background: var(--white);
}

.procurement-order-group + .procurement-order-group {
  border-top: 1px solid var(--border);
}

.procurement-order-summary {
  display: grid;
  min-height: 88px;
  cursor: pointer;
  list-style: none;
  grid-template-columns: minmax(260px, 1.25fr) minmax(310px, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 17px 20px;
  transition: background 180ms var(--ease-out);
}

.procurement-order-summary::-webkit-details-marker {
  display: none;
}

.procurement-order-summary:hover {
  background: var(--surface-hover);
}

.procurement-order-summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.procurement-order-identity {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.procurement-order-identity strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.procurement-order-identity small {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.procurement-order-facts {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 18px;
  color: var(--muted);
  font-size: 13px;
}

.procurement-order-facts > span {
  white-space: nowrap;
}

.procurement-order-facts strong {
  color: var(--ink-soft);
}

.procurement-order-state {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.procurement-order-chevron {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
  transition: transform 180ms var(--ease-out), background 180ms var(--ease-out);
}

.procurement-order-chevron svg {
  width: 17px;
  height: 17px;
}

.procurement-order-group[open] .procurement-order-chevron {
  transform: rotate(90deg);
  background: var(--surface-strong);
  color: var(--primary);
}

.procurement-order-table {
  border-top: 1px solid var(--border);
}

.procurement-order-table .data-table th:first-child,
.procurement-order-table .data-table td:first-child {
  padding-left: 20px;
}

.procurement-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.procurement-empty svg {
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
}

.procurement-empty strong {
  color: var(--ink);
  font-size: 16px;
}

.procurement-empty span {
  font-size: 13px;
}

.table-toolbar {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  min-height: 44px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 13px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.filter-chip:hover {
  background: var(--surface);
  color: var(--ink);
}

.filter-chip.is-active {
  border-color: oklch(0.85 0.05 260);
  background: var(--primary-soft);
  color: var(--primary);
}

.field,
.select-field,
.date-field {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  background: var(--white);
}

.field svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.field input,
.select-field select,
.date-field input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}

.field:focus-within,
.select-field:focus-within,
.date-field:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px oklch(0.45 0.15 260 / 0.12);
}

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

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  padding: 13px 16px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.data-table td {
  padding: 16px;
  border-top: 1px solid var(--border);
  color: var(--ink-soft);
  vertical-align: middle;
}

.data-table tbody tr {
  transition: background 160ms var(--ease-out);
}

.data-table tbody tr:hover {
  background: var(--surface-hover);
}

.data-table strong {
  color: var(--ink);
}

.data-table small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.clickable-row {
  cursor: pointer;
}

.quantity {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.quantity.is-short {
  color: var(--danger);
  font-weight: 800;
}

.row-action {
  display: inline-grid;
  width: 44px;
  height: 44px;
  cursor: pointer;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--primary);
}

.row-action:hover {
  background: var(--primary-soft);
}

.row-action svg {
  width: 18px;
  height: 18px;
}

.back-button {
  display: inline-flex;
  min-height: 44px;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--primary);
  font-weight: 700;
}

.back-button svg {
  width: 19px;
  height: 19px;
}

.detail-hero {
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.detail-hero-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
}

.detail-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 14px;
}

.detail-heading .order-code {
  width: 50px;
  height: 50px;
  font-size: 18px;
}

.hero-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
}

.hero-fact {
  padding: 16px 24px;
}

.hero-fact + .hero-fact {
  border-left: 1px solid var(--border);
}

.hero-fact span,
.hero-fact strong {
  display: block;
}

.hero-fact span {
  color: var(--muted);
  font-size: 12px;
}

.hero-fact strong {
  margin-top: 6px;
  font-size: 15px;
}

.tab-list {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.tab {
  position: relative;
  min-width: max-content;
  min-height: 48px;
  cursor: pointer;
  border: 0;
  padding: 0 16px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.tab:hover {
  color: var(--ink);
}

.tab.is-active {
  color: var(--primary);
}

.tab.is-active::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--primary);
  content: "";
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.6fr);
  align-items: start;
  gap: 24px;
}

.detail-stack {
  display: grid;
  gap: 20px;
}

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

.info-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}

.info-item span {
  color: var(--muted);
  font-size: 13px;
}

.info-item strong {
  font-size: 14px;
  text-align: right;
}

.spec-list {
  margin: 0;
  padding: 0 20px 18px;
  list-style: none;
}

.spec-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  padding: 13px 0;
}

.spec-item:last-child {
  border-bottom: 0;
}

.spec-item span {
  color: var(--muted);
  font-size: 13px;
}

.spec-item strong {
  max-width: 62%;
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
}

.risk-summary {
  padding: 18px;
}

.risk-score {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.risk-score-circle {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: var(--warning-soft);
  color: oklch(0.45 0.13 70);
  font-size: 18px;
  font-weight: 800;
}

.risk-score strong,
.risk-score span {
  display: block;
}

.risk-score span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.risk-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.risk-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  padding: 9px 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.risk-list svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--warning);
}

.material-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.material-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(90px, 0.55fr) minmax(90px, 0.55fr) minmax(90px, 0.55fr) minmax(120px, 0.7fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
}

.material-row + .material-row {
  border-top: 1px solid var(--border);
}

.material-header {
  min-height: 42px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.material-name strong,
.material-name small {
  display: block;
}

.material-name strong {
  font-size: 14px;
}

.material-name small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.mobile-label {
  display: none;
}

.timeline {
  margin: 0;
  padding: 10px 20px 20px;
  list-style: none;
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 11px;
  min-height: 64px;
}

.timeline-item::before {
  position: absolute;
  top: 25px;
  bottom: 0;
  left: 10px;
  width: 2px;
  background: var(--border);
  content: "";
}

.timeline-item:last-child::before {
  display: none;
}

.timeline-dot {
  position: relative;
  z-index: 1;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--white);
}

.timeline-dot svg {
  width: 13px;
  height: 13px;
}

.timeline-item.is-complete .timeline-dot {
  border-color: var(--success);
  background: var(--success);
  color: var(--white);
}

.timeline-item.is-current .timeline-dot {
  border-color: var(--primary);
  color: var(--primary);
}

.timeline-content {
  padding-bottom: 14px;
}

.timeline-content strong {
  display: block;
  font-size: 14px;
}

.timeline-content p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.scan-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
  align-items: start;
  gap: 24px;
}

.scan-panel {
  padding: 24px;
}

.scan-visual {
  display: grid;
  min-height: 250px;
  place-items: center;
  border: 2px dashed oklch(0.76 0.06 260);
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  text-align: center;
}

.scan-visual-icon {
  display: grid;
  width: 66px;
  height: 66px;
  margin: 0 auto 14px;
  place-items: center;
  border-radius: 16px;
  background: var(--primary);
  color: var(--white);
}

.scan-visual-icon svg {
  width: 30px;
  height: 30px;
}

.scan-visual h2 {
  margin: 0;
  font-size: 20px;
}

.scan-visual p {
  max-width: 36ch;
  margin: 8px auto 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.scan-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

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

.scan-tips {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.scan-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.scan-tip svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--success);
}

.receipt-preview {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.receipt-image-wrap {
  padding: 18px;
  background: var(--surface);
}

.receipt-image-wrap img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  background: var(--white);
}

.receipt-empty {
  display: grid;
  min-height: 250px;
  place-items: center;
  padding: 30px;
  text-align: center;
}

.receipt-empty svg {
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  color: var(--border-strong);
}

.receipt-empty h2 {
  margin: 0;
  font-size: 18px;
}

.receipt-empty p {
  max-width: 44ch;
  margin: 7px auto 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.match-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  padding: 18px 20px;
}

.match-header h2 {
  margin: 0;
  font-size: 18px;
}

.match-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.match-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  padding: 6px 20px 10px;
}

.match-field {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding: 13px 0;
}

.match-field span {
  color: var(--muted);
  font-size: 12px;
}

.match-field strong {
  font-size: 13px;
  text-align: right;
}

.quantity-comparison {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 8px 20px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.quantity-cell {
  padding: 13px;
  text-align: center;
}

.quantity-cell + .quantity-cell {
  border-left: 1px solid var(--border);
}

.quantity-cell span,
.quantity-cell strong {
  display: block;
}

.quantity-cell span {
  color: var(--muted);
  font-size: 11px;
}

.quantity-cell strong {
  margin-top: 5px;
  font-size: 16px;
}

.variance-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 20px 18px;
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--success-soft);
  color: oklch(0.34 0.09 155);
  font-size: 12px;
  line-height: 1.5;
}

.variance-note svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.match-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding: 16px 20px;
}

.success-state {
  display: grid;
  min-height: 440px;
  place-items: center;
  padding: 32px;
  text-align: center;
}

.success-state-icon {
  display: grid;
  width: 70px;
  height: 70px;
  margin: 0 auto 16px;
  place-items: center;
  border-radius: 50%;
  background: var(--success);
  color: var(--white);
}

.success-state-icon svg {
  width: 36px;
  height: 36px;
  stroke-width: 2.2;
}

.success-state h2 {
  margin: 0;
  font-size: 22px;
}

.success-state p {
  max-width: 45ch;
  margin: 8px auto 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.schedule-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-bottom: 24px;
  border-radius: var(--radius-md);
  padding: 24px;
  background: var(--primary);
  color: var(--white);
}

.schedule-banner h2 {
  margin: 0;
  color: inherit;
  font-size: 21px;
}

.schedule-banner p {
  max-width: 65ch;
  margin: 8px 0 0;
  color: oklch(0.9 0.025 260);
  font-size: 14px;
  line-height: 1.6;
}

.countdown {
  min-width: 150px;
  text-align: right;
}

.countdown strong,
.countdown span {
  display: block;
}

.countdown strong {
  font-size: 32px;
}

.countdown span {
  margin-top: 4px;
  color: oklch(0.88 0.025 260);
  font-size: 12px;
}

.packaging-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
  align-items: start;
  gap: 24px;
}

.package-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.package-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 100px 120px 120px 130px auto;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
}

.package-row + .package-row {
  border-top: 1px solid var(--border);
}

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

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

.date-value {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.calculator {
  padding: 18px;
}

.calculator-help {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.form-stack {
  display: grid;
  gap: 14px;
}

.form-group {
  display: grid;
  gap: 7px;
}

.form-group > label {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}

.form-group small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.calculation-result {
  margin-top: 18px;
  border-radius: var(--radius-sm);
  padding: 15px;
  background: var(--primary-soft);
}

.result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.result-row + .result-row {
  margin-top: 10px;
  border-top: 1px solid oklch(0.87 0.045 260);
  padding-top: 10px;
}

.result-row span {
  color: var(--muted);
  font-size: 12px;
}

.result-row strong {
  color: var(--primary);
  font-size: 15px;
}

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

.role-context-chip {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 0 13px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
}

.role-context-chip svg {
  width: 18px;
  height: 18px;
}

.workshop-queue {
  margin-top: 20px;
  overflow: hidden;
}

.workshop-task-list,
.warehouse-task-list {
  display: grid;
}

.workshop-task-row {
  display: grid;
  grid-template-columns: auto minmax(240px, 1.5fr) minmax(130px, 0.65fr) minmax(120px, 0.55fr) auto auto;
  min-height: 82px;
  cursor: pointer;
  align-items: center;
  gap: 16px;
  border: 0;
  border-top: 1px solid var(--border);
  padding: 13px 20px;
  background: var(--white);
  text-align: left;
  transition: background 180ms var(--ease-out);
}

.workshop-task-row:hover,
.warehouse-task-row:hover {
  background: var(--surface-hover);
}

.workshop-task-icon,
.warehouse-task-state {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: var(--info-soft);
  color: var(--info);
}

.workshop-task-icon svg,
.warehouse-task-state svg {
  width: 20px;
  height: 20px;
}

.workshop-task-main,
.workshop-task-data,
.workshop-task-main strong,
.workshop-task-main small,
.workshop-task-data strong,
.workshop-task-data small,
.warehouse-task-row > span:nth-child(2),
.warehouse-task-row > span:nth-child(2) strong,
.warehouse-task-row > span:nth-child(2) small {
  display: block;
  min-width: 0;
}

.workshop-task-main strong,
.workshop-task-data strong,
.warehouse-task-row > span:nth-child(2) strong {
  font-size: 14px;
}

.workshop-task-main small,
.workshop-task-data small,
.warehouse-task-row > span:nth-child(2) small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
}

.workshop-task-main small,
.warehouse-task-row > span:nth-child(2) small {
  white-space: nowrap;
}

.workshop-task-chevron {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.workshop-empty {
  display: flex;
  min-height: 130px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border-top: 1px solid var(--border);
  padding: 24px;
  text-align: left;
}

.workshop-empty > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 10px;
  background: var(--success-soft);
  color: var(--success);
}

.workshop-empty svg {
  width: 21px;
  height: 21px;
}

.workshop-empty strong {
  font-size: 14px;
}

.workshop-empty p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.workshop-guidance {
  display: flex;
  gap: 0;
  margin: 18px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.workshop-guidance > div {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 17px;
}

.workshop-guidance > div + div {
  border-left: 1px solid var(--border);
}

.workshop-guidance > div > span {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
}

.workshop-guidance p {
  margin: 1px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

.workshop-guidance strong {
  margin-right: 4px;
  color: var(--ink);
}

.warehouse-task-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  min-height: 82px;
  cursor: pointer;
  align-items: center;
  gap: 15px;
  border: 0;
  border-top: 1px solid var(--border);
  padding: 13px 20px;
  background: var(--white);
  text-align: left;
  transition: background 180ms var(--ease-out);
}

.warehouse-task-state.is-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.warehouse-task-state.is-success {
  background: var(--success-soft);
  color: var(--success);
}

.warehouse-task-row > svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.production-column {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.production-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 16px;
}

.production-column-header h2 {
  margin: 0;
  font-size: 16px;
}

.production-column-header span {
  display: grid;
  min-width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 999px;
  background: var(--white);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.production-cards {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.production-card {
  display: block;
  width: 100%;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 15px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  text-align: left;
  transition:
    border-color 180ms var(--ease-out),
    background 180ms var(--ease-out),
    transform 120ms var(--ease-out);
}

.production-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.production-card:active {
  transform: translateY(1px);
}

.production-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.production-card h3 {
  margin: 0;
  font-size: 15px;
}

.production-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.production-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.production-meta span,
.production-meta strong {
  display: block;
}

.production-meta span {
  color: var(--muted);
  font-size: 11px;
}

.production-meta strong {
  margin-top: 3px;
  font-size: 13px;
}

.production-card-progress,
.production-progress-track {
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: var(--surface-strong);
}

.production-card-progress {
  margin-top: 14px;
}

.production-card-progress span,
.production-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--success);
}

.production-order-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
}

.production-order-link svg {
  width: 15px;
  height: 15px;
}

.empty-column {
  padding: 30px 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.production-detail-page {
  max-width: 1280px;
}

.production-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.production-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  background: var(--white);
}

.production-task-code {
  display: block;
  margin-bottom: 6px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.production-detail-hero h1 {
  margin: 0;
  font-size: 25px;
}

.production-detail-hero p {
  max-width: 70ch;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.production-detail-status {
  display: grid;
  justify-items: end;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.production-workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.production-workflow > span {
  position: relative;
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-right: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.production-workflow > span:last-child {
  border-right: 0;
}

.production-workflow b {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--white);
  font-size: 11px;
}

.production-workflow b svg {
  width: 14px;
  height: 14px;
}

.production-workflow .is-current {
  background: var(--primary-soft);
  color: var(--primary);
}

.production-workflow .is-current b {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--white);
}

.production-workflow .is-complete {
  color: var(--success);
}

.production-workflow .is-complete b {
  border-color: var(--success);
  background: var(--success-soft);
}

.production-facts,
.production-material-check,
.production-progress-summary {
  display: grid;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.production-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.production-facts > div,
.production-material-check > div,
.production-progress-summary > div {
  min-width: 0;
  border-right: 1px solid var(--border);
  padding: 15px 16px;
}

.production-facts > div:last-child,
.production-material-check > div:last-child,
.production-progress-summary > div:last-child {
  border-right: 0;
}

.production-facts span,
.production-facts strong,
.production-material-check span,
.production-material-check strong,
.production-progress-summary span,
.production-progress-summary strong {
  display: block;
}

.production-facts span,
.production-material-check span,
.production-progress-summary span {
  color: var(--muted);
  font-size: 11px;
}

.production-facts strong,
.production-material-check strong,
.production-progress-summary strong {
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.production-action-section {
  overflow: hidden;
}

.production-material-check {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 20px;
}

.production-help {
  margin: 0;
  padding: 0 20px 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.inline-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  margin: 0 20px 20px;
  border: 1px solid oklch(0.82 0.08 25);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  background: var(--danger-soft);
  color: var(--danger);
}

.inline-warning > svg {
  width: 20px;
  height: 20px;
}

.inline-warning strong,
.inline-warning p {
  display: block;
}

.inline-warning p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

.production-shortage-panel {
  margin: 0 20px 20px;
  overflow: hidden;
  border: 1px solid oklch(0.82 0.08 25);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.production-shortage-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 13px 14px;
  background: var(--danger-soft);
  color: var(--danger);
}

.production-shortage-heading > svg {
  width: 20px;
  height: 20px;
}

.production-shortage-heading strong,
.production-shortage-heading p {
  display: block;
}

.production-shortage-heading p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

.production-shortage-form {
  display: grid;
  grid-template-columns: 0.7fr 1.1fr 1fr;
  gap: 14px;
  padding: 16px 14px 14px;
}

.production-shortage-note {
  grid-column: 1 / 3;
}

.production-shortage-form .form-error-summary {
  grid-column: 1 / -1;
  margin: 0;
}

.production-shortage-actions {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 2px;
}

.production-shortage-actions > span {
  color: var(--muted);
  font-size: 12px;
}

.production-material-resolved {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin: 0 20px 14px;
  border: 1px solid oklch(0.79 0.07 150);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  background: var(--success-soft);
  color: var(--success);
}

.production-material-resolved > svg {
  width: 20px;
  height: 20px;
}

.production-material-resolved p,
.production-material-resolved small {
  display: block;
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.production-material-resolved > span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.production-permission-note,
.production-readonly-state,
.production-awaiting-stock {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 20px 20px;
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  background: var(--surface);
  color: var(--muted);
}

.production-permission-note {
  margin: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

.production-readonly-state {
  margin-top: 18px;
  border: 1px solid var(--border);
}

.production-readonly-state.is-success,
.production-awaiting-stock {
  border: 1px solid oklch(0.79 0.07 150);
  background: var(--success-soft);
  color: var(--success);
}

.production-permission-note > svg,
.production-readonly-state > svg,
.production-awaiting-stock > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.production-permission-note strong,
.production-readonly-state strong,
.production-awaiting-stock strong {
  color: var(--ink);
  font-size: 13px;
}

.production-permission-note p,
.production-readonly-state p,
.production-awaiting-stock p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

.production-awaiting-stock {
  margin-top: 18px;
}

.production-photo-field input[type="file"] {
  padding: 8px;
  background: var(--surface);
}

.production-photo-field small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

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

.production-form-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.production-form-grid .form-error-summary {
  margin: 0;
}

.production-progress-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 20px 20px 14px;
}

.production-progress-track {
  height: 10px;
  margin: 0 20px;
}

.production-log {
  margin: 0 20px 20px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.production-log h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.production-log > div {
  display: grid;
  grid-template-columns: 150px minmax(190px, 0.7fr) minmax(0, 1fr);
  gap: 14px;
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  font-size: 12px;
}

.production-log span,
.production-log small {
  color: var(--muted);
}

.production-log span small {
  display: block;
  margin-top: 3px;
}

.production-log small em {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  color: var(--info);
  font-style: normal;
}

.production-log small em svg {
  width: 15px;
  height: 15px;
}

.production-complete-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid oklch(0.79 0.065 155);
  border-radius: var(--radius-md);
  padding: 20px;
  background: var(--success-soft);
}

.production-complete-panel > svg {
  width: 28px;
  height: 28px;
  color: var(--success);
}

.production-complete-panel h2 {
  margin: 0;
  font-size: 18px;
}

.production-complete-panel p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

.shipping-readiness,
.shipping-records {
  margin-top: 20px;
  overflow: hidden;
}

.shipping-ready-list {
  display: grid;
}

.shipping-ready-row {
  display: grid;
  grid-template-columns: auto minmax(240px, 1.4fr) minmax(110px, 0.55fr) minmax(110px, 0.55fr) minmax(110px, 0.55fr) auto;
  min-height: 78px;
  align-items: center;
  gap: 15px;
  border-top: 1px solid var(--border);
  padding: 13px 20px;
}

.shipping-ready-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: var(--success-soft);
  color: var(--success);
}

.shipping-ready-icon svg {
  width: 20px;
  height: 20px;
}

.shipping-ready-row > span,
.shipping-ready-row strong,
.shipping-ready-row small {
  display: block;
  min-width: 0;
}

.shipping-ready-row strong {
  font-size: 13px;
}

.shipping-ready-row small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shipping-records .table-toolbar > div h2 {
  margin: 0;
  font-size: 16px;
}

.shipping-records .table-toolbar > div p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.table-empty-inline {
  display: grid;
  min-height: 110px;
  place-content: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
}

.table-empty-inline strong {
  color: var(--ink);
  font-size: 14px;
}

.table-empty-inline span {
  font-size: 12px;
}

.shipping-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.shipping-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 20px;
}

.shipment-form {
  overflow: hidden;
}

.shipment-form-section + .shipment-form-section {
  border-top: 1px solid var(--border);
}

.shipment-form-heading {
  padding: 19px 20px 0;
}

.shipment-form-heading h2 {
  margin: 0;
  font-size: 16px;
}

.shipment-form-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.shipment-fields {
  padding-top: 16px;
}

.shipment-fields input[readonly] {
  background: var(--surface);
  color: var(--ink-soft);
}

.shipment-form-error {
  margin: 0 20px 18px;
}

.shipment-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding: 16px 20px;
  background: var(--surface);
}

.shipment-stock-panel {
  position: sticky;
  top: calc(var(--topbar-height) + 20px);
  overflow: hidden;
}

.shipment-stock-facts {
  display: grid;
}

.shipment-stock-facts > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--border);
  padding: 13px 16px;
}

.shipment-stock-facts span {
  color: var(--muted);
  font-size: 12px;
}

.shipment-stock-facts strong {
  max-width: 190px;
  overflow-wrap: anywhere;
  font-size: 13px;
  text-align: right;
}

.shipment-stock-facts .is-highlight {
  background: var(--primary-soft);
}

.shipment-stock-facts .is-highlight strong {
  color: var(--primary);
  font-size: 17px;
}

.shipment-stock-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px;
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 12px;
  line-height: 1.55;
}

.shipment-stock-note svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.shipment-stock-note p {
  margin: 0;
}

.shipment-stock-note.is-success {
  background: var(--success-soft);
  color: oklch(0.36 0.09 155);
}

.shipment-stock-note.is-warning {
  background: var(--warning-soft);
  color: oklch(0.4 0.1 75);
}

.shipment-address {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 12px;
  margin: -8px 0 22px;
  border: 1px solid oklch(0.78 0.02 260);
  padding: 11px 12px;
}

.shipment-address span,
.shipment-logistics span {
  color: var(--muted);
  font-size: 10px;
}

.shipment-address strong,
.shipment-logistics strong {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.shipment-logistics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
  border: 1px solid oklch(0.78 0.02 260);
}

.shipment-logistics > div {
  min-width: 0;
  border-right: 1px solid oklch(0.78 0.02 260);
  padding: 10px 11px;
}

.shipment-logistics > div:last-child {
  border-right: 0;
}

.shipment-logistics span,
.shipment-logistics strong {
  display: block;
}

.shipment-logistics strong {
  margin-top: 5px;
}

.stock-summary {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stock-bar {
  width: 90px;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-strong);
}

.stock-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--success);
}

.stock-bar.is-low span {
  background: var(--danger);
}

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

.bom-customer-picker {
  display: grid;
  grid-template-columns: minmax(210px, 0.7fr) minmax(300px, 1fr) minmax(240px, 0.8fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: var(--white);
}

.bom-step-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.bom-step-heading > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
}

.bom-step-heading h2 {
  margin: 0;
  font-size: 16px;
}

.bom-step-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.bom-customer-select {
  min-width: 0;
}

.bom-customer-select svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.bom-customer-summary {
  display: grid;
  min-width: 0;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

.bom-customer-summary span,
.bom-customer-summary small {
  color: var(--muted);
  font-size: 12px;
}

.bom-customer-summary strong {
  overflow: hidden;
  max-width: 100%;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bom-product-list {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.bom-product-list-heading {
  border-bottom: 1px solid var(--border);
  padding: 17px 16px 14px;
}

.bom-product-list-heading h2,
.bom-editor-header h2 {
  margin: 0;
  font-size: 17px;
}

.bom-product-list-heading p,
.bom-editor-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.bom-product {
  display: flex;
  width: 100%;
  min-height: 76px;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
  background: var(--white);
  text-align: left;
}

.bom-product:last-child {
  border-bottom: 0;
}

.bom-product:hover,
.bom-product.is-active {
  background: var(--primary-soft);
}

.bom-product.is-active {
  box-shadow: inset 3px 0 0 var(--primary);
}

.bom-product strong,
.bom-product small {
  display: block;
}

.bom-product strong {
  font-size: 14px;
}

.bom-product small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.bom-editor {
  min-width: 0;
}

.bom-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  padding: 18px 20px;
}

.bom-customer-badge {
  display: inline-flex;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 0 11px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.bom-customer-badge svg {
  width: 15px;
  height: 15px;
}

.bom-title-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bom-source-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  margin: 14px 18px;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--info-soft);
  color: var(--info);
}

.bom-source-note > svg {
  width: 20px;
  height: 20px;
}

.bom-source-note strong,
.bom-source-note span {
  display: block;
}

.bom-source-note strong {
  color: var(--ink);
  font-size: 13px;
}

.bom-source-note span {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.bom-table {
  min-width: 1240px;
}

.bom-table th,
.bom-table td {
  padding: 10px;
  vertical-align: top;
}

.bom-table th:first-child {
  width: 190px;
}

.bom-table input,
.bom-table select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 7px 8px;
  outline: 0;
  background: var(--white);
  color: var(--ink);
  font-size: 12px;
}

.bom-table input:focus,
.bom-table select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}

.bom-table td:first-child input + input {
  margin-top: 6px;
}

.bom-lead-input {
  display: flex;
  min-width: 88px;
  align-items: center;
  gap: 6px;
}

.bom-lead-input span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
}

.bom-error {
  margin-top: 12px;
}

.bom-form-footer {
  position: sticky;
  z-index: 1;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--border);
  padding: 14px 18px;
  background: var(--white);
}

.bom-form-footer > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bom-form-footer span {
  color: var(--muted);
  font-size: 12px;
}

.bom-readonly-table {
  min-width: 900px;
}

.bom-empty-state {
  display: grid;
  min-height: 330px;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 42px 24px;
  text-align: center;
}

.bom-empty-state h2,
.bom-empty-state p {
  margin: 0;
}

.bom-empty-state p {
  max-width: 560px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.bom-empty-state > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.empty-state {
  display: grid;
  min-height: 360px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px;
  background: var(--white);
  text-align: center;
}

.empty-state-icon {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
  place-items: center;
  border-radius: 16px;
  background: var(--surface-strong);
  color: var(--ink-soft);
}

.empty-state-icon svg {
  width: 30px;
  height: 30px;
}

.empty-state h2 {
  margin: 0;
  font-size: 20px;
}

.empty-state p {
  max-width: 46ch;
  margin: 8px auto 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.search-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 60px));
  margin-top: 9vh;
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--white);
  box-shadow: var(--shadow-overlay);
}

.search-dialog::backdrop,
.bottom-sheet::backdrop {
  background: oklch(0.14 0.035 260 / 0.48);
  backdrop-filter: blur(2px);
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding: 12px;
}

.dialog-search-field {
  display: flex;
  min-height: 48px;
  flex: 1;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
}

.dialog-search-field svg {
  width: 21px;
  height: 21px;
  color: var(--muted);
}

.dialog-search-field input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
}

.search-results {
  max-height: 500px;
  overflow-y: auto;
  padding: 8px;
}

.search-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 66px;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  background: transparent;
  text-align: left;
}

.search-result:hover,
.search-result:focus-visible {
  background: var(--surface);
}

.search-result-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
}

.search-result-icon svg {
  width: 19px;
  height: 19px;
}

.search-result strong,
.search-result small {
  display: block;
}

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

.search-result > svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.search-empty {
  padding: 50px 24px;
  color: var(--muted);
  text-align: center;
}

.order-dialog {
  width: min(1180px, calc(100vw - 48px));
  max-width: none;
  max-height: min(860px, calc(100vh - 48px));
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--white);
  box-shadow: var(--shadow-overlay);
}

.order-dialog::backdrop {
  background: oklch(0.14 0.035 260 / 0.52);
  backdrop-filter: blur(2px);
}

.order-form {
  display: flex;
  max-height: min(860px, calc(100vh - 48px));
  flex-direction: column;
}

.order-dialog-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  padding: 22px 26px 20px;
}

.dialog-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
}

.order-dialog-header h2,
.form-section-heading h3,
.order-plan-heading h3,
.workflow-alert h2 {
  margin: 0;
}

.order-dialog-header h2 {
  font-size: 24px;
}

.order-dialog-header p,
.form-section-heading p,
.order-plan-heading p,
.workflow-alert p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.order-flow {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
  padding: 0 26px;
  background: var(--surface);
}

.order-flow span {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.order-flow b {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-size: 12px;
}

.order-flow .is-current {
  color: var(--primary);
}

.order-flow .is-current b {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--white);
}

.order-import-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--border);
  padding: 13px 26px;
  background: var(--info-soft);
  color: var(--info);
}

.order-import-notice.is-warning {
  background: var(--warning-soft);
  color: oklch(0.42 0.11 70);
}

.order-import-notice.is-success {
  background: var(--success-soft);
  color: var(--success);
}

.order-import-notice > svg {
  width: 22px;
  height: 22px;
}

.order-import-notice strong,
.order-import-notice span {
  display: block;
}

.order-import-notice strong {
  font-size: 13px;
}

.order-import-notice span {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.order-form-layout {
  display: grid;
  min-height: 0;
  overflow-y: auto;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.7fr);
}

.order-form-main {
  min-width: 0;
  padding: 6px 26px 24px;
}

.form-section {
  padding: 22px 0 24px;
}

.form-section + .form-section {
  border-top: 1px solid var(--border);
}

.form-section-heading {
  margin-bottom: 18px;
}

.form-section-heading h3,
.order-plan-heading h3 {
  font-size: 17px;
}

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

.form-field {
  display: grid;
  min-width: 0;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}

.form-field-wide {
  grid-column: 1 / -1;
}

.custom-product-fields {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr 0.55fr;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  background: var(--surface);
}

.form-field em {
  color: var(--danger);
  font-style: normal;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  outline: 0;
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

.form-field textarea {
  min-height: 76px;
  resize: vertical;
  line-height: 1.5;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.form-field input:invalid:not(:placeholder-shown),
.form-field select:invalid {
  border-color: var(--danger);
}

.input-with-unit {
  display: flex;
  align-items: stretch;
}

.input-with-unit input {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.input-with-unit span {
  display: grid;
  min-width: 50px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface);
  color: var(--muted);
}

.order-plan-panel {
  min-width: 0;
  border-left: 1px solid var(--border);
  padding: 24px;
  background: var(--surface);
}

.order-plan-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
}

.order-plan-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
}

.order-plan-icon svg {
  width: 20px;
  height: 20px;
}

.plan-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--white);
}

.plan-check + .plan-check {
  margin-top: 9px;
}

.plan-check > svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--success);
}

.plan-check.is-warning > svg {
  color: var(--danger);
}

.plan-check strong,
.plan-check small {
  display: block;
}

.plan-check strong {
  font-size: 13px;
}

.plan-check small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.plan-materials {
  margin: 16px 0 0;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.plan-materials h4 {
  margin: 0 0 8px;
  font-size: 13px;
}

.plan-material-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: 12px;
}

.plan-material-row strong {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.form-error-summary {
  flex: 0 0 auto;
  margin: 0 26px 12px;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
}

.order-dialog-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--border);
  padding: 14px 26px;
  background: var(--white);
}

.order-dialog-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.order-dialog-footer > div {
  display: flex;
  gap: 8px;
}

.workflow-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 17px 18px;
}

.workflow-alert > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
}

.workflow-alert > span svg {
  width: 22px;
  height: 22px;
}

.workflow-alert h2 {
  font-size: 17px;
}

.workflow-alert-danger {
  border-color: oklch(0.86 0.06 25);
  background: var(--danger-soft);
}

.workflow-alert-danger > span {
  background: var(--white);
  color: var(--danger);
}

.workflow-alert-info {
  border-color: oklch(0.85 0.05 235);
  background: var(--info-soft);
}

.workflow-alert-info > span {
  background: var(--white);
  color: var(--success);
}

.order-split-page {
  max-width: 1640px;
}

.split-order-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  background: var(--white);
}

.split-order-code {
  display: block;
  margin-bottom: 7px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
}

.split-order-hero h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.02em;
}

.split-order-hero p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.split-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.split-flow > span {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.split-flow > span + span {
  border-left: 1px solid var(--border);
}

.split-flow b {
  display: inline-grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-size: 12px;
}

.split-flow b svg {
  width: 15px;
  height: 15px;
}

.split-flow .is-complete {
  color: var(--success);
}

.split-flow .is-complete b {
  border-color: var(--success);
  background: var(--success-soft);
}

.split-flow .is-current {
  background: var(--primary-soft);
  color: var(--primary);
}

.split-flow .is-current b {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--white);
}

.split-guidance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 18px;
  padding: 4px 2px;
}

.split-guidance h2 {
  margin: 0;
  font-size: 19px;
}

.split-guidance p {
  max-width: 72ch;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.split-order-facts {
  display: flex;
  flex: 0 0 auto;
  gap: 26px;
}

.split-order-facts span,
.split-order-facts strong {
  display: block;
}

.split-order-facts span {
  color: var(--muted);
  font-size: 12px;
}

.split-order-facts strong {
  margin-top: 5px;
  color: var(--ink);
  font-size: 14px;
}

.order-split-form {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.split-toolbar {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
}

.split-toolbar > div:first-child strong,
.split-toolbar > div:first-child span {
  display: block;
}

.split-toolbar > div:first-child strong {
  font-size: 16px;
}

.split-toolbar > div:first-child span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.split-add-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.split-add-actions .button {
  min-height: 40px;
  padding: 0 12px;
}

.split-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.split-summary > div {
  display: grid;
  min-height: 84px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  gap: 3px 12px;
  padding: 13px 18px;
}

.split-summary > div + div {
  border-left: 1px solid var(--border);
}

.split-summary span,
.split-summary small {
  color: var(--muted);
  font-size: 12px;
}

.split-summary strong {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  color: var(--ink);
  font-size: 24px;
}

.split-table-scroll {
  padding: 0 12px;
}

.order-split-table {
  min-width: 1080px;
}

.order-split-table th,
.order-split-table td {
  padding: 10px 7px;
  vertical-align: top;
}

.order-split-table th:first-child {
  width: 185px;
}

.order-split-table th:nth-child(2) {
  width: 145px;
}

.order-split-table th:nth-child(6) {
  width: 185px;
}

.order-split-table input,
.order-split-table select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 8px 9px;
  outline: 0;
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
}

.order-split-table input:focus,
.order-split-table select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}

.order-split-table td:first-child input + input {
  margin-top: 7px;
}

.split-required {
  padding-top: 20px !important;
  white-space: nowrap;
}

.split-empty-row td {
  padding: 52px 20px;
}

.split-empty-row div {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--muted);
  text-align: center;
}

.split-empty-row svg {
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
  color: var(--primary);
}

.split-empty-row strong {
  color: var(--ink);
  font-size: 15px;
}

.split-empty-row span {
  font-size: 13px;
}

.split-form-error {
  margin: 12px 18px 0;
}

.split-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-top: 1px solid var(--border);
  padding: 15px 18px;
  background: var(--white);
}

.split-template-note {
  display: flex;
  align-items: center;
  gap: 10px;
}

.split-template-note > svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--success);
}

.split-template-note span,
.split-template-note strong,
.split-template-note small {
  display: block;
}

.split-template-note strong {
  font-size: 13px;
}

.split-template-note small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.split-form-footer > div:last-child {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.compact-empty-state {
  min-height: 320px;
}

.bottom-sheet {
  width: min(520px, 100%);
  max-width: none;
  margin: auto 0 0 auto;
  border: 0;
  border-radius: 18px 18px 0 0;
  padding: 0;
  background: var(--white);
  box-shadow: var(--shadow-overlay);
}

.bottom-sheet form {
  padding: 8px 18px calc(22px + env(safe-area-inset-bottom));
}

.sheet-handle {
  width: 44px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: var(--border-strong);
}

.sheet-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.sheet-title-row h2 {
  font-size: 20px;
}

.sheet-title-row p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.more-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.more-grid button {
  display: flex;
  min-height: 68px;
  cursor: pointer;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  background: var(--white);
  font-weight: 700;
  text-align: left;
}

.more-grid button:hover {
  background: var(--surface);
}

.more-grid svg {
  width: 23px;
  height: 23px;
  color: var(--primary);
}

.toast-region {
  position: fixed;
  z-index: 80;
  right: 20px;
  bottom: 22px;
  display: grid;
  width: min(380px, calc(100vw - 32px));
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  background: var(--nav);
  color: var(--white);
  box-shadow: 0 8px 20px oklch(0.15 0.035 260 / 0.2);
  animation: toast-in 220ms var(--ease-out);
}

.toast svg {
  width: 19px;
  height: 19px;
  color: oklch(0.8 0.15 155);
}

.toast strong,
.toast span {
  display: block;
}

.toast strong {
  font-size: 13px;
}

.toast span {
  margin-top: 3px;
  color: oklch(0.84 0.02 260);
  font-size: 12px;
  line-height: 1.45;
}

.mobile-nav {
  display: none;
}

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

.purchase-detail-page {
  max-width: 1320px;
}

.purchase-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.purchase-detail-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  background: var(--white);
}

.purchase-detail-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.purchase-detail-summary h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
}

.purchase-detail-summary p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.purchase-status-panel {
  display: grid;
  justify-items: end;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.purchase-guidance {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin-bottom: 24px;
  border: 1px solid oklch(0.83 0.07 75);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: var(--warning-soft);
}

.purchase-guidance-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: var(--white);
  color: oklch(0.48 0.12 70);
}

.purchase-guidance-icon svg {
  width: 19px;
  height: 19px;
}

.purchase-guidance strong,
.purchase-guidance p {
  display: block;
}

.purchase-guidance strong {
  font-size: 14px;
}

.purchase-guidance p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}

.purchase-document {
  width: min(100%, 1040px);
  min-height: 1040px;
  margin: 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 48px 54px 42px;
  background: var(--white);
  box-shadow: 0 14px 38px oklch(0.22 0.035 260 / 0.09);
  color: oklch(0.18 0.02 260);
}

.purchase-document-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 24px;
  border-bottom: 3px solid var(--nav);
  padding-bottom: 22px;
}

.purchase-company {
  display: flex;
  align-items: center;
  gap: 12px;
}

.purchase-company-mark {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: var(--nav);
  color: var(--white);
  font-size: 21px;
  font-weight: 800;
}

.purchase-company strong,
.purchase-company small {
  display: block;
}

.purchase-company strong {
  font-size: 17px;
}

.purchase-company small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.04em;
}

.purchase-document-title {
  text-align: right;
}

.purchase-document-title h2 {
  margin: 0;
  font-size: 30px;
  letter-spacing: 0.14em;
}

.purchase-document-title span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.purchase-document-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 24px 0;
  border: 1px solid oklch(0.78 0.02 260);
}

.purchase-document-meta > div {
  min-width: 0;
  border-right: 1px solid oklch(0.78 0.02 260);
  border-bottom: 1px solid oklch(0.78 0.02 260);
  padding: 11px 12px;
}

.purchase-document-meta > div:nth-child(3n) {
  border-right: 0;
}

.purchase-document-meta > div:nth-child(n + 4) {
  border-bottom: 0;
}

.purchase-document-meta span,
.purchase-document-meta strong {
  display: block;
}

.purchase-document-meta span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 10px;
}

.purchase-document-meta strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.4;
}

.purchase-document-table-wrap {
  overflow-x: auto;
}

.purchase-document-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.purchase-document-table th,
.purchase-document-table td {
  border: 1px solid oklch(0.73 0.02 260);
  padding: 10px 9px;
  text-align: left;
  vertical-align: top;
}

.purchase-document-table th {
  background: oklch(0.94 0.012 260);
  color: var(--ink-soft);
  font-size: 10px;
  white-space: nowrap;
}

.purchase-document-table td small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.45;
}

.purchase-document-table .purchase-number {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: right;
}

.purchase-terms {
  margin-top: 26px;
  border-top: 1px solid oklch(0.75 0.02 260);
  padding-top: 18px;
}

.purchase-terms > strong {
  font-size: 13px;
}

.purchase-terms ol {
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.8;
}

.purchase-document-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 46px;
}

.purchase-document-footer span,
.purchase-document-footer strong {
  display: block;
}

.purchase-document-footer span {
  color: var(--muted);
  font-size: 10px;
}

.purchase-document-footer strong {
  margin-top: 12px;
  border-bottom: 1px solid oklch(0.7 0.02 260);
  padding-bottom: 7px;
  font-size: 12px;
}

.purchase-record-note {
  width: min(100%, 1040px);
  margin: 14px auto 0;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--success-soft);
  color: var(--ink-soft);
  font-size: 13px;
}

.send-record-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--white);
  box-shadow: var(--shadow-overlay);
}

.send-record-dialog::backdrop {
  background: oklch(0.14 0.035 260 / 0.52);
  backdrop-filter: blur(2px);
}

.send-record-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  padding: 22px 24px 18px;
}

.send-record-header h2 {
  margin: 0;
  font-size: 21px;
}

.send-record-header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.send-record-body {
  display: grid;
  gap: 16px;
  padding: 22px 24px;
}

.send-record-po {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--surface);
  font-size: 13px;
}

.send-record-po span {
  color: var(--muted);
}

.send-record-po strong {
  font-variant-numeric: tabular-nums;
}

.send-record-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding: 14px 24px;
}

.delete-order-dialog {
  width: min(500px, calc(100vw - 32px));
  max-width: none;
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--white);
  box-shadow: var(--shadow-overlay);
}

.delete-order-dialog::backdrop {
  background: oklch(0.14 0.035 260 / 0.52);
  backdrop-filter: blur(2px);
}

.delete-order-shell {
  overflow: hidden;
  border-radius: inherit;
}

.delete-order-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  padding: 22px 24px 17px;
}

.delete-order-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger);
}

.delete-order-icon svg {
  width: 22px;
  height: 22px;
}

.delete-order-header h2 {
  margin: 1px 0 0;
  font-size: 21px;
}

.delete-order-header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.delete-order-body {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px 24px 17px;
  background: var(--surface);
}

.delete-order-body > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  padding: 11px 0;
  font-size: 13px;
}

.delete-order-body > div span {
  color: var(--muted);
}

.delete-order-body > div strong {
  text-align: right;
}

.delete-order-body > p {
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
}

.delete-order-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.master-summary-strip {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.master-summary-strip > div {
  min-width: 0;
  padding: 17px 20px;
}

.master-summary-strip > div + div {
  border-left: 1px solid var(--border);
}

.master-summary-strip span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
}

.master-summary-strip strong {
  color: var(--ink);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.master-summary-strip small {
  margin-left: 4px;
  color: var(--muted);
  font-size: 12px;
}

.master-table-shell {
  overflow: hidden;
}

.master-table-toolbar {
  min-height: 68px;
}

.master-search-field {
  width: min(360px, 100%);
}

.master-data-table {
  min-width: 1040px;
}

.master-data-table td:first-child {
  max-width: 310px;
}

.master-data-table td:first-child small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  white-space: nowrap;
}

.row-action-text.is-muted {
  color: var(--muted);
}

.master-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 30px;
  color: var(--muted);
  text-align: center;
}

.master-empty svg {
  width: 30px;
  height: 30px;
}

.master-empty strong {
  color: var(--ink);
  font-size: 16px;
}

.master-empty span {
  font-size: 13px;
}

.master-record-dialog {
  width: min(780px, calc(100% - 28px));
  max-height: min(88vh, 820px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  background: var(--white);
  color: var(--ink);
}

.master-record-dialog::backdrop {
  background: oklch(0.2 0.04 260 / 0.48);
}

.bom-work-dialog {
  width: min(720px, calc(100% - 28px));
  max-height: min(90vh, 880px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  background: var(--white);
  color: var(--ink);
}

.bom-import-dialog {
  width: min(1080px, calc(100% - 28px));
}

.bom-work-dialog::backdrop {
  background: oklch(0.2 0.04 260 / 0.5);
}

.bom-work-form {
  display: flex;
  max-height: min(90vh, 880px);
  flex-direction: column;
}

.bom-work-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  padding: 20px 22px;
}

.bom-work-header h2 {
  margin: 3px 0 0;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.bom-work-header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.bom-work-body {
  overflow-y: auto;
  padding: 20px 22px;
}

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

.bom-local-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  border-radius: 8px;
  padding: 11px 13px;
  background: var(--success-soft);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

.bom-local-note svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--success);
}

.bom-work-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding: 14px 22px;
  background: var(--surface);
}

.bom-import-loading {
  display: flex;
  min-height: 210px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: left;
}

.bom-import-loading[hidden],
#bomImportReview[hidden] {
  display: none;
}

.bom-import-loading strong,
.bom-import-loading p {
  display: block;
  margin: 0;
}

.bom-import-loading p {
  max-width: 520px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.bom-import-spinner {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  animation: bom-spin 0.8s linear infinite;
  border: 3px solid var(--primary-soft);
  border-top-color: var(--primary);
  border-radius: 50%;
}

@keyframes bom-spin {
  to { transform: rotate(360deg); }
}

.bom-import-identity {
  margin-top: 16px;
}

.bom-import-preview-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}

.bom-import-preview-heading h3,
.bom-import-preview-heading p {
  margin: 0;
}

.bom-import-preview-heading h3 {
  font-size: 16px;
}

.bom-import-preview-heading p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.bom-import-preview-heading > strong {
  color: var(--primary);
  font-size: 13px;
}

.bom-import-table-wrap {
  max-height: 310px;
  margin-top: 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
}

.bom-import-preview-table {
  min-width: 820px;
}

.bom-import-preview-table td:first-child strong,
.bom-import-preview-table td:first-child span {
  display: block;
}

.bom-import-preview-table td:first-child span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.master-record-form {
  display: flex;
  max-height: min(88vh, 820px);
  flex-direction: column;
}

.master-record-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  padding: 20px 22px;
}

.master-record-header h2 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -0.01em;
}

.master-record-header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.master-record-body {
  overflow-y: auto;
  padding: 20px 22px;
}

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

.master-form-field {
  min-width: 0;
}

.master-form-field.is-wide {
  grid-column: 1 / -1;
}

.master-form-field > span {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}

.master-form-field em {
  color: var(--danger);
  font-style: normal;
}

.master-form-field input,
.master-form-field select,
.master-form-field textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

.master-form-field textarea {
  min-height: 82px;
  resize: vertical;
}

.master-form-field input:focus,
.master-form-field select:focus,
.master-form-field textarea:focus {
  border-color: var(--primary);
  outline: 0;
  box-shadow: 0 0 0 3px oklch(0.45 0.15 260 / 0.12);
}

.master-record-body .form-error-summary {
  margin: 16px 0 0;
}

.master-record-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--border);
  padding: 14px 22px;
  background: var(--surface);
}

.master-record-footer > span {
  color: var(--muted);
  font-size: 12px;
}

.master-record-footer > div {
  display: flex;
  gap: 10px;
}

@media (max-width: 1180px) {
  :root {
    --sidebar-width: 220px;
  }

  .dashboard-grid,
  .detail-grid,
  .packaging-layout {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .material-row {
    grid-template-columns: minmax(190px, 1.3fr) repeat(3, minmax(80px, 0.55fr)) minmax(110px, 0.7fr) auto;
  }

  .package-row {
    grid-template-columns: minmax(170px, 1fr) 90px 110px 110px 120px auto;
  }

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

@media (max-width: 900px) {
  :root {
    --topbar-height: 64px;
  }

  .bom-customer-picker {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  }

  .bom-customer-summary {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
  }

  .bom-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .procurement-order-summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 18px;
  }

  .procurement-order-facts {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .procurement-order-state {
    grid-column: 2;
    grid-row: 1;
  }

  .shipping-form-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .shipment-stock-panel {
    position: static;
  }

  .shipping-ready-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .shipping-ready-row > span:nth-child(3),
  .shipping-ready-row > span:nth-child(4),
  .shipping-ready-row > span:nth-child(5) {
    display: none;
  }

  .shipment-logistics {
    grid-template-columns: minmax(0, 1fr);
  }

  .shipment-logistics > div,
  .shipment-logistics > div:last-child {
    border-right: 0;
    border-bottom: 1px solid oklch(0.78 0.02 260);
  }

  .shipment-logistics > div:last-child {
    border-bottom: 0;
  }

  .workshop-task-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .workshop-task-data {
    display: none;
  }

  .workshop-guidance {
    flex-direction: column;
  }

  .workshop-guidance > div + div {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .sidebar {
    display: none;
  }

  .order-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .order-form {
    max-height: calc(100dvh - 16px);
  }

  .order-form-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .split-toolbar,
  .split-guidance,
  .split-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .split-add-actions {
    justify-content: flex-start;
  }

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

  .split-summary > div:nth-child(3) {
    border-left: 0;
  }

  .split-summary > div:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }

  .split-form-footer > div:last-child {
    justify-content: flex-end;
  }

  .order-plan-panel {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .order-dialog-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .order-dialog-footer > div {
    justify-content: flex-end;
  }

  .workflow-alert {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .workflow-alert .button {
    grid-column: 2;
    justify-self: start;
  }

  .workspace {
    margin-left: 0;
  }

  .topbar {
    gap: 12px;
    padding: 0 16px;
  }

  .mobile-brand {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .mobile-brand .brand-mark {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: var(--white);
    font-size: 18px;
  }

  .mobile-brand strong {
    font-size: 16px;
  }

  .mobile-search-button {
    display: inline-grid;
    width: 44px;
    height: 44px;
    margin-left: auto;
    cursor: pointer;
    place-items: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
  }

  .mobile-search-button svg {
    width: 22px;
    height: 22px;
  }

  .global-search {
    display: none;
  }

  .top-actions {
    margin-left: 0;
    gap: 6px;
  }

  .prototype-badge {
    display: none;
  }

  .notification-button {
    border: 0;
  }

  .mobile-menu-button {
    display: inline-grid;
  }

  .mobile-nav {
    position: fixed;
    z-index: 40;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--border);
    padding: 5px max(8px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: var(--white);
    box-shadow: 0 -4px 8px oklch(0.2 0.03 260 / 0.06);
    isolation: isolate;
  }

  .mobile-nav-item {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 60px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
  }

  .mobile-nav-item svg {
    width: 22px;
    height: 22px;
  }

  .mobile-nav-item.is-active {
    color: var(--primary);
  }

  .mobile-nav-primary {
    overflow: hidden;
  }

  .mobile-nav-primary-icon {
    position: static;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
  }

  .mobile-nav-primary > span:last-child {
    margin-top: 0;
  }

  .page {
    padding: 24px 16px calc(48px + var(--mobile-nav-height) + env(safe-area-inset-bottom));
  }

  .page-heading h1,
  .detail-heading h1 {
    font-size: 24px;
  }

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

  .summary-item {
    padding: 17px;
  }

  .summary-item + .summary-item {
    border-left: 0;
  }

  .summary-item:nth-child(even) {
    border-left: 1px solid var(--border);
  }

  .summary-item:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }

  .dashboard-column-secondary {
    grid-template-columns: minmax(0, 1fr);
  }

  .scan-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .scan-panel {
    padding: 18px;
  }

  .production-board {
    grid-template-columns: minmax(0, 1fr);
  }

  .toast-region {
    right: 16px;
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 12px);
  }
}

@media (max-width: 720px) {
  .bom-work-dialog,
  .bom-import-dialog {
    width: calc(100% - 16px);
    max-height: calc(100vh - 16px);
  }

  .bom-work-form {
    max-height: calc(100vh - 16px);
  }

  .bom-work-header,
  .bom-work-body,
  .bom-work-footer {
    padding-right: 16px;
    padding-left: 16px;
  }

  .bom-work-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bom-work-grid .form-field-wide {
    grid-column: auto;
  }

  .bom-work-footer {
    align-items: stretch;
  }

  .bom-work-footer .button {
    flex: 1;
    justify-content: center;
  }

  .bom-work-footer #bomImportConfirm {
    flex: 1.6;
  }

  .bom-customer-picker {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }

  .bom-customer-summary {
    grid-column: auto;
  }

  .bom-editor-header,
  .bom-form-footer,
  .bom-form-footer > div {
    align-items: stretch;
    flex-direction: column;
  }

  .bom-title-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .bom-customer-badge {
    align-self: flex-start;
  }

  .bom-form-footer .button {
    justify-content: center;
    width: 100%;
  }

  .procurement-search-field {
    width: 100%;
    flex-basis: auto;
  }

  .procurement-order-summary {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 15px 14px;
  }

  .procurement-order-identity strong {
    font-size: 15px;
  }

  .procurement-order-facts {
    flex-wrap: wrap;
    gap: 7px 14px;
  }

  .procurement-order-state .status {
    display: none;
  }

  .procurement-order-table .data-table th:first-child,
  .procurement-order-table .data-table td:first-child {
    padding-left: 13px;
  }

  .custom-product-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .split-order-hero {
    align-items: stretch;
    flex-direction: column;
    padding: 18px;
  }

  .split-order-hero h1 {
    font-size: 23px;
  }

  .split-flow > span {
    min-height: 58px;
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  .split-guidance {
    gap: 16px;
  }

  .split-order-facts {
    justify-content: space-between;
    gap: 14px;
  }

  .split-toolbar {
    padding: 16px;
  }

  .split-add-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split-add-actions .button {
    width: 100%;
  }

  .split-summary > div {
    min-height: 78px;
    padding: 11px 13px;
  }

  .split-summary strong {
    font-size: 21px;
  }

  .split-form-footer > div:last-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .page-header,
  .detail-hero-main {
    align-items: stretch;
    flex-direction: column;
  }

  .page-actions .button {
    flex: 1;
  }

  .attention-item {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 13px 14px;
  }

  .attention-action {
    grid-column: 2;
    justify-self: start;
  }

  .order-focus {
    padding: 16px;
  }

  .order-focus-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .progress-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .progress-step {
    min-width: 92px;
  }

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

  .order-stat:last-child {
    grid-column: span 2;
  }

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

  .hero-fact + .hero-fact {
    border-left: 0;
  }

  .hero-fact:nth-child(even) {
    border-left: 1px solid var(--border);
  }

  .hero-fact:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }

  .hero-fact {
    padding: 14px 16px;
  }

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

  .info-item {
    grid-template-columns: 105px minmax(0, 1fr);
  }

  .table-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .table-shell.is-responsive .data-table,
  .table-shell.is-responsive .data-table tbody,
  .table-shell.is-responsive .data-table tr,
  .table-shell.is-responsive .data-table td {
    display: block;
    width: 100%;
  }

  .table-shell.is-responsive .data-table thead {
    display: none;
  }

  .table-shell.is-responsive .data-table tbody {
    display: grid;
    gap: 10px;
    padding: 10px;
    background: var(--surface);
  }

  .table-shell.is-responsive .data-table tr {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
  }

  .table-shell.is-responsive .data-table td {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--border);
    padding: 11px 13px;
    text-align: right;
  }

  .table-shell.is-responsive .data-table td:first-child {
    display: block;
    border-top: 0;
    padding: 14px 13px;
    text-align: left;
  }

  .table-shell.is-responsive .data-table td:last-child {
    display: flex;
    justify-content: flex-end;
  }

  .table-shell.is-responsive .data-table td[data-label]::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
  }

  .material-list {
    display: grid;
    gap: 10px;
    padding: 10px;
    background: var(--surface);
  }

  .material-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--white);
  }

  .material-row + .material-row {
    border-top: 1px solid var(--border);
  }

  .material-header {
    display: none;
  }

  .material-name {
    grid-column: 1 / -1;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }

  .material-cell {
    min-width: 0;
  }

  .mobile-label {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
  }

  .material-row .status {
    justify-self: start;
  }

  .material-row .row-action {
    justify-self: end;
  }

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

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

  .quantity-cell:nth-child(odd) {
    border-left: 0;
  }

  .quantity-cell:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }

  .match-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .schedule-banner {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px;
  }

  .countdown {
    text-align: left;
  }

  .package-list {
    display: grid;
    gap: 10px;
    padding: 10px;
    background: var(--surface);
  }

  .package-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--white);
  }

  .package-row + .package-row {
    border-top: 1px solid var(--border);
  }

  .package-name {
    grid-column: 1 / -1;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }

  .package-row .status {
    justify-self: start;
  }

  .package-row .row-action {
    justify-self: end;
  }
}

@media (max-width: 480px) {
  .shipping-page-toolbar,
  .shipment-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .shipment-form-footer .button {
    justify-content: center;
    width: 100%;
  }

  .shipping-ready-row {
    gap: 10px;
    padding: 13px 14px;
  }

  .shipment-address {
    grid-template-columns: minmax(0, 1fr);
  }

  .role-dialog {
    width: calc(100% - 20px);
  }

  .role-dialog-header {
    padding: 18px 16px 15px;
  }

  .role-options {
    padding: 10px;
  }

  .role-option {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 68px;
  }

  .role-option-state {
    display: none;
  }

  .role-dialog-footer {
    padding: 12px 16px 14px;
  }

  .workshop-task-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    padding: 13px 14px;
  }

  .workshop-task-row .status {
    grid-column: 2;
    justify-self: start;
  }

  .workshop-task-chevron {
    grid-row: 1 / 3;
    grid-column: 3;
  }

  .warehouse-task-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    padding: 13px 14px;
  }

  .warehouse-task-row > svg {
    display: none;
  }

  .topbar {
    padding: 0 12px;
  }

  .mobile-brand strong {
    max-width: 95px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page {
    padding-right: 12px;
    padding-left: 12px;
  }

  .page-heading h1,
  .detail-heading h1 {
    font-size: 22px;
  }

  .summary-value strong {
    font-size: 24px;
  }

  .section-header {
    padding-right: 14px;
    padding-left: 14px;
  }

  .detail-heading {
    gap: 10px;
  }

  .detail-heading .order-code {
    width: 44px;
    height: 44px;
  }

  .hero-fact {
    padding: 13px;
  }

  .scan-visual {
    min-height: 220px;
    padding: 20px;
  }

  .match-actions {
    grid-template-columns: 1fr;
  }

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 900px) {
  .purchase-detail-toolbar,
  .purchase-detail-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .purchase-detail-toolbar .button-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .purchase-status-panel {
    justify-items: start;
    text-align: left;
  }

  .purchase-document {
    min-height: 0;
    padding: 34px 28px;
  }

  .production-detail-toolbar,
  .production-detail-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .production-detail-status {
    justify-items: start;
    text-align: left;
  }

  .production-facts,
  .production-progress-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .production-facts > div:nth-child(2),
  .production-progress-summary > div:nth-child(2) {
    border-right: 0;
  }

  .production-facts > div:nth-child(n + 3),
  .production-progress-summary > div:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }

  .production-log > div {
    grid-template-columns: 130px minmax(0, 1fr);
  }

  .production-log small {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .purchase-detail-toolbar .button-group,
  .purchase-document-header,
  .purchase-document-meta,
  .purchase-document-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  .purchase-document-title {
    text-align: left;
  }

  .purchase-document-meta > div,
  .purchase-document-meta > div:nth-child(3n),
  .purchase-document-meta > div:nth-child(n + 4) {
    border-right: 0;
    border-bottom: 1px solid oklch(0.78 0.02 260);
  }

  .purchase-document-meta > div:last-child {
    border-bottom: 0;
  }

  .purchase-document {
    padding: 26px 18px;
  }

  .send-record-footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .production-workflow,
  .production-form-grid,
  .production-shortage-form,
  .production-material-check,
  .production-complete-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .production-shortage-note,
  .production-shortage-form .form-error-summary,
  .production-shortage-actions {
    grid-column: auto;
  }

  .production-shortage-actions,
  .production-material-resolved {
    grid-template-columns: minmax(0, 1fr);
  }

  .production-shortage-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .production-shortage-actions .button {
    justify-content: center;
    width: 100%;
  }

  .production-material-resolved > span {
    white-space: normal;
  }

  .production-workflow > span {
    justify-content: flex-start;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
  }

  .production-workflow > span:last-child {
    border-bottom: 0;
  }

  .production-material-check > div,
  .production-material-check > div:last-child {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .production-material-check > div:last-child {
    border-bottom: 0;
  }

  .production-form-actions {
    grid-column: auto;
  }

  .production-complete-panel .button {
    justify-self: stretch;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 11mm;
  }

  html,
  body {
    min-width: 0;
    background: #fff !important;
    color: #111 !important;
  }

  .sidebar,
  .topbar,
  .mobile-nav,
  .purchase-detail-toolbar,
  .purchase-detail-summary,
  .purchase-guidance,
  .purchase-record-note,
  .toast-region,
  dialog {
    display: none !important;
  }

  .workspace {
    margin: 0 !important;
    padding: 0 !important;
  }

  #mainContent,
  .page,
  .purchase-detail-page {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .purchase-document {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .purchase-document-table-wrap {
    overflow: visible;
  }

  .purchase-document-table {
    break-inside: auto;
  }

  .purchase-document-table tr {
    break-inside: avoid;
  }
}
.auth-gate {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 14%, rgba(52, 92, 184, 0.16), transparent 34%),
    linear-gradient(145deg, #f7f8fc 0%, #edf1f8 100%);
}

.auth-gate[hidden] {
  display: none;
}

.auth-card {
  width: min(100%, 420px);
  padding: 34px;
  border: 1px solid rgba(37, 58, 120, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(28, 45, 88, 0.16);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
}

.auth-brand img {
  width: 42px;
  height: 42px;
}

.auth-brand div,
.auth-brand span {
  display: block;
}

.auth-brand strong {
  font-size: 18px;
}

.auth-brand span,
.auth-footnote {
  color: var(--text-muted);
  font-size: 12px;
}

.auth-eyebrow {
  margin: 0 0 8px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.auth-card h1 {
  margin: 0;
  font-size: clamp(26px, 6vw, 34px);
}

.auth-card h1 + p {
  margin: 10px 0 26px;
  color: var(--text-muted);
}

.auth-form {
  display: grid;
  gap: 16px;
}

.auth-form label,
.auth-form label span {
  display: grid;
  gap: 7px;
}

.auth-form label span {
  font-size: 13px;
  font-weight: 700;
}

.auth-form input {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--white);
  color: var(--text);
  font: inherit;
}

.auth-form input:focus {
  border-color: var(--primary);
  outline: 3px solid rgba(37, 58, 120, 0.12);
}

.auth-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff0ef;
  color: #a52d25;
  font-size: 13px;
}

.auth-footnote {
  margin: 22px 0 0;
  text-align: center;
}

@media (max-width: 520px) {
  .auth-gate { padding: 14px; }
  .auth-card { padding: 26px 22px; border-radius: 14px; }
}

@media (max-width: 900px) {
  .master-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .master-summary-strip > div:nth-child(3) {
    border-left: 0;
  }

  .master-summary-strip > div:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 720px) {
  .master-table-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .master-search-field {
    width: 100%;
  }

  .master-data-table {
    min-width: 0;
  }

  .master-data-table td:first-child {
    max-width: none;
  }

  .master-row-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .master-record-dialog {
    width: calc(100% - 20px);
    max-height: calc(100vh - 20px);
  }

  .master-record-form {
    max-height: calc(100vh - 20px);
  }

  .master-record-header,
  .master-record-body,
  .master-record-footer {
    padding-right: 16px;
    padding-left: 16px;
  }

  .master-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .master-form-field.is-wide {
    grid-column: auto;
  }

  .master-record-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .master-record-footer > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}