:root {
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #1f2937;
  background: #f3f6f4;
  --editor-surface: #edf5f0;
  --editor-border: #c8d9cf;
  --editor-shadow: 0 8px 22px rgb(31 75 52 / 6%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

button,
.primary-link,
.table-action-link,
.module-action,
.secondary-link,
.product-pagination a {
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    transform 160ms ease;
}

button:not(:disabled):hover {
  filter: brightness(0.88);
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgb(31 41 55 / 14%);
}

button:not(:disabled):active,
.primary-link:active,
.table-action-link:active,
.module-action:active,
.secondary-link:active,
.product-pagination a:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: none;
}

button:focus-visible,
.primary-link:focus-visible,
.table-action-link:focus-visible,
.module-action:focus-visible,
.secondary-link:focus-visible,
.product-pagination a:focus-visible {
  outline: 3px solid rgb(47 111 78 / 32%);
  outline-offset: 3px;
}

input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: #56856a;
  outline: 3px solid rgb(47 111 78 / 18%);
  outline-offset: 1px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.secondary-button:not(:disabled):hover,
.secondary-link:hover {
  color: #174c33;
  border-color: #7fa58d;
  background: #e6f4eb;
  filter: none;
}

.secondary-danger-button:not(:disabled):hover {
  color: #762323;
  border-color: #c98686;
  background: #fdeaea;
  filter: none;
}

.module-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgb(31 41 55 / 14%);
}

.primary-link:hover {
  background: #24593e;
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgb(31 41 55 / 14%);
}

.table-action-link:hover {
  color: #ffffff;
  border-color: #2f6f4e;
  background: #2f6f4e;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgb(31 41 55 / 12%);
}

.product-pagination a:hover {
  color: #ffffff;
  border-color: #2f6f4e;
  background: #2f6f4e;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  button,
  .primary-link,
  .table-action-link,
  .module-action,
  .secondary-link,
  .product-pagination a {
    transition: none;
  }
}

.page-shell {
  min-height: 100vh;
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: 24px;
}

.welcome-card {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(460px, 1.18fr);
  align-items: center;
  gap: 42px;
  margin-top: 48px;
  padding: 48px;
  border: 1px solid #d9e2dc;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgb(31 41 55 / 8%);
}

.dashboard-preview {
  padding: 20px;
  border: 1px solid #d5e3da;
  border-radius: 16px;
  background: #f2f7f4;
}

.dashboard-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.dashboard-heading h2 {
  font-size: 23px;
}

.dashboard-heading time,
.dashboard-kicker {
  color: #68736d;
  font-size: 12px;
}

.dashboard-kicker {
  margin: 0 0 5px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

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

.dashboard-metric {
  min-width: 0;
  padding: 13px;
  border: 1px solid #e0e8e3;
  border-radius: 11px;
  background: #ffffff;
}

.dashboard-metric-link {
  color: inherit;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.dashboard-metric-link:hover {
  border-color: #b97777;
  box-shadow: 0 7px 16px rgb(66 35 35 / 10%);
  transform: translateY(-2px);
}

.dashboard-metric-link:focus-visible {
  outline: 3px solid rgb(143 73 73 / 24%);
  outline-offset: 3px;
}

.dashboard-metric.has-work:not(.has-attention) {
  box-shadow: inset 3px 0 0 #6b9a7d;
}

.dashboard-metric span,
.dashboard-metric small {
  display: block;
  color: #68736d;
  font-size: 11px;
}

.dashboard-metric strong {
  display: inline-block;
  margin: 6px 4px 2px 0;
  color: #203e2f;
  font-size: 25px;
  line-height: 1;
}

.dashboard-metric small {
  display: inline;
}

.metric-delivery {
  border-color: #ecd5bd;
  background: #fffaf4;
}

.metric-email-drafts {
  border-color: #cbd9eb;
  background: #f6f9fd;
}

.metric-email-drafts.has-attention {
  border-color: #dbb76b;
  background: #fff8e8;
  box-shadow: inset 4px 0 0 #c18823;
}

.metric-confirmation {
  border-color: #e5d8ad;
  background: #fffcf1;
}

.metric-payment {
  border-color: #e7c9c9;
  background: #fff7f7;
}

.metric-revenue {
  border-color: #cfe1d6;
  background: #f7fcf9;
}

.metric-revenue strong {
  font-size: 20px;
}

.channel-section {
  padding-top: 42px;
}

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

.channel-card {
  --channel-accent: #315f8c;
  --channel-tint: #eef5fb;
  padding: 24px;
  border: 1px solid #d5dfe8;
  border-top: 4px solid var(--channel-accent);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--channel-tint), #fff 72%);
  box-shadow: 0 10px 24px rgb(31 41 55 / 5%);
}

.channel-card-whatsapp {
  --channel-accent: #2f7953;
  --channel-tint: #edf8f1;
}

.channel-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.channel-card-kicker {
  color: var(--channel-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.channel-card h3 {
  margin: 5px 0 0;
  font-size: 24px;
}

.channel-card > p {
  margin: 16px 0;
  color: #5f6b64;
  line-height: 1.65;
}

.channel-count {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  color: #53615a;
  background: #fff;
  font-size: 12px;
  font-weight: 750;
}

.channel-count.has-work {
  color: #734f12;
  background: #fff0bd;
}

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

.channel-link-grid a {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--channel-accent) 30%, #fff);
  border-radius: 9px;
  color: var(--channel-accent);
  background: #fff;
  font-size: 13px;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.channel-link-grid a:hover {
  background: var(--channel-tint);
  box-shadow: 0 5px 12px rgb(31 41 55 / 8%);
  transform: translateY(-1px);
}

.channel-link-grid .channel-primary-link {
  border-color: var(--channel-accent);
  color: #fff;
  background: var(--channel-accent);
}

.channel-link-grid .channel-primary-link:hover {
  color: #fff;
  background: var(--channel-accent);
  filter: brightness(0.9);
}

.eyebrow {
  margin: 0 0 12px;
  color: #2f6f4e;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

h1 {
  margin: 0;
  font-size: clamp(36px, 7vw, 58px);
}

.description {
  margin: 14px 0 28px;
  color: #5f6b64;
  font-size: 20px;
}

.status {
  display: inline-block;
  margin: 0;
  padding: 10px 14px;
  border-radius: 999px;
  color: #1d5a3c;
  background: #e6f4eb;
  font-weight: 700;
}

.welcome-copy h1 {
  font-size: clamp(42px, 5.5vw, 58px);
  white-space: nowrap;
}

.module-section {
  padding: 48px 0 64px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

h2 {
  margin: 0;
  font-size: 30px;
}

.section-note {
  margin: 0;
  color: #68736d;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.module-card {
  --module-accent: #2f6f4e;
  --module-tint: #f2f8f4;
  display: flex;
  min-height: 230px;
  flex-direction: column;
  padding: 26px;
  border: 1px solid #d9e2dc;
  border-top: 4px solid var(--module-accent);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--module-tint) 0, #ffffff 46%);
}

.module-card-orders {
  --module-accent: #315f8c;
  --module-tint: #eef5fb;
}

.module-card-picking {
  --module-accent: #2f7953;
  --module-tint: #edf8f1;
}

.module-card-deliveries {
  --module-accent: #b36a2e;
  --module-tint: #fff5e9;
}

.module-card-master-data {
  --module-accent: #675690;
  --module-tint: #f4f1fa;
}

.module-card-sales {
  --module-accent: #8a6c20;
  --module-tint: #fbf7e9;
}

.system-status-card--billing {
  border-color: #dacfae;
  background: #fffaf0;
}

.billing-readiness-workspace {
  padding-top: 48px;
  padding-bottom: 72px;
}

.billing-readiness-header {
  border-top: 5px solid #98782c;
  background: linear-gradient(135deg, #fffdf7, #ffffff 70%);
}

.billing-privacy-note {
  margin: 18px 0 28px;
  padding: 16px 18px;
  border: 1px solid #cbded2;
  border-left: 5px solid #3d7b58;
  border-radius: 12px;
  color: #345445;
  background: #f1f8f4;
  line-height: 1.6;
}

.billing-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 42px;
}

.billing-principles article {
  padding: 20px;
  border: 1px solid #e3dcc9;
  border-radius: 14px;
  background: #fffdf8;
}

.billing-principles span,
.billing-task small {
  color: #7b6a3d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.billing-principles strong {
  display: block;
  margin-top: 8px;
  color: #3f3825;
  font-size: 18px;
}

.billing-principles p,
.billing-task p,
.billing-platform-links p {
  color: #667069;
  line-height: 1.65;
}

.billing-checklist {
  margin-top: 12px;
}

.billing-phase {
  display: grid;
  grid-template-columns: minmax(190px, 0.36fr) minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 18px;
  padding: 24px;
  border: 1px solid #dbe3de;
  border-radius: 16px;
  background: #ffffff;
}

.billing-phase-heading p {
  margin: 0 0 8px;
  color: #8a6c20;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.billing-phase-heading h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
}

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

.billing-task {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid #e5ebe7;
  border-radius: 12px;
  background: #f8faf8;
}

.billing-task-number {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #5c765f;
  font-size: 12px;
  font-weight: 800;
}

.billing-task h4 {
  margin: 0;
  font-size: 16px;
}

.billing-task p {
  margin: 7px 0 9px;
}

.billing-platform-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin: 38px 0 24px;
  padding: 26px;
  border: 1px solid #d8dfda;
  border-radius: 16px;
  background: #ffffff;
}

.billing-platform-links h2 {
  font-size: 25px;
}

.billing-platform-links p {
  margin-bottom: 0;
}

.billing-platform-links nav {
  display: grid;
  flex: 0 0 260px;
  gap: 10px;
}

.billing-platform-links a {
  padding: 11px 14px;
  border: 1px solid #947a39;
  border-radius: 9px;
  color: #6b5318;
  background: #fffaf0;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
}

.billing-platform-links a:hover {
  color: #ffffff;
  background: #80651f;
}

.module-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.module-number {
  color: var(--module-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.module-label {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--module-accent);
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.module-card h3 {
  margin: 28px 0 10px;
  font-size: 22px;
}

.module-card p {
  margin: 0 0 24px;
  color: #5f6b64;
  line-height: 1.65;
}

.pending-label,
.module-action {
  align-self: flex-start;
  margin-top: auto;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

.pending-label {
  color: #715b19;
  background: #fff3c4;
}

.module-action {
  color: #ffffff;
  background: var(--module-accent);
  text-decoration: none;
}

.module-action:hover {
  filter: brightness(0.88);
}

.workspace-shell {
  padding-top: 48px;
}

.back-link {
  display: inline-block;
  margin-bottom: 18px;
  color: #2f6f4e;
  font-weight: 700;
  text-decoration: none;
  transition: color 160ms ease, transform 160ms ease;
}

.back-link:hover {
  color: #174c33;
  transform: translateX(-2px);
}

.back-link:focus-visible {
  border-radius: 4px;
  outline: 3px solid rgb(47 111 78 / 24%);
  outline-offset: 3px;
}

.email-work-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: -0.25rem 0 1rem;
  padding: 0.55rem;
  border: 1px solid #d4e0d8;
  border-radius: 12px;
  background: #edf5f0;
}

.email-work-navigation a {
  padding: 0.55rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #355345;
  font-size: 0.88rem;
  font-weight: 750;
  text-decoration: none;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.email-work-navigation a:hover {
  border-color: #a9c3b3;
  background: #ffffff;
  transform: translateY(-1px);
}

.email-work-navigation a.is-active {
  border-color: #2f6f4e;
  color: #ffffff;
  background: #2f6f4e;
  box-shadow: 0 4px 10px rgb(31 75 52 / 16%);
}

.email-work-navigation .channel-switch-link {
  margin-left: auto;
  border-color: #d5c48d;
  color: #6f581b;
  background: #fff9e9;
}

.email-work-navigation a:focus-visible {
  outline: 3px solid rgb(47 111 78 / 25%);
  outline-offset: 2px;
}

.whatsapp-work-navigation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
}

.whatsapp-nav-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.whatsapp-nav-label {
  flex-basis: 100%;
  padding: 0 0.45rem;
  color: #74847b;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.whatsapp-work-navigation .channel-switch-link {
  align-self: end;
  margin-left: 0;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .whatsapp-work-navigation {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .whatsapp-nav-group + .whatsapp-nav-group {
    padding-top: 0.55rem;
    border-top: 1px solid #d7e3dc;
  }

  .whatsapp-work-navigation .channel-switch-link {
    justify-self: start;
  }
}

.workspace-card {
  padding: 48px;
  border: 1px solid #d9e2dc;
  border-radius: 18px;
  background: #ffffff;
}

.empty-state {
  margin-top: 36px;
  padding: 32px;
  border: 1px dashed #bdc9c1;
  border-radius: 14px;
  background: #f8faf8;
}

.empty-state h2 {
  font-size: 22px;
}

.empty-state p {
  margin-bottom: 0;
  color: #68736d;
}

.order-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 34px 0 18px;
  color: #68736d;
}

.order-summary strong {
  color: #1d5a3c;
  font-size: 30px;
}

.order-search-form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: end;
  gap: 9px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid #d8e3dc;
  border-radius: 11px;
  background: #f6faf7;
}

.order-search-form label {
  grid-column: 1 / -1;
  color: #506057;
  font-size: 13px;
  font-weight: 750;
}

.order-search-form input,
.order-search-form button,
.order-search-form .secondary-link {
  min-height: 40px;
  border-radius: 8px;
  font: inherit;
}

.order-search-form input {
  padding: 0 11px;
  border: 1px solid #bdc9c1;
  background: #ffffff;
}

.order-search-form button {
  padding: 0 17px;
  border: 0;
  color: #ffffff;
  background: #2f6f4e;
  font-weight: 750;
  cursor: pointer;
}

.order-search-form .secondary-link {
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid #bdc9c1;
  text-decoration: none;
}

.order-search-result {
  margin: 0 0 13px;
  color: #68736d;
  font-size: 13px;
}

.order-flow-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.order-flow-filters a {
  padding: 8px 11px;
  border: 1px solid #ccd9d1;
  border-radius: 999px;
  color: #40564a;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.order-flow-filters a:hover,
.order-flow-filters a.is-active {
  color: #ffffff;
  border-color: #2f6f4e;
  background: #2f6f4e;
  transform: translateY(-1px);
}

.order-flow-filters a:focus-visible {
  outline: 3px solid rgb(47 111 78 / 24%);
  outline-offset: 2px;
}

.order-flow-filters strong {
  margin-left: 3px;
}

.order-filter-result {
  margin: -7px 0 14px;
  color: #68736d;
  font-size: 13px;
}

.order-filter-note {
  margin: -5px 0 16px;
  padding: 11px 13px;
  border-left: 4px solid #c7a448;
  color: #64531d;
  background: #fff9e7;
  font-size: 13px;
}

.order-pagination {
  margin-top: 18px;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid #d9e2dc;
  border-radius: 14px;
}

.order-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  text-align: left;
}

.order-table th,
.order-table td {
  padding: 16px;
  border-bottom: 1px solid #e4e9e5;
  white-space: nowrap;
}

.order-table th {
  color: #5f6b64;
  background: #f8faf8;
  font-size: 13px;
}

.order-table tbody tr:last-child td {
  border-bottom: 0;
}

.order-table small {
  display: block;
  margin-top: 5px;
  color: #7b8a81;
}

.order-flow-status {
  white-space: normal;
}

.flow-pending_picking {
  color: #715b19;
  background: #fff3c4;
}

.flow-picking,
.flow-assigned_delivery {
  color: #205a77;
  background: #e3f2fa;
}

.flow-waiting_delivery,
.flow-ready_delivery {
  color: #675115;
  background: #fff7d9;
}

.flow-delivering {
  color: #6c4518;
  background: #ffead0;
}

.flow-returned,
.flow-cancelled {
  color: #852f2f;
  background: #fdeaea;
}

.flow-pending_payment {
  color: #7a3737;
  background: #fff0f0;
}

.flow-pending_confirmation,
.flow-delivered {
  color: #5d4b12;
  background: #fff5cb;
}

.flow-completed {
  color: #1d5a3c;
  background: #e6f4eb;
}

.sales-check-label {
  color: #347052 !important;
  font-weight: 700;
}

.order-evidence-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  white-space: normal;
}

.order-evidence {
  display: grid;
  gap: 6px;
  max-width: 240px;
}

.order-evidence img {
  display: block;
  width: 96px;
  height: 96px;
  border: 1px solid #d9e2dc;
  border-radius: 10px;
  object-fit: cover;
}

.order-evidence audio {
  width: 230px;
}

.order-evidence a {
  color: #1d5a3c;
  overflow-wrap: anywhere;
}

.order-link {
  color: #1d5a3c;
  font-weight: 700;
  text-decoration: none;
}

.order-link:hover {
  text-decoration: underline;
}

.order-action-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.email-draft-alert-link {
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: #fff0c6;
  color: #76500d;
  text-decoration: none;
}

.order-intake-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid #dfbd70;
  border-radius: 12px;
  background: #fff8e8;
  color: #563d0e;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.order-intake-alert:hover {
  box-shadow: 0 7px 16px rgb(103 74 24 / 12%);
  transform: translateY(-2px);
}

.order-intake-alert span,
.order-intake-alert small {
  display: block;
}

.order-intake-alert small {
  margin-top: 0.2rem;
  color: #765f34;
}

.order-intake-alert b {
  white-space: nowrap;
}

.secondary-link {
  color: #1d5a3c;
  font-weight: 700;
}

.source-inbox-action {
  display: grid;
  min-width: 210px;
  gap: 7px;
}

.source-inbox-action input {
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid #bdc9c1;
  border-radius: 8px;
  font: inherit;
}

.review-items-table td:nth-child(3) {
  min-width: 260px;
  white-space: normal;
}

.review-focus-row td {
  background: #fff8df;
}

.new-product-link {
  display: inline-block;
  margin-top: 10px;
  color: #1d5a3c;
  font-size: 13px;
  font-weight: 700;
}

.source-item-panel {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 22px 0;
  padding: 20px;
  border: 1px solid #d5dfd8;
  border-left: 5px solid #2f7a53;
  border-radius: 12px;
  background: #f7fbf8;
}

.source-item-panel h3 {
  margin: 5px 0 12px;
}

.customer-review-table td:last-child {
  min-width: 320px;
  white-space: normal;
}

.customer-review-form {
  display: grid;
  gap: 9px;
}

.customer-review-form select,
.customer-review-form button {
  min-height: 38px;
  border-radius: 8px;
}

.customer-review-form select {
  border: 1px solid #cfd9d2;
  background: #fff;
  padding: 7px 9px;
}

.batch-assignment-option {
  padding: 9px;
  border-radius: 8px;
  background: #fff6d8;
  color: #684d00;
}

.status-pending {
  background: #fff3cd;
  color: #735700;
}

.status-accepted {
  background: #def4e6;
  color: #1d5a3c;
}

.status-error {
  background: #fde5e2;
  color: #8a2f27;
}

.status-ignored {
  background: #ecefed;
  color: #5f6b64;
}

.source-inbox-table code {
  font-size: 12px;
}

.order-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 34px 0 42px;
}

.order-facts div {
  padding: 18px;
  border-radius: 12px;
  background: #f8faf8;
}

.order-facts dt {
  margin-bottom: 7px;
  color: #68736d;
  font-size: 13px;
}

.order-facts dd {
  margin: 0;
  font-weight: 700;
}

.detail-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.detail-heading span {
  color: #68736d;
}

.compact-empty-state {
  margin-top: 0;
}

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

.picking-card {
  padding: 24px;
  border: 1px solid #d9e2dc;
  border-radius: 14px;
  background: #ffffff;
}

.picking-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.picking-card h2 {
  margin: 24px 0 8px;
  font-size: 23px;
}

.source-label,
.received-time {
  color: #68736d;
  font-size: 13px;
}

.picking-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 24px 0;
}

.picking-progress div {
  padding: 13px;
  border-radius: 10px;
  background: #f8faf8;
}

.picking-progress dt {
  margin-bottom: 5px;
  color: #68736d;
  font-size: 12px;
}

.picking-progress dd {
  margin: 0;
  font-weight: 700;
}

.received-time {
  margin: 0;
}

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

.delivery-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 12px;
  margin: 32px 0;
}

.delivery-summary-grid div {
  padding: 16px;
  border: 1px solid #d9e2dc;
  border-radius: 12px;
  background: #f7faf8;
}

.delivery-summary-grid span,
.delivery-summary-grid small {
  color: #68736d;
}

.delivery-summary-grid strong {
  margin: 0 6px;
  color: #1d5a3c;
  font-size: 28px;
}

.delivery-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 36px 0 16px;
}

.delivery-section-heading .eyebrow {
  margin-bottom: 5px;
}

.delivery-section-heading > span {
  color: #68736d;
  font-weight: 700;
}

.delivery-card {
  padding: 24px;
  border: 1px solid #d9e2dc;
  border-radius: 14px;
  background: #ffffff;
}

.delivery-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.delivery-sequence,
.delivery-customer-source,
.delivery-ready-time {
  color: #68736d;
  font-size: 13px;
}

.delivery-card h2 {
  margin: 24px 0 8px;
  font-size: 23px;
}

.delivery-customer-source {
  margin: 0 0 8px;
}

.delivery-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0 18px;
}

.delivery-facts div {
  padding: 13px;
  border-radius: 10px;
  background: #f3f8f5;
}

.delivery-facts dt {
  margin-bottom: 5px;
  color: #68736d;
  font-size: 12px;
}

.delivery-facts dd {
  margin: 0;
  font-weight: 800;
}

.status-ready {
  color: #715b19;
  background: #fff3c4;
}

.status-assigned {
  color: #205a77;
  background: #e3f2fa;
}

.status-out_for_delivery {
  color: #6c4518;
  background: #ffead0;
}

.status-delivered,
.payment-collected-badge {
  color: #1d5a3c;
  background: #e6f4eb;
}

.status-returned,
.payment-pending-badge {
  color: #852f2f;
  background: #fdeaea;
}

.payment-collected-badge,
.payment-pending-badge {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.delivery-assignment-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 18px 0 10px;
}

.delivery-assignment-form label {
  grid-column: 1 / -1;
  color: #5f6b64;
  font-size: 13px;
  font-weight: 700;
}

.delivery-assignment-form select,
.delivery-assignment-form button {
  min-height: 42px;
  border-radius: 9px;
  font: inherit;
}

.delivery-assignment-form select {
  padding: 0 10px;
  border: 1px solid #bdc9c1;
  background: #ffffff;
}

.delivery-assignment-form button {
  padding: 0 15px;
  border: 0;
  color: #ffffff;
  background: #2f6f4e;
  font-weight: 800;
  cursor: pointer;
}

.delivery-start-form,
.delivery-payment-form {
  margin: 12px 0;
}

.delivery-start-form button,
.delivery-payment-form button {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  color: #ffffff;
  background: #315f8c;
  font-weight: 800;
  cursor: pointer;
}

.delivery-payment-form button {
  background: #2f6f4e;
}

.delivery-started-time,
.delivery-finished-line,
.delivery-return-note {
  color: #5f6b64;
  font-size: 13px;
}

.delivery-outcome-form {
  margin: 18px 0 10px;
  padding: 14px;
  border: 1px solid #ecd5bd;
  border-radius: 11px;
  background: #fffaf4;
}

.delivery-outcome-form label {
  display: grid;
  gap: 6px;
  color: #5f6b64;
  font-size: 13px;
  font-weight: 700;
}

.delivery-outcome-form input {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid #cbbba8;
  border-radius: 8px;
  background: #ffffff;
  font: inherit;
}

.delivery-outcome-actions {
  display: grid;
  grid-template-columns: 0.7fr 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.delivery-outcome-actions button {
  min-height: 46px;
  padding: 8px;
  border: 0;
  border-radius: 9px;
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.delivery-return-button {
  background: #955050;
}

.delivery-collected-button {
  background: #2f6f4e;
}

.delivery-pending-button {
  background: #a76a25;
}

.delivery-detail-action {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 9px;
  color: #ffffff;
  background: #2f6f4e;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.delivery-detail-action:hover {
  background: #24593e;
}

.alert {
  margin: 20px 0;
  padding: 13px 16px;
  border-radius: 10px;
  font-weight: 700;
}

.alert-success {
  color: #1d5a3c;
  background: #e6f4eb;
}

.alert-error {
  color: #852f2f;
  background: #fdeaea;
}

.exception-summary,
.picker-line {
  color: #5f6b64;
  font-size: 14px;
}

.start-picking-form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin: 20px 0;
}

.picking-continue-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-block: 16px;
  padding: 10px 14px;
  white-space: normal;
  text-align: center;
}

.start-picking-form label {
  align-self: center;
  color: #5f6b64;
  font-size: 13px;
  font-weight: 700;
}

.start-picking-form select,
.start-picking-form button {
  min-height: 42px;
  border-radius: 9px;
  font: inherit;
}

.start-picking-form select {
  padding: 0 10px;
  border: 1px solid #bdc9c1;
  background: #ffffff;
}

.start-picking-form button {
  grid-column: 1 / -1;
  border: 0;
  color: #ffffff;
  background: #2f6f4e;
  font-weight: 700;
  cursor: pointer;
}

.start-picking-form button:hover {
  background: #24593e;
}

.quantity-step-form,
.quantity-direct-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quantity-direct-form {
  margin-top: 8px;
}

.quantity-step-form select,
.quantity-step-form button,
.quantity-direct-form input,
.quantity-direct-form button {
  min-height: 34px;
  border: 1px solid #bdc9c1;
  border-radius: 7px;
  background: #ffffff;
  font: inherit;
}

.quantity-step-form select,
.quantity-direct-form input {
  width: 66px;
  padding: 0 7px;
}

.quantity-step-form button,
.quantity-direct-form button {
  padding: 0 10px;
  cursor: pointer;
}

.quantity-step-form strong {
  min-width: 42px;
  text-align: center;
}

.quantity-direct-form button {
  color: #ffffff;
  border-color: #2f6f4e;
  background: #2f6f4e;
}

.quantity-result,
.save-status {
  margin: 7px 0 0;
  font-size: 12px;
}

.quantity-result {
  color: #5f6b64;
  font-weight: 700;
}

.save-status {
  min-height: 18px;
}

.save-status.is-saving {
  color: #68736d;
}

.save-status.is-saved {
  color: #1d5a3c;
}

.save-status.is-error {
  color: #a22f2f;
  font-weight: 700;
}

.quantity-editor button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.order-product-cell {
  display: grid;
  grid-template-columns: 92px minmax(150px, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 270px;
}

.order-product-cell > div {
  display: grid;
  gap: 5px;
}

.order-product-cell small,
.detail-table td > small {
  display: block;
  color: #68736d;
}

.order-product-image {
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d7e1da;
  border-radius: 10px;
  background: #f4f7f5;
}

.order-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.order-product-image--missing {
  padding: 8px;
  color: #78847d;
  font-size: 12px;
  text-align: center;
}

.storage-location {
  color: #285f43;
  font-size: 13px;
  font-weight: 750;
}

.storage-location--missing {
  color: #8a661d;
}

.order-product-edit-link {
  color: #315f8c;
  font-size: 12px;
  font-weight: 700;
}

.complete-picking-form {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #c9ddd0;
  border-radius: 14px;
  background: #f2f8f4;
}

.complete-picking-form p {
  margin: 0;
  color: #506057;
}

.complete-picking-button {
  width: min(100%, 440px);
  min-height: 58px;
  padding: 14px 24px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #236b49;
  font-size: 20px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 8px 18px rgb(35 107 73 / 20%);
}

.complete-picking-button:hover {
  background: #19583b;
}

.order-items-panel {
  margin-bottom: 34px;
  padding-bottom: 30px;
  border-bottom: 2px solid #e2ebe5;
}

.order-items-heading {
  align-items: end;
  margin-top: 0;
}

.order-items-heading .eyebrow {
  margin: 0 0 4px;
}

.order-items-heading h2 {
  margin: 0;
}

.compact-picking-scroll {
  overflow-x: auto;
  border: 1px solid #d8e3dc;
  border-radius: 14px;
}

.compact-picking-table {
  min-width: 760px;
  table-layout: fixed;
}

.compact-picking-table th,
.compact-picking-table td {
  padding: 10px 12px;
  vertical-align: middle;
}

.compact-picking-table th:nth-child(1) { width: 29%; }
.compact-picking-table th:nth-child(2) { width: 90px; }
.compact-picking-table th:nth-child(3) { width: 100px; }
.compact-picking-table th:nth-child(4) { width: 290px; }
.compact-picking-table th:nth-child(5) { width: 95px; }

.compact-product-identity {
  white-space: normal;
}

.compact-product-identity > strong,
.compact-product-identity > span,
.compact-product-identity > small,
.compact-product-identity > a {
  display: block;
  margin-bottom: 3px;
}

.compact-order-evidence {
  margin-top: 7px;
  font-size: 12px;
}

.compact-order-evidence summary {
  color: #315f8c;
  cursor: pointer;
  font-weight: 750;
}

.compact-order-evidence a,
.compact-order-evidence audio {
  display: block;
  max-width: 220px;
  margin-top: 5px;
}

.compact-order-evidence img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 1px solid #d7e1da;
  border-radius: 8px;
}

.master-price-cell small {
  display: block;
  color: #68736d;
  font-size: 11px;
}

.compact-product-picture .order-product-image {
  width: 68px;
  height: 68px;
}

.ordered-quantity-cell,
.master-price-cell,
.actual-quantity-heading,
.actual-quantity-cell {
  text-align: center;
}

.ordered-quantity-cell strong {
  font-size: 19px;
}

.ordered-quantity-cell small {
  margin-left: 2px;
  color: #68736d;
}

.actual-quantity-cell .quantity-editor {
  display: grid;
  justify-items: center;
}

.actual-quantity-cell .quantity-direct-form {
  margin-top: 5px;
}

.actual-quantity-cell .quantity-result,
.actual-quantity-cell .save-status {
  margin-top: 3px;
}

.actual-quantity-cell .save-status:empty {
  display: none;
}

.quantity-auto-save-note {
  display: block;
  margin-top: 3px;
  color: #66726b;
  font-size: 11px;
  font-weight: 650;
}

.order-item-pagination {
  margin-top: 16px;
}

.order-overview-eyebrow {
  display: block;
  margin: 0 0 4px;
}

.confirmed-order-strip {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid #b9d8c6;
  border-radius: 14px;
  background: #f0f8f3;
}

.confirmed-order-strip > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.confirmed-order-strip strong {
  font-size: 16px;
}

.confirmed-order-strip > div > span:last-child {
  color: #315b43;
  font-weight: 750;
}

.confirmed-order-strip > a {
  flex: 0 0 auto;
  color: #235f43;
  font-weight: 800;
}

.sale-correction-panel {
  margin: 0 0 20px;
  border: 1px solid #e3c78d;
  border-radius: 14px;
  background: #fffaf0;
}

.sale-correction-panel > summary {
  display: flex;
  gap: 8px 18px;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 18px;
  color: #714b12;
  cursor: pointer;
}

.sale-correction-panel > summary span {
  font-weight: 850;
}

.sale-correction-panel > summary small {
  color: #78684d;
}

.sale-correction-content {
  padding: 0 18px 20px;
  border-top: 1px solid #ead9b4;
}

.correction-warning {
  margin: 16px 0;
  color: #684714;
  line-height: 1.55;
}

.sale-correction-table {
  min-width: 670px;
}

.sale-correction-table input,
.sale-correction-addition input,
.sale-correction-meta input,
.sale-correction-meta textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #cdbb95;
  border-radius: 8px;
  background: #fff;
  font: inherit;
}

.sale-correction-table input {
  width: 104px;
}

.sale-correction-addition {
  display: grid;
  grid-template-columns: minmax(150px, 1.5fr) repeat(4, minmax(90px, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 14px;
  border: 1px solid #e3d5b8;
  border-radius: 12px;
}

.sale-correction-addition legend {
  padding: 0 6px;
  color: #644b22;
  font-weight: 800;
}

.sale-correction-addition label,
.sale-correction-meta label {
  display: grid;
  gap: 6px;
  color: #514735;
  font-size: 13px;
  font-weight: 750;
}

.sale-correction-meta {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) minmax(280px, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.sale-correction-meta textarea {
  min-height: 76px;
  resize: vertical;
}

.correction-confirmation {
  margin: 16px 0 12px;
  color: #5f3f0f;
  font-weight: 800;
}

.danger-action-button {
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: #9b4f25;
  font-weight: 850;
  cursor: pointer;
}

.sale-correction-history {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #ead9b4;
}

.sale-correction-history summary {
  color: #644b22;
  cursor: pointer;
  font-weight: 750;
}

.sale-correction-history ol {
  margin-bottom: 0;
}

.sale-correction-history li span {
  display: block;
  margin-top: 3px;
  color: #6b6254;
}

.order-overview-panel {
  margin: 0 0 26px;
  border: 1px solid #d8e3dc;
  border-radius: 14px;
  background: #fbfcfb;
}

.order-overview-panel > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 20px;
  align-items: center;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}

.order-overview-panel > summary::-webkit-details-marker {
  display: none;
}

.order-overview-panel > summary::after {
  content: "展开";
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  color: #2f6f4e;
  font-size: 13px;
  font-weight: 800;
}

.order-overview-panel[open] > summary::after {
  content: "收起";
}

.order-overview-panel > summary strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 20px;
}

.order-overview-summary {
  color: #5f6b64;
  font-size: 14px;
  font-weight: 750;
}

.order-overview-content {
  padding: 4px 20px 22px;
  border-top: 1px solid #e4ebe6;
}

.order-overview-content > h1 {
  margin-top: 22px;
}

@media (max-width: 720px) {
  .confirmed-order-strip {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .sale-correction-panel > summary,
  .sale-correction-meta,
  .sale-correction-addition {
    grid-template-columns: 1fr;
  }

  .sale-correction-panel > summary {
    display: grid;
  }

  .order-overview-panel > summary {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .order-overview-panel > summary::after {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .order-overview-summary {
    padding-right: 0;
  }
}

@media (max-width: 720px) {
  .compact-picking-table {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .compact-picking-scroll { overflow: visible; border: 0; }
  .compact-picking-table thead { display: none; }
  .compact-picking-table tbody { display: grid; gap: 12px; }
  .compact-picking-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    padding: 10px;
    border: 1px solid #d8e3dc;
    border-radius: 14px;
    background: #fff;
  }
  .compact-picking-table td {
    display: block;
    min-width: 0;
    padding: 6px;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .compact-picking-table .compact-product-identity { grid-column: 1; grid-row: 1; }
  .compact-picking-table .compact-product-picture { grid-column: 2; grid-row: 1; }
  .compact-picking-table .ordered-quantity-cell { grid-column: 1; grid-row: 2; text-align: left; }
  .compact-picking-table .master-price-cell { grid-column: 2; grid-row: 2; }
  .compact-picking-table .actual-quantity-cell {
    grid-column: 1 / -1;
    grid-row: 3;
    padding-top: 10px;
    border-top: 1px solid #e5ece7;
  }
  .compact-picking-table .ordered-quantity-cell::before,
  .compact-picking-table .master-price-cell::before,
  .compact-picking-table .actual-quantity-cell::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: #51665a;
    font-size: 12px;
    font-weight: 750;
  }
  .compact-picking-table .quantity-direct-form input { min-width: 0; width: 110px; }
  .compact-picking-table .quantity-direct-form { flex-wrap: wrap; justify-content: center; }
  .compact-picking-table .quantity-step-form { gap: 8px; }
  .compact-picking-table .quantity-step-form select { width: 60px; }
  .compact-picking-table .quantity-step-form button { width: 44px; min-width: 44px; }
  .compact-picking-table .quantity-step-form select,
  .compact-picking-table .quantity-step-form button,
  .compact-picking-table .quantity-direct-form input,
  .compact-picking-table .quantity-direct-form button { min-height: 44px; }
}

@media (max-width: 360px) {
  .compact-picking-table .quantity-step-form { gap: 4px; }
  .compact-picking-table .quantity-step-form select { width: 48px; }
  .compact-picking-table .quantity-step-form strong { min-width: 32px; }
  .compact-picking-table .quantity-direct-form input { width: 88px; }
}

@media (max-width: 1100px) {
  .picking-detail-scroll {
    overflow: visible;
  }

  .picking-detail-table,
  .picking-detail-table tbody,
  .picking-detail-table tr,
  .picking-detail-table td {
    display: block;
    width: 100%;
  }

  .picking-detail-table thead {
    display: none;
  }

  .picking-detail-table tbody {
    display: grid;
    gap: 14px;
  }

  .picking-detail-table tr {
    padding: 12px 14px;
    border: 1px solid #d8e3dc;
    border-radius: 14px;
    background: #fff;
  }

  .picking-detail-table td {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid #edf1ee;
    white-space: normal;
  }

  .picking-detail-table td:last-child {
    border-bottom: 0;
  }

  .picking-detail-table td::before {
    content: attr(data-label);
    color: #68736d;
    font-size: 12px;
    font-weight: 800;
  }

  .order-product-cell {
    min-width: 0;
  }
}

.status-badge,
.review-badge,
.matched-label,
.muted-label {
  display: inline-block;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.status-pending,
.review-badge {
  color: #715b19;
  background: #fff3c4;
}

.status-in_progress {
  color: #205a77;
  background: #e3f2fa;
}

.status-completed,
.matched-label {
  color: #1d5a3c;
  background: #e6f4eb;
}

.muted-label {
  color: #68736d;
  background: #eef1ef;
}

.picking-result-summary {
  margin: 30px 0 24px;
  padding: 18px;
  border: 1px solid #d9e3dc;
  border-radius: 12px;
  background: #f8fbf9;
}

.picking-result-summary .detail-heading {
  margin: 0 0 14px;
}

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

.result-metrics div {
  padding: 13px;
  border-radius: 9px;
  background: #ffffff;
}

.result-metrics dt {
  color: #68736d;
  font-size: 13px;
}

.result-metrics dd {
  margin: 5px 0 0;
  color: #24372c;
  font-size: 20px;
  font-weight: 800;
}

.result-metrics .result-shortage dd {
  color: #9a4d23;
}

.result-breakdown {
  margin: 14px 0 0;
  color: #5f6b64;
  font-size: 14px;
}

.category-summary-scroll {
  margin-top: 16px;
  overflow-x: auto;
}

.category-summary-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  background: #ffffff;
}

.category-summary-table th,
.category-summary-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e3e9e5;
  text-align: right;
  white-space: nowrap;
}

.category-summary-table th {
  color: #ffffff;
  background: #395d49;
  font-size: 13px;
}

.category-summary-table th:first-child,
.category-summary-table th:nth-child(2),
.category-summary-table td:first-child,
.category-summary-table td:nth-child(2) {
  text-align: left;
}

.category-summary-table tbody tr:last-child td {
  border-bottom: 0;
}

.reopen-picking-form {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid #e4d8bd;
  border-radius: 11px;
  background: #fffaf0;
}

.reopen-picking-form div {
  display: grid;
  gap: 6px;
}

.reopen-picking-form label {
  color: #5f6b64;
  font-size: 13px;
  font-weight: 700;
}

.reopen-picking-form select,
.reopen-picking-form input,
.reopen-picking-form button {
  min-height: 42px;
  border-radius: 8px;
  font: inherit;
}

.reopen-picking-form select,
.reopen-picking-form input {
  padding: 0 10px;
  border: 1px solid #bdc9c1;
  background: #ffffff;
}

.reopen-picking-form button {
  padding: 0 16px;
  border: 0;
  color: #ffffff;
  background: #8a5a22;
  font-weight: 700;
  cursor: pointer;
}

.locked-message {
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 9px;
  color: #715b19;
  background: #fff3c4;
}

.event-history {
  margin-top: 30px;
}

.delivery-history {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid #d9e3dc;
}

.delivery-history-list {
  display: grid;
  gap: 16px;
}

.delivery-history-card {
  padding: 18px;
  border: 1px solid #d5e1d9;
  border-radius: 12px;
  background: #f8fbf9;
}

.delivery-history-heading,
.delivery-history-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.delivery-history-heading {
  justify-content: space-between;
}

.delivery-history-heading > strong {
  color: #506057;
  font-size: 14px;
}

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

.delivery-history-facts div {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 8px;
  background: #ffffff;
}

.delivery-history-facts dt {
  color: #68736d;
  font-size: 12px;
}

.delivery-history-facts dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-weight: 750;
}

.delivery-return-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-left: 4px solid #b75050;
  color: #703434;
  background: #fff4f4;
}

.delivery-event-list {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed #cbd8d0;
  list-style: none;
}

.delivery-event-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-left: 13px;
  border-left: 3px solid #7ba58d;
}

.delivery-event-list li > span {
  flex: 0 0 auto;
  color: #68736d;
  font-size: 12px;
  text-align: right;
}

.delivery-event-list p {
  margin: 4px 0 0;
  color: #59665f;
  font-size: 13px;
}

.payment-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 28px;
}

.payment-summary-grid > div {
  padding: 16px;
  border: 1px solid #ead8d8;
  border-radius: 11px;
  background: #fff8f8;
}

.payment-summary-grid span,
.payment-summary-grid small {
  display: block;
  color: #735f5f;
  font-size: 12px;
}

.payment-summary-grid strong {
  display: inline-block;
  margin: 7px 5px 3px 0;
  color: #733737;
  font-size: 24px;
}

.pending-payment-list {
  display: grid;
  gap: 16px;
}

.pending-payment-card {
  padding: 20px;
  border: 1px solid #dfd3d3;
  border-radius: 13px;
  background: #fffdfd;
}

.pending-payment-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.pending-payment-heading h2 {
  margin: 10px 0 0;
  font-size: 22px;
}

.pending-payment-heading p {
  margin: 5px 0 0;
  color: #68736d;
  font-size: 13px;
}

.pending-payment-heading > strong {
  color: #733737;
  font-size: 25px;
  white-space: nowrap;
}

.payment-amount-unconfirmed {
  padding: 7px 10px;
  border-radius: 8px;
  color: #715b19;
  background: #fff3c4;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.pending-payment-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.pending-payment-facts div {
  min-width: 0;
  padding: 11px;
  border-radius: 8px;
  background: #f7f7f5;
}

.pending-payment-facts dt {
  color: #68736d;
  font-size: 12px;
}

.pending-payment-facts dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-weight: 750;
}

.pending-payment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.pending-payment-actions form {
  margin: 0;
}

.pending-payment-actions button {
  min-height: 40px;
  padding: 0 15px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: #2f6f4e;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.event-history ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-history li {
  padding: 13px 15px;
  border-left: 4px solid #7ba58d;
  border-radius: 0 8px 8px 0;
  background: #f5f8f6;
}

.event-history li span {
  display: block;
  margin-top: 4px;
  color: #68736d;
  font-size: 13px;
}

.event-history li p {
  margin: 7px 0 0;
  color: #4c5b53;
  font-size: 13px;
}

.master-data-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 180px));
  gap: 12px;
  margin: 28px 0;
}

.master-data-counts div {
  padding: 15px;
  border-radius: 10px;
  background: #eef5f0;
}

.master-data-counts dt {
  color: #68736d;
  font-size: 13px;
}

.master-data-counts dd {
  margin: 5px 0 0;
  color: #1d5a3c;
  font-size: 26px;
  font-weight: 800;
}

.category-admin {
  margin-top: 26px;
}

.product-admin {
  margin-top: 26px;
  padding-bottom: 28px;
  border-bottom: 1px solid #d9e3dc;
}

.product-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid #d9e3dc;
  border-radius: 11px;
  background: #f8fbf9;
}

.product-form label,
.product-search label {
  display: grid;
  gap: 6px;
  color: #5f6b64;
  font-size: 13px;
  font-weight: 700;
}

.product-form input,
.product-form select,
.product-form button,
.product-search input,
.product-search select,
.product-search button {
  min-height: 42px;
  border-radius: 8px;
  font: inherit;
}

.product-form input,
.product-form select,
.product-search input,
.product-search select {
  padding: 0 10px;
  border: 1px solid #bdc9c1;
  background: #ffffff;
}

.product-form button,
.product-search button {
  border: 0;
  color: #ffffff;
  background: #2f6f4e;
  font-weight: 700;
  cursor: pointer;
}

.product-form button {
  align-self: end;
}

.form-note {
  grid-column: span 3;
  align-self: center;
  margin: 0;
  color: #68736d;
  font-size: 13px;
}

.product-search {
  display: grid;
  grid-template-columns: minmax(180px, 420px) auto auto;
  align-items: end;
  justify-content: start;
  gap: 10px;
  flex: 1 1 400px;
  margin: 0;
}

.product-search a {
  align-self: center;
  color: #2f6f4e;
}

.product-table {
  min-width: 1260px;
}

.product-table small {
  display: block;
  margin-top: 4px;
  color: #68736d;
}

.product-thumbnail-link {
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #d9e2dc;
  border-radius: 9px;
  background: #f5f7f5;
}

.product-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-thumbnail-empty {
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  border: 1px dashed #c6d0c9;
  border-radius: 9px;
  color: #7b867f;
  background: #f7f9f7;
  font-size: 11px;
}

.table-note {
  color: #68736d;
  font-size: 13px;
}

.product-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}

.product-list-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-bottom: 14px;
}

.product-pagination-top {
  flex: 1 1 430px;
  margin: 0;
}

.product-pagination p {
  margin: 0;
  color: #68736d;
  font-size: 13px;
}

.product-pagination div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.product-pagination a,
.product-pagination strong,
.product-pagination span {
  display: inline-flex;
  min-width: 34px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
}

.primary-link,
.table-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}

.primary-link {
  min-height: 38px;
  padding: 0 15px;
  color: #ffffff;
  background: #2f6f4e;
}

.table-action-link {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #a9c2b3;
  color: #1d5a3c;
  background: #edf5f0;
  font-size: 12px;
  white-space: nowrap;
}

.product-pagination a {
  color: #1d5a3c;
  border: 1px solid #bdc9c1;
  background: #ffffff;
  font-weight: 700;
}

.product-pagination strong {
  color: #ffffff;
  background: #2f6f4e;
}

.product-pagination .disabled-page,
.product-pagination .page-ellipsis {
  color: #8a948e;
  background: #edf1ee;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.status-active {
  color: #1d5a3c;
  background: #e6f4eb;
}

.status-inactive {
  color: #6b4b32;
  background: #f3e8de;
}

.product-detail-heading,
.product-status-panel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.product-detail-heading h1 {
  margin-bottom: 8px;
}

.product-image-preview {
  display: grid;
  width: min(100%, 360px);
  gap: 8px;
  margin: 24px 0 0;
}

.product-image-preview a {
  display: flex;
  min-height: 220px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #d9e2dc;
  border-radius: 14px;
  background: #f5f7f5;
}

.product-image-preview img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
}

.product-image-preview figcaption,
.product-image-missing {
  color: #68736d;
  font-size: 13px;
}

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

.product-edit-form label {
  display: grid;
  gap: 6px;
  color: #5f6b64;
  font-size: 13px;
  font-weight: 700;
}

.product-edit-form input,
.product-edit-form select,
.product-edit-form button {
  min-height: 42px;
  border-radius: 8px;
  font: inherit;
}

.product-edit-form input,
.product-edit-form select {
  padding: 0 10px;
  border: 1px solid #bdc9c1;
  background: #ffffff;
}

.product-edit-form > button {
  border: 0;
  color: #ffffff;
  background: #2f6f4e;
  font-weight: 700;
  cursor: pointer;
}

.effective-rule-summary {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border-radius: 8px;
  background: #eef5f0;
}

.effective-rule-summary span {
  color: #68736d;
  font-size: 12px;
}

.product-status-panel {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid #d9e3dc;
}

.product-status-panel h2,
.product-status-panel p {
  margin: 0;
}

.product-status-panel p {
  margin-top: 7px;
  color: #68736d;
}

.secondary-button,
.secondary-danger-button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #bdc9c1;
  border-radius: 8px;
  background: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.visual-provider-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}

.visual-provider-actions span {
  color: #607168;
  font-size: 13px;
}

.azure-vision-settings-card {
  max-width: 820px;
  margin-inline: auto;
}

.azure-vision-settings-form {
  display: grid;
  gap: 18px;
  margin: 24px 0;
  padding: 22px;
  border: 1px solid #cddcd3;
  border-radius: 14px;
  background: #f4f9f6;
}

.azure-vision-settings-form label {
  display: grid;
  gap: 7px;
  color: #243e31;
  font-weight: 800;
}

.azure-vision-settings-form input {
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #aebfb5;
  border-radius: 9px;
  background: #ffffff;
  font: inherit;
}

.azure-vision-settings-form small {
  color: #66766e;
  font-size: 12px;
  font-weight: 500;
}

.azure-vision-settings-form button {
  min-height: 46px;
  border: 0;
  border-radius: 9px;
  color: #ffffff;
  background: #246b49;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.azure-vision-settings-form button:hover {
  background: #194d35;
}

.azure-vision-safety-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.azure-vision-safety-summary div {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid #d5e2da;
  border-radius: 11px;
  background: #ffffff;
}

.azure-vision-safety-summary span {
  color: #5e6c65;
  font-size: 13px;
}

@media (max-width: 720px) {
  .azure-vision-safety-summary {
    grid-template-columns: 1fr;
  }
}

.openai-settings-card {
  max-width: 1040px;
  margin-inline: auto;
}

.openai-page-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 24px;
}

.openai-page-heading h1 {
  margin-bottom: 10px;
}

.openai-offline-badge {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #d7bd72;
  border-radius: 999px;
  color: #6f550c;
  background: #fff8df;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.openai-readiness-hero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0;
}

.openai-readiness-hero > div {
  display: grid;
  gap: 6px;
  padding: 17px;
  border: 1px solid #cfe0d6;
  border-radius: 13px;
  background: #f5faf7;
}

.openai-readiness-hero span,
.openai-readiness-hero small,
.brain-provider-banner small {
  color: #607168;
  font-size: 12px;
}

.openai-readiness-hero strong {
  color: #163c29;
  font-size: 18px;
}

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

.openai-now-card {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 22px 0;
  padding: 20px;
  border: 1px solid #a9ceb7;
  border-left: 5px solid #2f7a53;
  border-radius: 14px;
  background: #edf8f1;
}

.openai-now-icon {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #2f7a53;
  font-size: 23px;
  font-weight: 900;
}

.openai-now-card h2,
.openai-now-card p {
  margin: 3px 0;
}

.openai-test-card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 22px;
  align-items: center;
  margin: 22px 0;
  padding: 22px;
  border: 1px solid #b8cfe9;
  border-radius: 14px;
  background: linear-gradient(135deg, #f4f8fd 0%, #edf6f2 100%);
}

.openai-test-copy h2 {
  margin: 5px 0 8px;
}

.openai-test-copy > p:not(.eyebrow),
.openai-test-copy li,
.openai-test-form small,
.openai-test-locked span {
  color: #596b64;
  line-height: 1.6;
}

.openai-test-copy ul {
  margin: 12px 0 0;
  padding-left: 20px;
}

.openai-test-form,
.openai-test-locked {
  display: grid;
  gap: 13px;
  padding: 18px;
  border: 1px solid #cfddd5;
  border-radius: 12px;
  background: #ffffff;
}

.openai-test-form .openai-confirm-line {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  font-weight: 650;
}

.openai-test-form .openai-confirm-line input {
  min-height: 0;
  margin-top: 4px;
}

.openai-test-form button:disabled {
  cursor: wait;
  opacity: .72;
}

.openai-test-result {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #90c7a7;
  border-radius: 14px;
  background: #edf9f1;
}

.openai-test-result > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.openai-test-result span {
  color: #617269;
  font-size: 12px;
}

.openai-test-result strong {
  color: #17442c;
  overflow-wrap: anywhere;
}

.openai-collapsible {
  margin: 14px 0;
  border: 1px solid #d5e2da;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.openai-collapsible > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  color: #244f38;
  cursor: pointer;
  list-style: none;
}

.openai-collapsible > summary::-webkit-details-marker {
  display: none;
}

.openai-collapsible > summary span {
  display: grid;
  gap: 4px;
}

.openai-collapsible > summary small {
  color: #66776e;
  font-weight: 500;
}

.openai-collapsible > summary i {
  color: #2f6f4e;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.openai-collapsible[open] > summary {
  border-bottom: 1px solid #dce6e0;
  background: #f5f9f6;
}

.openai-collapsible[open] > summary i::before {
  content: "收起 · ";
}

.openai-collapsible .openai-safety-grid {
  margin: 0;
  padding: 18px;
  background: #f8faf9;
}

.openai-safety-grid article,
.openai-next-step {
  padding: 20px;
  border: 1px solid #d6e1da;
  border-radius: 14px;
  background: #ffffff;
}

.openai-safety-grid h2 {
  margin: 12px 0 6px;
  font-size: 18px;
}

.openai-safety-grid p,
.openai-next-step li,
.openai-credential-panel > div > p {
  color: #56665e;
  line-height: 1.65;
}

.openai-credential-panel {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(360px, 1.2fr);
  gap: 24px;
  align-items: start;
  margin: 0;
  padding: 22px;
  border: 0;
  border-radius: 0;
  background: #eef7f1;
}

.openai-credential-panel .azure-vision-settings-form {
  margin: 0;
  background: #ffffff;
}

.azure-vision-settings-form .openai-confirm-line {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  font-weight: 600;
}

.azure-vision-settings-form .openai-confirm-line input {
  min-height: 0;
  margin-top: 4px;
}

.openai-next-step ol {
  margin: 14px 0 20px;
  padding-left: 24px;
}

.openai-step-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 !important;
  list-style-position: inside;
}

.openai-step-list li {
  display: list-item;
  padding: 14px;
  border-radius: 11px;
  background: #f3f7f4;
}

.openai-step-list li::marker {
  color: #397759;
  font-weight: 850;
}

.openai-step-list b {
  color: #244f38;
  font-size: 14px;
}

.openai-step-list span {
  display: block;
  margin-top: 5px;
  color: #66766e;
  font-size: 12px;
  line-height: 1.5;
}

.brain-provider-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #cbdcd2;
  border-radius: 13px;
  background: #f4f9f6;
}

.brain-provider-banner > div {
  display: grid;
  gap: 4px;
}

@media (max-width: 820px) {
  .openai-page-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .openai-offline-badge {
    align-self: flex-start;
  }

  .openai-readiness-hero,
  .openai-safety-grid,
  .openai-credential-panel,
  .openai-step-list,
  .openai-test-card,
  .openai-test-result {
    grid-template-columns: 1fr;
  }

  .brain-provider-banner {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .openai-settings-card {
    padding: 26px 20px;
  }

  .openai-now-card {
    align-items: flex-start;
  }

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

  .openai-collapsible > summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

.secondary-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid #bdc9c1;
  border-radius: 8px;
  color: #1d5a3c;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.import-preview-form {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: end;
  gap: 14px;
  margin-top: 26px;
  padding: 18px;
  border: 1px solid #d9e3dc;
  border-radius: 11px;
  background: #f8fbf9;
}

.import-preview-form label {
  display: grid;
  gap: 8px;
  color: #5f6b64;
  font-size: 13px;
  font-weight: 700;
}

.import-preview-form input,
.import-preview-form button {
  min-height: 42px;
  font: inherit;
}

.import-preview-form button {
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: #2f6f4e;
  font-weight: 700;
  cursor: pointer;
}

.manual-order-shell {
  width: min(100%, 1320px);
}

.manual-order-form {
  display: block;
  min-width: 0;
}

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

.manual-order-form select,
.manual-order-form input:not([type="hidden"]) {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid #bdc9c1;
  border-radius: 8px;
  background: #ffffff;
  font: inherit;
}

.manual-order-form .preview-results,
.manual-order-form .table-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

#manual-order-items {
  min-width: 1040px;
  table-layout: fixed;
}

#manual-order-items th,
#manual-order-items td {
  padding: 12px;
}

#manual-order-items th:nth-child(1) { width: 19%; }
#manual-order-items th:nth-child(2) { width: 18%; }
#manual-order-items th:nth-child(3) { width: 25%; }
#manual-order-items th:nth-child(4) { width: 9%; }
#manual-order-items th:nth-child(5) { width: 19%; }
#manual-order-items th:nth-child(6) { width: 10%; }

.manual-product-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 7px;
  border: 1px solid #c8d9cf;
  border-radius: 8px;
  color: #315440;
  background: #edf5f0;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}

.manual-product-preview:empty {
  display: none;
}

.manual-product-preview.is-missing {
  color: #7a5628;
  border-color: #e0c995;
  background: #fff8e6;
}

.manual-product-preview img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 7px;
  background: #ffffff;
  object-fit: contain;
}

.manual-product-preview span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.manual-product-preview strong,
.manual-product-preview small {
  overflow-wrap: anywhere;
}

.manual-product-preview small {
  color: #5f6b64;
}

.manual-product-search-button {
  width: 100%;
  min-height: 32px;
  margin-top: 7px;
  border: 1px solid #9eb9a8;
  border-radius: 7px;
  color: #1d5a3c;
  background: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.manual-product-candidates {
  display: grid;
  gap: 6px;
  margin-top: 7px;
  white-space: normal;
}

.manual-product-candidates:empty {
  display: none;
}

.manual-product-candidates.is-empty {
  padding: 7px;
  border-radius: 7px;
  color: #68736d;
  background: #f4f6f4;
  font-size: 12px;
}

.manual-product-candidate {
  display: grid;
  width: 100%;
  min-height: 48px;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid #c8d9cf;
  border-radius: 8px;
  color: #294a37;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
}

.manual-product-candidate:hover {
  border-color: #56856a;
  background: #e6f4eb;
  filter: none;
}

.manual-product-candidate img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: contain;
}

.manual-product-candidate span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.manual-product-candidate strong,
.manual-product-candidate small {
  overflow-wrap: anywhere;
}

.assisted-item-match-form {
  min-width: 280px;
}

.assisted-sku-search {
  white-space: nowrap;
}

.assisted-sku-candidates {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.45rem;
  margin-top: 0.4rem;
}

.assisted-sku-candidates:empty {
  display: none;
}

.assisted-sku-candidates > p,
.assisted-sku-candidates.is-empty {
  margin: 0;
  color: #66756d;
  font-size: 0.82rem;
}

.assisted-sku-candidate {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
  width: 100%;
  padding: 0.45rem;
  border: 1px solid #c8d9cf;
  border-radius: 10px;
  background: #fff;
  color: #1f2937;
  text-align: left;
}

.assisted-sku-candidate:hover {
  border-color: #2f6f4e;
  background: #edf7f1;
}

.assisted-sku-candidate img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}

.assisted-sku-candidate span,
.assisted-sku-candidate strong,
.assisted-sku-candidate small {
  display: block;
  min-width: 0;
}

.source-resolution {
  display: inline-flex;
  margin-bottom: 0.35rem;
}

.source-resolution--yougou {
  color: #315b75;
  background: #e8f2f8;
}

.source-resolution--whatsapp {
  color: #166044;
  background: #e5f5ec;
}

.source-resolution--manual {
  color: #795b16;
  background: #fff2c7;
}

.whatsapp-ai-preview {
  display: grid;
  gap: 1rem;
}

.ai-scope-section {
  padding: 1rem;
  border: 1px solid #c8d9cf;
  border-radius: 14px;
}

.ai-scope-section h2 {
  margin-top: 0;
}

.ai-scope-section--allowed {
  background: #edf7f1;
}

.ai-scope-section--blocked {
  background: #fff8e7;
  border-color: #e5d4a6;
}

.ai-scope-section--blocked li + li {
  margin-top: 0.35rem;
}

.assisted-sku-candidate small {
  margin-top: 0.15rem;
  color: #66756d;
}

.manual-product-candidate small {
  color: #68736d;
}

#manual-order-items input[type="file"] {
  padding: 7px;
  font-size: 12px;
}

#manual-order-items .remove-manual-item {
  width: 100%;
  padding: 0 10px;
}

.manual-order-form > button[type="submit"] {
  width: 100%;
  margin-top: 18px;
}

.safety-note {
  padding: 12px 14px;
  border-left: 4px solid #6c8f78;
  color: #4c5b53;
  background: #eef5f0;
}

.preview-results {
  margin-top: 30px;
}

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

.preview-counts div {
  padding: 14px;
  border-radius: 9px;
  background: #f1f5f2;
}

.preview-counts dt {
  color: #68736d;
  font-size: 12px;
}

.preview-counts dd {
  margin: 4px 0 0;
  color: #1d5a3c;
  font-size: 23px;
  font-weight: 800;
}

.preview-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.preview-notes p {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: #5f6b64;
  background: #fff8e8;
  font-size: 13px;
}

.preview-table {
  min-width: 760px;
}

.preview-action {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.preview-add,
.preview-unchanged {
  color: #1d5a3c;
  background: #e6f4eb;
}

.preview-update {
  color: #7a501a;
  background: #fff0d5;
}

.preview-exclude {
  color: #59625d;
  background: #ecefed;
}

.preview-error {
  color: #8d3030;
  background: #fde8e8;
}

.preview-missing {
  color: #654b86;
  background: #f0e8fa;
}

.field-change-list {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding-left: 18px;
  color: #4c5b53;
  font-size: 13px;
}

.product-bulk-form {
  margin: 0;
}

.bulk-toolbar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #d9e3dc;
  border-radius: 9px;
  background: #f8fbf9;
}

.bulk-toolbar label {
  display: grid;
  gap: 5px;
  color: #5f6b64;
  font-size: 12px;
  font-weight: 700;
}

.bulk-toolbar input,
.bulk-toolbar select,
.bulk-toolbar button {
  min-height: 38px;
  border-radius: 7px;
  font: inherit;
}

.bulk-toolbar input,
.bulk-toolbar select {
  min-width: 220px;
  padding: 0 9px;
  border: 1px solid #bdc9c1;
  background: #ffffff;
}

.bulk-toolbar input {
  min-width: 150px;
}

.bulk-toolbar button {
  padding: 0 13px;
  border: 0;
  color: #ffffff;
  background: #2f6f4e;
  font-weight: 700;
  cursor: pointer;
}

.bulk-toolbar span {
  align-self: center;
  color: #68736d;
  font-size: 13px;
}

.price-category-admin {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid #d9e3dc;
}

.price-category-form {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 2fr auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid #d9e3dc;
  border-radius: 11px;
  background: #f8fbf9;
}

.price-category-form label {
  display: grid;
  gap: 6px;
  color: #5f6b64;
  font-size: 13px;
  font-weight: 700;
}

.price-category-form input,
.price-category-form button {
  min-height: 42px;
  border-radius: 8px;
  font: inherit;
}

.price-category-form input {
  padding: 0 10px;
  border: 1px solid #bdc9c1;
  background: #ffffff;
}

.price-category-form button {
  padding: 0 15px;
  border: 0;
  color: #ffffff;
  background: #2f6f4e;
  font-weight: 700;
  cursor: pointer;
}

.price-category-table {
  min-width: 700px;
}

.company-counts {
  grid-template-columns: minmax(150px, 220px);
}

.company-readiness-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
  margin: 22px 0;
}

.company-readiness-grid > div,
.company-readiness-grid > a {
  padding: 13px 14px;
  border: 1px solid #d9e3dc;
  border-radius: 10px;
  color: inherit;
  background: #f7faf8;
  text-decoration: none;
}

.company-readiness-grid > a:hover {
  border-color: #83a28f;
  background: #eaf3ed;
}

.company-readiness-grid dt {
  color: #68736d;
  font-size: 12px;
}

.company-readiness-grid dd {
  margin: 5px 0 0;
  color: #1d5a3c;
  font-size: 24px;
  font-weight: 800;
}

.company-filter-form {
  grid-template-columns: minmax(240px, 420px) minmax(160px, 210px) auto auto;
  margin-bottom: 16px;
}

.company-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  margin: 22px 0;
  padding: 16px;
  border: 1px solid #d9e3dc;
  border-radius: 11px;
  background: #f8fbf9;
}

.auto-id-preview {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #b8ccbf;
  border-radius: 8px;
  background: #eaf3ed;
}

.auto-id-preview span,
.auto-id-preview small {
  color: #68736d;
  font-size: 11px;
}

.auto-id-preview strong {
  color: #1d5a3c;
  font-size: 18px;
}

.company-import-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin: 26px 0;
  padding: 18px;
  border: 1px solid #d5e2da;
  border-radius: 12px;
  background: #f5faf7;
}

.company-import-form label {
  display: grid;
  gap: 7px;
  color: #506057;
  font-size: 13px;
  font-weight: 750;
}

.company-import-form input,
.company-import-form button {
  min-height: 42px;
  border-radius: 8px;
  font: inherit;
}

.company-import-form input {
  padding: 8px 10px;
  border: 1px solid #bdc9c1;
  background: #ffffff;
}

.company-import-form button {
  padding: 0 17px;
  border: 0;
  color: #ffffff;
  background: #2f6f4e;
  font-weight: 750;
  cursor: pointer;
}

.company-import-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}

.company-import-summary div {
  padding: 14px;
  border-radius: 10px;
  background: #eef5f0;
}

.company-import-summary span {
  display: block;
  color: #68736d;
  font-size: 12px;
}

.company-import-summary strong {
  display: block;
  margin-top: 5px;
  color: #1d5a3c;
  font-size: 25px;
}

.alert-warning {
  color: #6a5312;
  background: #fff4c8;
}

.import-add {
  color: #1d5a3c;
  background: #e6f4eb;
}

.import-update {
  color: #205a77;
  background: #e3f2fa;
}

.import-unchanged {
  color: #59665f;
  background: #edf1ee;
}

.import-error {
  color: #852f2f;
  background: #fdeaea;
}

.company-form label,
.category-price-form label {
  display: grid;
  gap: 6px;
  color: #5f6b64;
  font-size: 13px;
  font-weight: 700;
}

.company-form input,
.company-form button,
.category-price-form input,
.category-price-form select,
.category-price-form button {
  min-height: 42px;
  border-radius: 8px;
  font: inherit;
}

.company-form input,
.category-price-form input,
.category-price-form select {
  padding: 0 10px;
  border: 1px solid #bdc9c1;
  background: #ffffff;
}

.company-form button,
.category-price-form button {
  justify-self: start;
  padding: 0 14px;
  border: 0;
  color: #ffffff;
  background: #2f6f4e;
  font-weight: 700;
  cursor: pointer;
}

.company-table {
  min-width: 1160px;
}

.readiness-count {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  color: #1d5a3c;
  background: #e6f4eb;
  font-size: 12px;
  font-weight: 750;
}

.readiness-count.readiness-missing {
  color: #7b5b13;
  background: #fff1bf;
}

.company-table th:nth-child(1),
.company-table td:nth-child(1) {
  width: 92px;
}

.company-table th:nth-child(3),
.company-table td:nth-child(3) {
  width: 100px;
}

.company-table th:nth-child(4),
.company-table td:nth-child(4) {
  width: 190px;
}

.company-contacts-disclosure summary {
  width: fit-content;
  padding: 6px 10px;
  border: 1px solid #b8ccbf;
  border-radius: 8px;
  color: #1d5a3c;
  background: #f4f8f5;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  list-style-position: inside;
}

.company-contacts-disclosure summary:hover {
  border-color: #2f6f4e;
  background: #e7f2eb;
}

.company-contacts-disclosure[open] summary {
  margin-bottom: 9px;
  color: #ffffff;
  background: #2f6f4e;
}

.company-contact-list {
  display: grid;
  gap: 8px;
  min-width: 300px;
}

.new-contact-link {
  display: inline-flex;
  margin: 0 0 9px;
  color: #1d5a3c;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.new-contact-link:hover {
  text-decoration: underline;
}

.company-contact-card {
  padding: 9px 10px;
  border: 1px solid #dde6e0;
  border-radius: 8px;
  background: #fbfdfb;
}

.company-contact-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.company-contact-card div span {
  color: #50705e;
  font-size: 11px;
}

.company-contact-card p {
  margin: 5px 0 3px;
  font-weight: 700;
}

.company-contact-card small {
  display: block;
  margin-top: 2px;
  color: #68736d;
  line-height: 1.45;
}

.contact-edit-link {
  display: inline-flex;
  margin-top: 8px;
  padding: 5px 9px;
  border: 1px solid #b8ccbf;
  border-radius: 7px;
  color: #1d5a3c;
  background: #ffffff;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.contact-edit-link:hover {
  border-color: #2f6f4e;
  color: #ffffff;
  background: #2f6f4e;
}

.contact-admin-card {
  max-width: 1040px;
  margin-inline: auto;
}

.contact-admin-form {
  display: grid;
  gap: 18px;
  margin-top: 26px;
}

.contact-form-section {
  padding: 20px;
  border: 1px solid #d5e2da;
  border-radius: 12px;
  background: #f5faf7;
}

.contact-form-section h2 {
  margin-top: 0;
}

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

.contact-form-grid label {
  display: grid;
  gap: 7px;
  color: #506057;
  font-size: 13px;
  font-weight: 750;
}

.contact-form-grid input,
.contact-form-grid select {
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #bdc9c1;
  border-radius: 8px;
  background: #ffffff;
  font: inherit;
}

.contact-form-grid input:disabled {
  color: #68736d;
  background: #edf1ee;
}

.contact-form-grid small {
  color: #78837d;
  font-weight: 500;
}

.contact-active-option {
  margin-top: 16px;
}

.contact-audit-section {
  border-color: #e4d49b;
  background: #fffaf0;
}

.contact-audit-grid {
  grid-template-columns: minmax(180px, 0.7fr) minmax(280px, 1.3fr);
}

.contact-warning {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-left: 4px solid #c3922e;
  color: #6a5312;
  background: #fff4c8;
  line-height: 1.6;
}

.contact-save-button {
  justify-self: start;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 9px;
  color: #ffffff;
  background: #2f6f4e;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.contact-save-button:hover {
  background: #1d5a3c;
}

.contact-history {
  margin-top: 34px;
}

.contact-history-table {
  min-width: 760px;
}

.new-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(250px, 0.8fr);
  align-items: start;
  gap: 22px;
  margin-top: 26px;
}

.new-contact-layout .contact-admin-form {
  margin-top: 0;
}

.existing-contact-panel {
  padding: 18px;
  border: 1px solid #d9e3dc;
  border-radius: 12px;
  background: #fbfdfb;
}

.existing-contact-panel h2 {
  margin: 0 0 14px;
  font-size: 18px;
}

.existing-contact-panel .company-contact-list {
  min-width: 0;
}

.existing-contact-panel .table-note {
  margin-bottom: 0;
}

.company-pagination.product-pagination-top {
  margin: 12px 0 14px;
}

.company-profile-panel {
  margin: 26px 0 34px;
  padding: 20px;
  border: 1px solid #d5e2da;
  border-radius: 13px;
  background: #f5faf7;
}

.company-profile-form {
  display: grid;
  gap: 15px;
}

.company-profile-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.2fr 1.2fr;
  gap: 13px;
}

.company-profile-grid label,
.company-profile-audit label {
  display: grid;
  gap: 7px;
  color: #506057;
  font-size: 13px;
  font-weight: 750;
}

.company-profile-grid input,
.company-profile-grid textarea,
.company-profile-audit input {
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #bdc9c1;
  border-radius: 8px;
  background: #ffffff;
  font: inherit;
}

.company-profile-grid input:disabled {
  color: #68736d;
  background: #edf1ee;
}

.company-profile-grid small {
  color: #78837d;
  font-weight: 500;
}

.company-notes-field {
  grid-column: 1 / -1;
}

.company-profile-grid textarea {
  resize: vertical;
}

.company-active-option {
  width: fit-content;
}

.company-dependency-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.company-dependency-summary div {
  padding: 11px 13px;
  border-radius: 9px;
  background: #eaf3ed;
}

.company-dependency-summary dt {
  color: #68736d;
  font-size: 12px;
}

.company-dependency-summary dd {
  margin: 3px 0 0;
  color: #1d5a3c;
  font-size: 21px;
  font-weight: 800;
}

.company-profile-audit {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(280px, 1.3fr);
  gap: 13px;
}

.company-profile-form > button {
  justify-self: start;
  min-height: 43px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: #2f6f4e;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.company-profile-form > button:hover {
  background: #1d5a3c;
}

.company-history-disclosure {
  margin-top: 18px;
}

.company-history-disclosure summary {
  width: fit-content;
  color: #1d5a3c;
  font-weight: 750;
  cursor: pointer;
}

.company-history-disclosure[open] summary {
  margin-bottom: 12px;
}

.company-history-table {
  min-width: 650px;
}

.alias-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.danger-text-link {
  color: #9b3333;
}

.danger-text-link:hover {
  border-color: #b64a4a;
  color: #ffffff;
  background: #b64a4a;
}

.alias-transfer-card {
  max-width: 900px;
  margin-inline: auto;
}

.alias-transfer-summary {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1.2fr;
  gap: 12px;
  margin: 26px 0 18px;
}

.alias-transfer-summary div {
  padding: 14px;
  border: 1px solid #d9e3dc;
  border-radius: 10px;
  background: #fbfdfb;
}

.alias-transfer-summary dt {
  color: #68736d;
  font-size: 12px;
}

.alias-transfer-summary dd {
  margin: 6px 0 0;
  font-weight: 750;
}

.alias-transfer-form {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  padding: 20px;
  border: 1px solid #e4d49b;
  border-radius: 12px;
  background: #fffaf0;
}

.alias-transfer-form label {
  display: grid;
  gap: 7px;
  color: #506057;
  font-size: 13px;
  font-weight: 750;
}

.alias-transfer-form input,
.alias-transfer-form select {
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #c9c1a8;
  border-radius: 8px;
  background: #ffffff;
  font: inherit;
}

.alias-reason-field,
.alias-transfer-warning,
.alias-transfer-form button {
  grid-column: 1 / -1;
}

.alias-transfer-form button {
  justify-self: start;
  min-height: 43px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: #2f6f4e;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.alias-transfer-form button:hover {
  background: #1d5a3c;
}

.alias-transfer-history {
  margin-top: 30px;
}

.alias-unbind-form {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid #e2b8b8;
  border-radius: 12px;
  background: #fff7f7;
}

.alias-unbind-form label {
  display: grid;
  gap: 7px;
  color: #644f4f;
  font-size: 13px;
  font-weight: 750;
}

.alias-unbind-form input {
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #d0bcbc;
  border-radius: 8px;
  background: #ffffff;
  font: inherit;
}

.alias-unbind-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.alias-unbind-actions button {
  min-height: 42px;
  padding: 0 17px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: #a33c3c;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.alias-unbind-actions button:hover {
  background: #852f2f;
}

.alias-history-disclosure {
  margin-bottom: 32px;
}

.email-sample-card {
  max-width: 1000px;
  margin-inline: auto;
}

.email-sample-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin: 24px 0 14px;
  padding: 18px;
  border: 1px solid #d5e2da;
  border-radius: 12px;
  background: #f5faf7;
}

.email-sample-form label {
  display: grid;
  gap: 8px;
  color: #506057;
  font-size: 13px;
  font-weight: 750;
}

.email-sample-form input,
.email-sample-form button {
  min-height: 42px;
  border-radius: 8px;
  font: inherit;
}

.email-sample-form input {
  padding: 8px 10px;
  border: 1px solid #bdc9c1;
  background: #ffffff;
}

.email-sample-form button {
  padding: 0 18px;
  border: 0;
  color: #ffffff;
  background: #2f6f4e;
  font-weight: 750;
  cursor: pointer;
}

.email-sample-form button:hover {
  background: #1d5a3c;
}

.email-safety-note {
  padding: 12px 14px;
  border-left: 4px solid #3b7b59;
  color: #496056;
  background: #edf6f0;
  line-height: 1.6;
}

.email-preview {
  margin-top: 30px;
}

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

.email-header-grid div {
  min-width: 0;
  padding: 13px;
  border: 1px solid #d9e3dc;
  border-radius: 9px;
  background: #fbfdfb;
}

.email-header-grid dt {
  color: #68736d;
  font-size: 12px;
}

.email-header-grid dd {
  overflow-wrap: anywhere;
  margin: 5px 0 0;
  font-weight: 700;
}

.email-header-grid .email-wide-field {
  grid-column: span 3;
}

.email-structure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.email-structure-grid > section {
  padding: 17px;
  border: 1px solid #d9e3dc;
  border-radius: 11px;
  background: #ffffff;
}

.email-structure-grid h3 {
  margin-top: 0;
}

.email-structure-grid ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.email-structure-grid li {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 8px;
  background: #f4f8f5;
}

.email-structure-grid li span {
  color: #68736d;
  font-size: 12px;
}

.email-structure-grid li em {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  color: #715b19;
  background: #fff1bf;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.html-order-preview {
  margin-top: 1.2rem;
  padding: 1rem;
  border: 1px solid #bad5c5;
  border-radius: 14px;
  background: #f4faf6;
}

.html-order-preview__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.html-order-preview__heading h3,
.html-summary-lines h4,
.html-preview-tables h4 {
  margin: 0.2rem 0 0;
}

.html-order-preview__heading > span {
  flex: 0 0 auto;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  color: #285d43;
  background: #dcefe3;
  font-size: 0.8rem;
}

.html-order-numbers {
  padding: 0.65rem 0.75rem;
  border-left: 4px solid #2f7a55;
  background: #ffffff;
}

.html-summary-lines ul {
  margin: 0.45rem 0 1rem;
  padding-left: 1.3rem;
}

.html-summary-lines li {
  margin: 0.2rem 0;
}

.html-preview-tables section + section {
  margin-top: 1rem;
}

.html-preview-table-scroll {
  margin-top: 0.45rem;
  border: 1px solid #d4e2d8;
  border-radius: 10px;
  background: #ffffff;
}

.html-preview-table-scroll table {
  min-width: 640px;
}

.html-preview-table-scroll th,
.html-preview-table-scroll td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid #e5ede7;
  text-align: left;
  vertical-align: top;
  white-space: normal;
}

.email-body-preview {
  margin: 1.2rem 0;
  padding: 1rem;
  border: 1px solid #c7d7cc;
  border-radius: 14px;
  background: #f8faf8;
}

.email-body-preview__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.email-body-preview__heading h3 {
  margin: 0.2rem 0 0;
}

.email-body-preview__heading > span {
  flex: 0 0 auto;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  color: #715b19;
  background: #fff1bf;
  font-size: 0.78rem;
  font-weight: 700;
}

.email-body-part {
  padding: 0.9rem;
  border: 1px solid #dce6df;
  border-radius: 11px;
  background: #ffffff;
}

.email-body-part + .email-body-part {
  margin-top: 0.8rem;
}

.email-body-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.75rem;
  color: #607067;
  font-size: 0.84rem;
}

.email-body-candidates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0 0 0.8rem;
}

.email-body-candidates > div {
  min-width: 0;
  padding: 0.65rem;
  border-radius: 9px;
  background: #eef6f1;
}

.email-body-candidates dt {
  color: #607067;
  font-size: 0.75rem;
  font-weight: 700;
}

.email-body-candidates dd {
  margin: 0.25rem 0 0;
  overflow-wrap: anywhere;
  font-weight: 650;
}

.email-body-part details {
  border-top: 1px solid #e2e9e4;
  padding-top: 0.7rem;
}

.email-body-part summary {
  width: fit-content;
  color: #216443;
  cursor: pointer;
  font-weight: 750;
}

.email-body-part pre {
  margin: 0.7rem 0 0;
  padding: 0.8rem;
  border-radius: 9px;
  overflow-x: auto;
  color: #233229;
  background: #f4f6f4;
  font: inherit;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.email-attachment-grid {
  grid-template-columns: minmax(0, 1fr);
}

.email-master-match {
  margin: 1.2rem 0;
  padding: 1rem;
  border: 1px solid #bfd2c5;
  border-radius: 14px;
  background: #f5f9f6;
}

.email-master-match__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.email-master-match__heading h3 {
  margin: 0.2rem 0 0;
}

.email-master-match__heading > span {
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  color: #285d43;
  background: #dcefe3;
  font-size: 0.78rem;
  font-weight: 700;
}

.email-identity-match {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 0.8rem;
}

.email-identity-match > div {
  padding: 0.85rem;
  border-radius: 10px;
  background: #ffffff;
}

.email-identity-match h4,
.email-identity-match p {
  margin: 0 0 0.45rem;
}

.email-channel-status {
  width: fit-content;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
}

.email-channel-status--trusted {
  color: #205d3c;
  background: #dcefe3;
}

.email-channel-status--warning {
  color: #715b19;
  background: #fff1bf;
}

.email-company-result--matched {
  border-left: 4px solid #2f7a55;
}

.email-company-result--ambiguous,
.email-company-result--unmatched {
  border-left: 4px solid #c18b25;
}

.email-company-match-row {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.5rem 0;
  border-top: 1px solid #e3eae5;
}

.email-company-match-row span {
  color: #607067;
  font-size: 0.82rem;
}

.email-product-match-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.9rem 0 0.7rem;
}

.email-product-match-summary span {
  padding: 0.38rem 0.62rem;
  border-radius: 999px;
  background: #e7ece8;
  font-size: 0.82rem;
}

.email-product-match-summary .match-good {
  color: #205d3c;
  background: #dcefe3;
}

.email-product-match-summary .match-warning {
  color: #715b19;
  background: #fff1bf;
}

.email-price-preview {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: 0.8rem;
  margin: 0 0 0.8rem;
  padding: 0.9rem;
  border: 1px solid #d6e1d9;
  border-radius: 10px;
  background: #ffffff;
}

.email-price-preview h4,
.email-price-preview p {
  margin: 0.25rem 0 0;
}

.email-price-preview dl {
  display: grid;
  grid-template-columns: minmax(180px, 260px);
  gap: 0.55rem;
  margin: 0;
}

.email-price-preview dl > div {
  min-width: 0;
  padding: 0.65rem;
  border-radius: 9px;
  background: #eef6f1;
}

.email-price-preview dt {
  color: #607067;
  font-size: 0.75rem;
  font-weight: 700;
}

.email-price-preview dd {
  margin: 0.25rem 0 0;
  font-size: 1rem;
  font-weight: 800;
}

.email-price-preview > .email-safety-note {
  grid-column: 1 / -1;
  margin: 0;
}

.email-readiness {
  margin: 0 0 0.8rem;
  padding: 0.9rem;
  border: 1px solid #d5e0d8;
  border-left-width: 5px;
  border-radius: 10px;
  background: #ffffff;
}

.email-readiness--ready {
  border-left-color: #2f7a55;
}

.email-readiness--blocked {
  border-left-color: #b64b45;
}

.email-readiness__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.email-readiness__heading h4,
.email-readiness__heading p {
  margin: 0.25rem 0 0;
}

.email-readiness__heading > strong {
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
  color: #285d43;
  background: #eef6f1;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.email-readiness-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.8rem 0;
  padding: 0;
  list-style: none;
}

.email-readiness-checks li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  font-size: 0.85rem;
}

.email-readiness-checks li span {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  font-weight: 850;
}

.email-readiness-checks .passed {
  color: #205d3c;
  background: #e6f3ea;
}

.email-readiness-checks .passed span {
  color: #ffffff;
  background: #2f7a55;
}

.email-readiness-checks .failed {
  color: #7a2d28;
  background: #fceae8;
}

.email-readiness-checks .failed span {
  color: #ffffff;
  background: #b64b45;
}

.email-readiness-warnings {
  padding: 0.7rem;
  border-radius: 9px;
  color: #64521a;
  background: #fff7d9;
}

.email-readiness-warnings h5 {
  margin: 0 0 0.35rem;
}

.email-readiness-warnings ul {
  margin: 0;
  padding-left: 1.2rem;
}

.email-intake-confirm {
  display: grid;
  grid-template-columns: minmax(140px, 190px) minmax(280px, 1fr) auto;
  align-items: end;
  gap: 0.7rem;
  margin-top: 0.8rem;
  padding: 0.8rem;
  border: 1px solid #b9d4c2;
  border-radius: 9px;
  background: #f1f8f3;
}

.email-intake-confirm label {
  display: grid;
  gap: 0.3rem;
  font-weight: 700;
}

.email-intake-confirm .checkbox-label {
  display: flex;
  align-items: center;
  min-height: 2.7rem;
}

.email-intake-confirm > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #56685d;
  font-size: 0.82rem;
}

.order-source-note {
  margin: 0.9rem 0;
  padding: 0.8rem 0.9rem;
  border-left: 4px solid #cf9f32;
  border-radius: 8px;
  background: #fff8df;
}

.order-source-note p {
  margin: 0.35rem 0 0;
  white-space: pre-wrap;
}

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

.automation-policy-grid article {
  padding: 0.8rem;
  border: 1px solid #d4e2d8;
  border-radius: 9px;
  background: #f7faf8;
}

.automation-policy-grid strong {
  color: #245f42;
}

.automation-policy-grid p {
  margin: 0.35rem 0 0;
  color: #56685d;
  font-size: 0.86rem;
}

.outlook-connection-status {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr);
  gap: 0.85rem 1rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #c9d9cf;
  border-left: 5px solid #bc8730;
  border-radius: 11px;
  background: linear-gradient(135deg, #fffaf0 0%, #f4f8f5 100%);
}

.outlook-connection-status h2 {
  margin: 0.2rem 0 0.4rem;
  color: #6d4a12;
}

.outlook-connection-status p {
  margin: 0;
}

.outlook-connection-status dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
}

.outlook-connection-status dl > div {
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid rgb(195 211 201 / 80%);
  border-radius: 8px;
  background: rgb(255 255 255 / 72%);
}

.outlook-connection-status dt {
  color: #68776e;
  font-size: 0.75rem;
  font-weight: 750;
}

.outlook-connection-status dd {
  margin: 0.25rem 0 0;
  overflow-wrap: anywhere;
  font-weight: 750;
}

.outlook-connection-status > .email-safety-note {
  grid-column: 1 / -1;
}

.outlook-readiness-blockers {
  grid-column: 1 / -1;
  padding: 0.7rem 0.8rem;
  border: 1px solid #e4c987;
  border-radius: 8px;
  background: #fff7d9;
}

.outlook-readiness-blockers ul {
  margin: 0.35rem 0 0;
  padding-left: 1.2rem;
}

.outlook-registration-plan {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #cdded3;
  border-radius: 11px;
  background: #f5faf7;
}

.outlook-registration-plan .detail-heading {
  align-items: center;
}

.outlook-registration-plan h2 {
  margin: 0.2rem 0 0;
}

.outlook-registration-plan dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0.9rem 0;
}

.outlook-registration-plan dl > div {
  min-width: 0;
  padding: 0.7rem;
  border: 1px solid #d7e4dc;
  border-radius: 8px;
  background: #ffffff;
}

.outlook-registration-plan dt {
  color: #68776e;
  font-size: 0.75rem;
  font-weight: 750;
}

.outlook-registration-plan dd {
  margin: 0.25rem 0 0;
  font-weight: 750;
}

.outlook-registration-steps {
  margin: 0.8rem 0;
  padding-left: 1.35rem;
}

.outlook-registration-steps li + li {
  margin-top: 0.45rem;
}

.outlook-auth-start {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.15rem;
}

.outlook-auth-start span {
  color: #5f6f65;
  font-size: 0.85rem;
}

.outlook-manual-check {
  margin-top: 1rem;
  padding: 1.15rem;
  border: 1px solid #bfd6ca;
  border-radius: 14px;
  background: #f2f8f4;
}

.outlook-manual-check h2 {
  margin: 0.2rem 0 0.4rem;
}

.outlook-manual-check dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 1rem 0;
}

.outlook-manual-check dl > div {
  padding: 0.75rem;
  border-radius: 10px;
  background: #fff;
}

.outlook-manual-check dt {
  color: #5c6c64;
  font-size: 0.82rem;
}

.outlook-manual-check dd {
  margin: 0.25rem 0 0;
  font-weight: 700;
}

.outlook-automation-panel {
  margin-top: 1rem;
  padding: 1.15rem;
  border: 1px solid #b9cec1;
  border-radius: 14px;
  background: linear-gradient(135deg, #edf7f0 0%, #f8fbf9 100%);
  box-shadow: inset 4px 0 0 #2d7653;
}

.outlook-automation-panel h2 {
  margin: 0.2rem 0 0.4rem;
}

.outlook-automation-panel dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 1rem 0;
}

.outlook-automation-panel dl > div {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid #d7e5dc;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
}

.outlook-automation-panel dt {
  color: #5c6c64;
  font-size: 0.82rem;
}

.outlook-automation-panel dd {
  margin: 0.25rem 0 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.outlook-automation-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.outlook-automation-form label {
  display: grid;
  gap: 0.35rem;
  color: #405a4b;
  font-weight: 700;
}

.outlook-automation-form select {
  min-width: 10rem;
}

@media (max-width: 900px) {
  .outlook-automation-panel dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .outlook-automation-panel dl {
    grid-template-columns: 1fr;
  }
}

.deployment-workspace {
  display: grid;
  gap: 1rem;
}

.deployment-quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.deployment-quick-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  border: 1px solid #d3dfd7;
  border-radius: 10px;
  background: #fff;
  color: #24593f;
  font-weight: 700;
}

.deployment-workspace details {
  margin-top: 0.65rem;
}

.deployment-workspace summary {
  min-height: 44px;
  padding: 0.7rem;
  border-radius: 10px;
  background: #f2f7f4;
  color: #24593f;
  cursor: pointer;
  line-height: 1.5;
}

.deployment-workspace details[open] > summary {
  margin-bottom: 0.75rem;
}

.deployment-workspace section[id] {
  scroll-margin-top: 1rem;
}

.deployment-progress-card > div,
.deployment-check > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.deployment-workspace code {
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .deployment-workspace .deployment-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deployment-workspace .page-header-card h1 {
    font-size: 1.85rem;
    text-wrap: balance;
  }

  .deployment-workspace .deployment-progress-card,
  .deployment-workspace .deployment-check {
    flex-direction: column;
  }

  .deployment-quick-nav a {
    flex: 1 1 8rem;
    justify-content: center;
  }
}

.deployment-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.deployment-summary article {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid #d3dfd7;
  border-radius: 14px;
  background: #fff;
}

.deployment-summary span,
.deployment-summary small {
  color: #607268;
}

.deployment-summary strong {
  color: #174f35;
  font-size: 1.35rem;
}

.deployment-flow-card,
.deployment-checks,
.deployment-next-card {
  padding: 1.1rem;
  border: 1px solid #d3dfd7;
  border-radius: 16px;
  background: #fff;
}

.deployment-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0.65rem;
}

.deployment-flow article {
  padding: 0.9rem;
  border-radius: 13px;
  background: #f2f7f4;
}

.deployment-flow article span {
  display: block;
  margin-bottom: 0.45rem;
  color: #2b7551;
  font-size: 0.8rem;
  font-weight: 800;
}

.deployment-flow article p {
  margin-bottom: 0;
  color: #607268;
}

.deployment-flow > b {
  align-self: center;
  color: #79a58d;
  font-size: 1.2rem;
}

.deployment-check-group + .deployment-check-group {
  margin-top: 1.2rem;
}

.deployment-check-group h3 {
  margin-bottom: 0.65rem;
  color: #24593f;
}

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

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

.deployment-progress-card {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem;
  border: 1px solid #dbe5df;
  border-left: 5px solid #2f8b5c;
  border-radius: 12px;
  background: #fbfdfc;
}

.deployment-progress-card p {
  margin: 0.3rem 0 0;
  color: #607268;
  font-size: 0.9rem;
}

.deployment-progress-card > span {
  flex: 0 0 auto;
  align-self: flex-start;
  max-width: 11rem;
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
  color: #1e6843;
  background: #dff2e6;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.deployment-progress-card--configure {
  border-left-color: #d5a02c;
}

.deployment-progress-card--configure > span {
  color: #805b08;
  background: #fff0bf;
}

.deployment-progress-card--paused {
  border-left-color: #5278a5;
}

.deployment-progress-card--paused > span {
  color: #315a87;
  background: #e2edf8;
}

.deployment-progress-card--deferred {
  border-left-color: #88928c;
}

.deployment-progress-card--deferred > span {
  color: #53605a;
  background: #e8ecea;
}

.deployment-check {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem;
  border: 1px solid #dbe5df;
  border-left-width: 5px;
  border-radius: 12px;
}

.deployment-check p {
  margin: 0.3rem 0 0;
  color: #607268;
  font-size: 0.9rem;
}

.deployment-check > span {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.deployment-check--ready {
  border-left-color: #2f8b5c;
}

.deployment-check--ready > span {
  color: #1e6843;
  background: #dff2e6;
}

.deployment-check--pending {
  border-left-color: #d5a02c;
}

.deployment-check--pending > span {
  color: #805b08;
  background: #fff0bf;
}

.deployment-check--blocked {
  border-left-color: #b84c3e;
}

.deployment-check--blocked > span {
  color: #8d3026;
  background: #fde2dd;
}

.whatsapp-runbook {
  margin-top: 1rem;
}

.whatsapp-readiness-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1rem 0;
}

.whatsapp-readiness-overview > div {
  padding: 0.85rem 1rem;
  border: 1px solid #d3dfd7;
  border-radius: 13px;
  background: #f4f8f5;
}

.whatsapp-readiness-overview span,
.whatsapp-readiness-overview strong {
  display: block;
}

.whatsapp-readiness-overview span {
  margin-bottom: 0.25rem;
  color: #607268;
  font-size: 0.82rem;
}

.whatsapp-readiness-overview strong {
  color: #174f35;
  font-size: 1.08rem;
}

.whatsapp-readiness-jumps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.whatsapp-readiness-jumps a:not(.button) {
  padding: 0.45rem 0.65rem;
  border-radius: 999px;
  color: #315b44;
  background: #eaf3ed;
  font-size: 0.86rem;
  font-weight: 700;
}

.whatsapp-gate-details,
.whatsapp-contact-details {
  margin-top: 0.9rem;
}

.whatsapp-gate-details > summary,
.whatsapp-contact-details > summary {
  cursor: pointer;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  color: #24593f;
  background: #eef5f0;
  font-weight: 800;
}

.whatsapp-gate-details[open] > summary,
.whatsapp-contact-details[open] > summary {
  margin-bottom: 0.8rem;
}

.whatsapp-contact-readiness {
  margin-top: 1rem;
}

.whatsapp-plan-recommendation {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0.75rem;
  align-items: stretch;
  margin: 1rem 0;
}

.whatsapp-plan-recommendation > div {
  padding: 1rem;
  border: 1px solid #cfe0d5;
  border-radius: 14px;
  background: #f2f8f4;
}

.whatsapp-plan-recommendation span,
.whatsapp-plan-recommendation strong {
  display: block;
}

.whatsapp-plan-recommendation span {
  margin-bottom: 0.35rem;
  color: #2f7b55;
  font-size: 0.8rem;
  font-weight: 800;
}

.whatsapp-plan-recommendation strong {
  color: #174f35;
}

.whatsapp-plan-recommendation p {
  margin: 0.45rem 0 0;
  color: #607268;
  font-size: 0.9rem;
}

.whatsapp-plan-recommendation > b {
  align-self: center;
  color: #78a38b;
  font-size: 1.25rem;
}

.whatsapp-number-option-grid {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
}

.whatsapp-number-option {
  padding: 1.1rem;
  border: 1px solid #d7e2db;
  border-left: 6px solid #8baa97;
  border-radius: 16px;
  background: #fff;
}

.whatsapp-number-option--recommended {
  border-left-color: #2f8b5c;
}

.whatsapp-number-option--safe {
  border-left-color: #477eb1;
}

.whatsapp-number-option--risk {
  border-left-color: #c16a45;
  background: #fffaf7;
}

.whatsapp-number-option--target {
  border-left-color: #744ea0;
  background: #fcf9ff;
}

.whatsapp-number-option > header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.whatsapp-number-option header p,
.whatsapp-number-option h2 {
  margin: 0;
}

.whatsapp-number-option header p {
  color: #607268;
  font-size: 0.8rem;
  font-weight: 800;
}

.whatsapp-number-option header > span {
  align-self: flex-start;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  color: #24593f;
  background: #e3f2e8;
  font-size: 0.78rem;
  font-weight: 800;
}

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

.whatsapp-number-option-columns section {
  padding: 0.85rem;
  border-radius: 12px;
  background: #f5f8f6;
}

.whatsapp-number-option-columns h3 {
  margin: 0 0 0.45rem;
  color: #315b44;
  font-size: 0.95rem;
}

.whatsapp-number-option-columns ul,
.whatsapp-number-prerequisites {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding-left: 1.25rem;
}

.whatsapp-number-prerequisites {
  margin: 0.8rem 0 1rem;
}

.whatsapp-meta-field-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 0.9rem;
}

.whatsapp-meta-field {
  padding: 0.9rem;
  border: 1px solid #d7e2db;
  border-left: 5px solid #6e9c82;
  border-radius: 13px;
  background: #fff;
}

.whatsapp-meta-field.is-secret {
  border-left-color: #c16a45;
  background: #fffaf7;
}

.whatsapp-meta-field > header {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
}

.whatsapp-meta-field h3 {
  margin: 0;
  color: #24593f;
  font-size: 1rem;
}

.whatsapp-meta-field code {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.whatsapp-meta-field dl {
  display: grid;
  gap: 0.5rem;
  margin: 0.8rem 0 0;
}

.whatsapp-meta-field dl > div {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.5rem;
}

.whatsapp-meta-field dt {
  color: #607268;
  font-size: 0.82rem;
  font-weight: 800;
}

.whatsapp-meta-field dd {
  margin: 0;
  font-size: 0.88rem;
}

.whatsapp-meta-sequence {
  padding-left: 0;
  list-style: none;
}

.whatsapp-meta-sequence li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
}

.whatsapp-meta-sequence li > span {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #315b44;
  font-size: 0.8rem;
  font-weight: 800;
}

.whatsapp-meta-sequence p {
  margin: 0.2rem 0 0;
}

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

.whatsapp-continuity-card {
  padding: 1rem;
  border: 1px solid #d9e2dc;
  border-left: 4px solid #c96a3a;
  border-radius: 14px;
  background: #fffaf6;
}

.whatsapp-continuity-card h3 {
  margin: 0 0 0.75rem;
}

.whatsapp-continuity-card dl {
  display: grid;
  gap: 0.65rem;
  margin: 0;
}

.whatsapp-continuity-card dl > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.6rem;
}

.whatsapp-continuity-card dt {
  color: #607268;
  font-weight: 800;
}

.whatsapp-continuity-card dd {
  margin: 0;
}

.whatsapp-runbook-list {
  display: grid;
  gap: 0.8rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.whatsapp-runbook-list > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
}

.whatsapp-runbook-list h3 {
  margin: 0;
  color: #24593f;
  font-size: 1rem;
}

.whatsapp-runbook-number {
  display: grid !important;
  width: 2rem;
  height: 2rem;
  padding: 0 !important;
  place-items: center;
  color: #fff !important;
  background: #315b44 !important;
}

.whatsapp-runbook-fallback {
  color: #8d3026 !important;
}

.deployment-next-card ol {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 0;
  padding-left: 1.35rem;
}

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

  .whatsapp-runbook-list > li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .whatsapp-runbook-list > li > span:last-child {
    grid-column: 2;
    justify-self: start;
  }

  .deployment-flow > b {
    justify-self: center;
    transform: rotate(90deg);
  }

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

  .whatsapp-plan-recommendation > b {
    justify-self: center;
    transform: rotate(90deg);
  }
}

@media (max-width: 700px) {
  .deployment-summary,
  .deployment-check-grid,
  .deployment-progress-grid,
  .whatsapp-readiness-overview {
    grid-template-columns: 1fr;
  }

  .whatsapp-readiness-jumps .button {
    width: 100%;
    text-align: center;
  }

  .whatsapp-number-option-columns {
    grid-template-columns: 1fr;
  }

  .whatsapp-meta-field-list {
    grid-template-columns: 1fr;
  }

  .whatsapp-meta-field dl > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .whatsapp-continuity-grid {
    grid-template-columns: 1fr;
  }

  .whatsapp-continuity-card dl > div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

/* Preparation pages: show decisions first; reveal reference material on demand. */
.preparation-workspace .workspace-card {
  padding: clamp(1rem, 3vw, 2rem);
  line-height: 1.65;
}

.preparation-workspace h1 {
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.25;
  text-wrap: balance;
}

.preparation-workspace :is(h1, h2, h3, p, dd, code),
.deployment-workspace :is(h1, h2, h3, p, code, .deployment-summary strong) {
  overflow-wrap: anywhere;
}

.preparation-workspace :is(section[id], div[id]) {
  scroll-margin-top: 1rem;
}

.preparation-workspace .deployment-checks + .deployment-checks,
.preparation-workspace .deployment-quick-nav {
  margin-top: 1rem;
}

.preparation-workspace .section-heading,
.preparation-workspace .whatsapp-meta-field > header,
.preparation-workspace .whatsapp-number-option > header {
  flex-wrap: wrap;
  align-items: flex-start;
}

.preparation-workspace .section-heading > div,
.preparation-workspace .whatsapp-meta-field > header > div,
.preparation-workspace .whatsapp-number-option > header > div {
  flex: 1 1 13rem;
  min-width: 0;
}

.preparation-workspace .whatsapp-meta-field > header > span,
.preparation-workspace .whatsapp-number-option > header > span {
  flex: 0 0 auto;
  max-width: 100%;
}

.preparation-workspace .whatsapp-meta-field-list {
  align-items: start;
}

.preparation-details {
  margin-top: 0.65rem;
}

.preparation-details > summary {
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: #eef5f0;
  color: #24593f;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.preparation-details[open] > summary {
  margin-bottom: 0.75rem;
}

.preparation-workspace :is(a, summary):focus-visible,
.deployment-workspace :is(a, summary):focus-visible {
  outline: 3px solid #24593f;
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .preparation-workspace .deployment-quick-nav a,
  .preparation-workspace .button {
    min-height: 44px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .preparation-workspace .whatsapp-number-option-columns {
    gap: 0.65rem;
  }
}

.account-session-bar,
.account-setup-banner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  min-height: 42px;
  padding: 0.45rem max(1rem, calc((100vw - 1180px) / 2));
  color: #edf8f1;
  background: #174f35;
  font-size: 0.9rem;
}

.account-session-bar form {
  margin: 0;
}

.account-session-bar .button-link,
.account-setup-banner a {
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.account-setup-banner {
  justify-content: center;
  color: #634906;
  background: #fff0bd;
}

.account-setup-banner a {
  color: #634906;
}

.auth-page-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 1.25rem;
}

.auth-card {
  width: min(100%, 520px);
  padding: clamp(1.25rem, 4vw, 2.4rem);
  border: 1px solid #cadbd1;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 55px rgb(29 73 50 / 10%);
}

.auth-card-login {
  width: min(100%, 440px);
}

.auth-card h1 {
  margin-top: 0.25rem;
}

.auth-form {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.1rem;
}

.auth-form label {
  display: grid;
  gap: 0.35rem;
  color: #24593f;
  font-weight: 750;
}

.account-workspace,
.role-home-shell {
  display: grid;
  gap: 1rem;
}

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

.account-role-grid article {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid #d3dfd7;
  border-radius: 14px;
  background: #f6faf7;
}

.account-role-grid span,
.account-role-grid small {
  color: #607268;
}

.account-role-grid strong {
  color: #174f35;
  font-size: 1.5rem;
}

.account-main-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  gap: 1rem;
  align-items: start;
}

.account-create-card,
.account-list,
.role-primary-card {
  padding: 1.1rem;
  border: 1px solid #d3dfd7;
  border-radius: 16px;
  background: #fff;
}

.account-list {
  display: grid;
  gap: 0.7rem;
}

.account-item {
  border: 1px solid #dbe5df;
  border-radius: 12px;
}

.account-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem;
  cursor: pointer;
}

.account-item > summary > span:first-child {
  display: grid;
  gap: 0.2rem;
}

.account-item > summary small {
  color: #607268;
}

.account-item-actions {
  display: grid;
  gap: 0.8rem;
  padding: 0 0.85rem 0.85rem;
}

.account-password-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.65rem;
  align-items: end;
}

.account-password-form label {
  display: grid;
  gap: 0.3rem;
  color: #24593f;
  font-size: 0.85rem;
  font-weight: 700;
}

.account-role-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin: 0;
  padding: 0.8rem;
  border: 1px solid #cfddd4;
  border-radius: 11px;
  background: #f7faf8;
}

.account-role-picker legend {
  padding: 0 0.35rem;
  color: #24593f;
  font-size: 0.86rem;
  font-weight: 800;
}

.account-role-picker label {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 0.35rem;
  color: #243c30;
  font-weight: 650;
}

.account-role-edit-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: end;
}

.account-role-edit-form .account-role-picker {
  flex: 1 1 420px;
}

.role-welcome-card {
  min-height: auto;
}

.role-next-card,
.role-work-section {
  padding: clamp(1.1rem, 3vw, 1.7rem);
  border: 1px solid #c7dbcf;
  border-radius: 18px;
  background: #fff;
}

.role-next-card {
  max-width: 820px;
  background: linear-gradient(135deg, #f8fcf9 0%, #e8f5ec 100%);
  box-shadow: 0 14px 34px rgb(32 89 58 / 9%);
}

.role-next-card h2 {
  margin: 0.2rem 0 0.55rem;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.2;
  text-wrap: balance;
}

.role-next-card p:not(.eyebrow) {
  max-width: 68ch;
  color: #53675c;
}

.role-next-button {
  min-height: 48px;
  margin-top: 0.3rem;
  padding-inline: 1.25rem;
  font-size: 1.02rem;
}

.role-section-heading h2 {
  margin: 0.15rem 0 0.8rem;
  font-size: 1.25rem;
}

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

.role-work-grid article {
  display: grid;
  min-width: 0;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid #d8e4dc;
  border-radius: 14px;
  background: #f8fbf9;
}

.role-work-grid span,
.role-work-grid small {
  color: #607268;
}

.role-work-grid strong {
  color: #174f35;
  font-size: 1.25rem;
}

.role-work-grid a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #1d5a3c;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.role-home-shell :is(a, button):focus-visible {
  outline: 3px solid #24593f;
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .account-role-grid,
  .account-main-grid,
  .account-password-form,
  .role-work-grid {
    grid-template-columns: 1fr;
  }

  .account-session-bar {
    justify-content: space-between;
  }

  .role-next-button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

.family-review-shell {
  display: grid;
  gap: 1rem;
  color: #18382a;
  font-size: 1.04rem;
}

.family-review-shell.is-enlarged {
  font-size: 1.28rem;
}

.family-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid #bdd8c8;
  border-radius: 22px;
  background: linear-gradient(135deg, #f7fcf8 0%, #e7f5ec 100%);
  box-shadow: 0 16px 42px rgb(32 89 58 / 10%);
}

.family-review-header.compact h1,
.family-review-header h1 {
  margin: 0.2rem 0 0.45rem;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.08;
}

.family-review-header p:last-child {
  margin: 0;
  color: #4c6859;
  font-size: 1.08em;
}

.family-zoom-button,
.family-open-button,
.family-back-button,
.family-home-button {
  min-height: 54px;
  padding: 0.8rem 1.25rem;
  border: 0;
  border-radius: 15px;
  background: #246d49;
  color: #fff;
  font-size: 1.03em;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 8px 18px rgb(29 91 59 / 18%);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.family-zoom-button:hover,
.family-open-button:hover,
.family-back-button:hover,
.family-home-button:hover {
  transform: translateY(-2px);
  background: #195b3a;
  box-shadow: 0 12px 24px rgb(29 91 59 / 24%);
}

.family-zoom-button:focus-visible,
.family-open-button:focus-visible,
.family-image-button:focus-visible {
  outline: 4px solid #f0b940;
  outline-offset: 3px;
}

.family-safety-banner {
  display: flex;
  align-items: center;
  gap: 0.7rem 1rem;
  padding: 1rem 1.2rem;
  border: 2px solid #acd2ba;
  border-radius: 16px;
  background: #eef9f2;
}

.family-safety-banner strong {
  color: #145b36;
  font-size: 1.12em;
}

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

.family-review-counts article {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.2rem;
  border: 1px solid #d3dfd7;
  border-radius: 16px;
  background: #fff;
}

.family-review-counts strong {
  font-size: 2rem;
  color: #174f35;
}

.family-review-counts .needs-attention { border-color: #e3bd70; background: #fff9eb; }
.family-review-counts .is-ready { border-color: #acd2ba; background: #eef9f2; }

.family-order-list,
.family-line-list,
.family-message-list {
  display: grid;
  gap: 0.85rem;
}

.family-order-card {
  padding: 1.1rem;
  border: 2px solid #d6e2da;
  border-left-width: 8px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 9px 24px rgb(29 73 50 / 7%);
}

.family-order-card.status-attention { border-left-color: #d39a2b; }
.family-order-card.status-ready { border-left-color: #2c8b59; }
.family-order-card.status-collecting { border-left-color: #5784b8; }

.family-order-card-topline,
.family-order-card-body,
.family-message-meta,
.family-whatsapp-line > header,
.family-whatsapp-line-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.family-order-card-body { margin-top: 0.85rem; }
.family-order-card h2 { margin: 0 0 0.3rem; font-size: 1.55em; }
.family-order-card p { margin: 0.25rem 0; }
.family-order-card small { color: #607268; }

.family-source-badge,
.family-review-status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: #eaf2ed;
  color: #24593f;
  font-weight: 850;
}

.family-source-badge.source-whatsapp { background: #dcf6e5; color: #116032; }
.family-source-badge.source-email { background: #e9f1fb; color: #285b8e; }

.family-open-button { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; }
.family-open-button.is-ready { background: #317454; }
.family-back-button { justify-self: start; display: inline-flex; align-items: center; }

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

.family-detail-summary article {
  display: grid;
  gap: 0.3rem;
  padding: 1rem;
  border: 1px solid #d6e2da;
  border-radius: 15px;
  background: #fff;
}

.family-detail-summary span { color: #607268; }
.family-detail-summary strong { font-size: 1.15em; }

.family-warning-panel,
.family-evidence-panel {
  padding: 1.1rem;
  border: 2px solid #e6c47f;
  border-radius: 18px;
  background: #fffaf0;
}

.family-evidence-panel { border-color: #c9ddd0; background: #f9fcfa; }
.family-section-heading h2 { margin: 0.15rem 0 0.85rem; font-size: 1.7em; }

.family-line-card,
.family-whatsapp-line,
.family-message-card {
  padding: 1rem;
  border: 2px solid #d6e2da;
  border-radius: 16px;
  background: #fff;
}

.family-line-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.family-line-card.needs-attention,
.family-whatsapp-line.needs-attention { border-color: #dcad50; background: #fffaf0; }
.family-line-card.is-complete,
.family-whatsapp-line.is-complete { border-color: #a9d1b7; }
.family-line-number { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #e9f3ed; font-weight: 900; }
.family-line-card h3,
.family-whatsapp-line h3 { margin: 0 0 0.25rem; font-size: 1.3em; }
.family-line-card p,
.family-whatsapp-line p { margin: 0; }
.family-quantity { display: grid; gap: 0.15rem; min-width: 90px; text-align: center; }
.family-quantity span { color: #607268; }
.family-quantity strong { font-size: 1.55em; color: #174f35; }

.family-message-card p { font-size: 1.12em; line-height: 1.6; }
.family-message-meta time { color: #607268; font-size: 0.85em; }
.family-message-card audio { width: min(100%, 520px); margin-top: 0.8rem; }

.family-image-button {
  display: grid;
  gap: 0.4rem;
  width: fit-content;
  margin-top: 0.7rem;
  padding: 0.5rem;
  border: 2px solid #b7d2c2;
  border-radius: 14px;
  background: #f4faf6;
  color: #24593f;
  font: inherit;
  font-weight: 800;
  cursor: zoom-in;
}

.family-image-button img { width: min(100%, 300px); max-height: 300px; object-fit: contain; border-radius: 10px; }
.family-image-button.compact { margin: 0; padding: 0.25rem; }
.family-image-button.compact img { width: 110px; height: 110px; object-fit: cover; }

.family-candidate-preview { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #d7e2da; }
.family-candidate-preview > div { display: flex; gap: 0.7rem; overflow-x: auto; padding: 0.7rem 0; }
.family-candidate-preview article { flex: 0 0 145px; display: grid; gap: 0.3rem; align-content: start; }
.family-candidate-preview article > small { color: #607268; }

.family-candidate-choice {
  padding: 0.55rem;
  border: 2px solid #d5e2da;
  border-radius: 14px;
  background: #fff;
}

.family-candidate-choice:has(input:checked) {
  border-color: #278055;
  background: #eaf7ef;
  box-shadow: 0 0 0 3px rgb(39 128 85 / 14%);
}

.family-candidate-choice label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.45rem;
  align-items: center;
  cursor: pointer;
}

.family-candidate-choice input { width: 22px; height: 22px; }
.family-candidate-choice small { grid-column: 2; color: #607268; }

.family-confirm-check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.75rem 0;
  padding: 0.8rem;
  border-radius: 12px;
  background: #f0f7f3;
  font-weight: 800;
}

.family-confirm-check input { width: 24px; height: 24px; flex: 0 0 auto; }

.family-decision-button {
  min-height: 56px;
  padding: 0.85rem 1.25rem;
  border: 0;
  border-radius: 14px;
  background: #287a50;
  color: #fff;
  font: inherit;
  font-size: 1.08em;
  font-weight: 900;
  cursor: pointer;
}

.family-decision-button:hover { background: #1c633f; }

.family-skip-panel {
  margin-top: 1rem;
  padding: 0.85rem;
  border: 1px solid #d7e2da;
  border-radius: 13px;
  background: #f8faf9;
}

.family-skip-panel summary { color: #395747; font-weight: 850; cursor: pointer; }
.family-skip-panel form { margin-top: 0.75rem; }

.family-image-dialog {
  width: min(94vw, 1100px);
  max-height: 92vh;
  padding: 1rem;
  border: 0;
  border-radius: 18px;
  background: #101a14;
}

.family-image-dialog::backdrop { background: rgb(6 15 10 / 82%); }
.family-image-dialog img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; object-fit: contain; }
.family-image-dialog button { margin-bottom: 0.7rem; padding: 0.7rem 1rem; border: 0; border-radius: 12px; font-weight: 850; cursor: pointer; }

.family-empty-state {
  display: grid;
  gap: 0.4rem;
  padding: 2rem;
  border: 2px dashed #bdd0c3;
  border-radius: 18px;
  background: #f8fbf9;
  text-align: center;
}

.family-home-card { border-width: 2px; border-color: #abd1b8; background: linear-gradient(135deg, #fff, #ecf8f0); }

@media (max-width: 720px) {
  .family-review-header,
  .family-order-card-body,
  .family-whatsapp-line-main,
  .family-safety-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .family-review-counts,
  .family-detail-summary { grid-template-columns: 1fr; }
  .family-open-button,
  .family-zoom-button { width: 100%; }
  .family-line-card { grid-template-columns: auto minmax(0, 1fr); }
  .family-line-card .family-quantity { grid-column: 1 / -1; padding-top: 0.7rem; border-top: 1px solid #d7e2da; }
}

.email-draft-list {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}

.email-draft-card {
  border: 1px solid #cbd9d1;
  border-radius: 12px;
  background: #fff;
}

.email-draft-card--test {
  border-color: #eadba5;
  background: #fffdf7;
}

.email-draft-card--test:not([open]) > summary {
  color: #5e5540;
}

.email-draft-card > summary {
  display: grid;
  grid-template-columns: auto minmax(9rem, 1fr) minmax(8rem, 1fr) auto auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.9rem 1rem;
  cursor: pointer;
}

.email-draft-body {
  padding: 0 1rem 1rem;
  border-top: 1px solid #e0e8e3;
}

.email-draft-review-form {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.email-draft-review-form .form-section,
.email-draft-convert-form {
  padding: 1rem;
  border: 1px solid #d6e1db;
  border-radius: 12px;
  background: #f7faf8;
}

.email-scan-run-list {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.email-scan-run {
  overflow: hidden;
  border: 1px solid #cfddd4;
  border-radius: 14px;
  background: #fff;
}

.email-scan-run > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  padding: 0.9rem 1rem;
  cursor: pointer;
  background: #f4f8f5;
}

.email-scan-run-body {
  padding: 1rem;
}

.email-scan-counts {
  grid-template-columns: repeat(6, minmax(110px, 1fr));
}

.email-scan-status--failed,
.email-scan-outcome--failed {
  color: #8f2f24;
  background: #fbe2de;
}

.email-scan-outcome--skipped,
.email-scan-outcome--already_processed {
  color: #6a5417;
  background: #fff0bd;
}

.email-scan-outcome--created,
.email-scan-outcome--duplicate,
.email-scan-status--completed {
  color: #17603b;
  background: #dff2e6;
}

.email-recheck-blocked,
.email-recheck-confirm-form {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #e3c7aa;
  border-radius: 14px;
  background: #fff8ed;
}

.email-recheck-blocked h2 {
  margin-top: 0;
}

.email-recheck-confirm-form {
  display: grid;
  gap: 0.85rem;
  border-color: #bfd5c7;
  background: #f2f8f4;
}

.email-recheck-confirm-form select {
  display: block;
  width: min(320px, 100%);
  margin-top: 0.35rem;
}

@media (max-width: 900px) {
  .email-scan-counts {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

.email-draft-review-form h2,
.email-draft-convert-form h2 {
  margin-top: 0;
}

.email-draft-review-form input[type="number"] {
  min-width: 6rem;
}

.email-draft-convert-form {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.2rem;
  border-color: #e5c873;
  background: #fffaf0;
}

.outlook-device-flow {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #bdd7c5;
  border-radius: 11px;
  background: #eff8f2;
}

.outlook-device-flow h2 {
  margin: 0.2rem 0 0.6rem;
}

.outlook-device-flow--failed {
  border-color: #e1c6c2;
  background: #fdf2f0;
}

.outlook-device-code {
  display: inline-block;
  margin: 0.2rem 0.65rem 0.8rem 0;
  padding: 0.65rem 1rem;
  border: 2px dashed #2f7a55;
  border-radius: 9px;
  background: #ffffff;
  color: #183f2d;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  font-weight: 850;
  letter-spacing: 0.12em;
}

.outlook-device-flow dl {
  margin: 0.7rem 0 0;
}

.outlook-device-flow dt {
  color: #68776e;
  font-size: 0.75rem;
  font-weight: 750;
}

.outlook-device-flow dd {
  margin: 0.2rem 0 0;
  font-weight: 750;
}

.email-policy-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 1rem 0;
}

.email-policy-facts > div {
  padding: 0.75rem;
  border: 1px solid #d7e2da;
  border-radius: 9px;
  background: #f7faf8;
}

.email-policy-facts dt {
  color: #68776e;
  font-size: 0.76rem;
  font-weight: 750;
}

.email-policy-facts dd {
  margin: 0.28rem 0 0;
  font-weight: 750;
}

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

.email-boundary {
  padding: 0.9rem;
  border-radius: 10px;
}

.email-boundary h2 {
  margin: 0;
}

.email-boundary ul {
  margin: 0.65rem 0 0;
  padding-left: 1.2rem;
}

.email-boundary li + li {
  margin-top: 0.4rem;
}

.email-boundary--allowed {
  border: 1px solid #bcd9c5;
  background: #eef8f1;
}

.email-boundary--forbidden {
  border: 1px solid #e1c6c2;
  background: #fdf2f0;
}

.email-activation-plan {
  padding: 0.9rem;
  border: 1px solid #d4e2d8;
  border-radius: 10px;
  background: #ffffff;
}

.email-activation-plan ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: email-step;
}

.email-activation-plan li {
  padding: 0.75rem;
  border-radius: 9px;
  background: #f1f6f3;
  counter-increment: email-step;
}

.email-activation-plan li::before {
  content: counter(email-step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.35rem;
  color: #2f7a55;
  font-weight: 850;
}

.email-activation-plan p {
  margin: 0.35rem 0 0;
  color: #5d6c63;
  font-size: 0.86rem;
}

.email-product-match-table {
  border: 1px solid #d4e2d8;
  border-radius: 10px;
  background: #ffffff;
}

.email-product-match-table table {
  min-width: 760px;
}

.email-product-match-table th,
.email-product-match-table td {
  padding: 0.58rem 0.65rem;
  border-bottom: 1px solid #e4ebe6;
  text-align: left;
  vertical-align: top;
}

.email-product-match-table td small {
  display: block;
  margin-top: 0.2rem;
  color: #69776f;
}

.match-row-warning {
  background: #fffaf0;
}

.status-pill-warning {
  color: #715b19;
  background: #fff1bf;
}

@media (max-width: 760px) {
  .email-body-preview__heading,
  .email-body-meta {
    display: block;
  }

  .email-body-preview__heading > span {
    display: inline-block;
    margin-top: 0.55rem;
  }

  .email-body-candidates {
    grid-template-columns: minmax(0, 1fr);
  }

  .email-master-match__heading {
    display: block;
  }

  .email-master-match__heading > span {
    display: inline-block;
    margin-top: 0.55rem;
  }

  .email-identity-match {
    grid-template-columns: minmax(0, 1fr);
  }

  .email-price-preview,
  .email-price-preview dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .email-readiness__heading {
    display: block;
  }

  .email-readiness__heading > strong {
    display: inline-block;
    margin-top: 0.55rem;
  }

  .email-readiness-checks {
    grid-template-columns: minmax(0, 1fr);
  }

  .email-intake-confirm {
    grid-template-columns: minmax(0, 1fr);
  }

  .automation-policy-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .outlook-connection-status,
  .outlook-connection-status dl,
  .outlook-registration-plan dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .outlook-registration-plan .detail-heading {
    display: block;
  }

  .outlook-registration-plan .button-link {
    display: inline-block;
    margin-top: 0.7rem;
  }

  .outlook-auth-start {
    align-items: stretch;
    flex-direction: column;
  }

  .email-policy-facts,
  .email-boundary-grid,
  .email-activation-plan ol {
    grid-template-columns: minmax(0, 1fr);
  }
}

.backup-workspace {
  display: grid;
  gap: 1rem;
}

.backup-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.backup-health-grid article {
  display: grid;
  gap: 0.28rem;
  padding: 1rem;
  border: 1px solid #cbdcd2;
  border-radius: 14px;
  background: #f4f9f6;
}

.backup-health-grid span,
.backup-health-grid small {
  color: #607268;
}

.backup-health-grid strong {
  color: #174f35;
  font-size: 1.45rem;
}

.backup-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 1rem;
}

.backup-automatic-card {
  grid-column: 1 / -1;
  border-color: #a9cdb8;
  background: #f4faf6;
}

.backup-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.backup-auto-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}

.backup-auto-status > div {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
  border-radius: 11px;
  background: #fff;
}

.backup-auto-status dt {
  color: #607268;
  font-size: 0.82rem;
}

.backup-auto-status dd {
  margin: 0;
  color: #174f35;
  font-weight: 800;
}

.backup-action-card,
.backup-count-card {
  padding: 1.1rem;
  border: 1px solid #d4e0d8;
  border-radius: 16px;
  background: #fff;
}

.backup-action-card h2,
.backup-count-card h2 {
  margin-top: 0.25rem;
}

.backup-form {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
}

.backup-count-card dl,
.backup-history-item dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.backup-count-card dl div,
.backup-history-item dl div {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem;
  border-radius: 11px;
  background: #f2f7f4;
}

.backup-count-card dt,
.backup-history-item dt {
  color: #607268;
  font-size: 0.82rem;
}

.backup-count-card dd,
.backup-history-item dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.backup-count-card dd {
  color: #174f35;
  font-size: 1.35rem;
  font-weight: 800;
}

.backup-history {
  border: 1px solid #d8e2dc;
  border-radius: 14px;
  background: #fff;
}

.backup-history > summary {
  padding: 0.95rem 1rem;
  color: #24593f;
  font-weight: 800;
  cursor: pointer;
}

.backup-history-list {
  display: grid;
  gap: 0.65rem;
  padding: 0 1rem 1rem;
}

.backup-history-item {
  border: 1px solid #dde6e1;
  border-radius: 12px;
}

.backup-history-item > summary {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto;
  gap: 0.8rem;
  padding: 0.8rem;
  cursor: pointer;
}

.backup-history-item > dl {
  margin: 0 0.8rem 0.8rem;
}

@media (max-width: 800px) {
  .backup-health-grid,
  .backup-main-grid {
    grid-template-columns: 1fr 1fr;
  }

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

@media (max-width: 560px) {
  .backup-health-grid,
  .backup-main-grid,
  .backup-count-card dl,
  .backup-history-item dl,
  .backup-auto-status {
    grid-template-columns: 1fr;
  }

  .backup-history-item > summary {
    grid-template-columns: 1fr;
  }
}

.category-price-form {
  display: grid;
  grid-template-columns: 1.6fr 1fr auto;
  align-items: end;
  gap: 12px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #d9e3dc;
  border-radius: 11px;
  background: #f8fbf9;
}

.company-alias-form {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.4fr;
  align-items: end;
  gap: 12px;
  margin: 18px 0 30px;
  padding: 16px;
  border: 1px solid #d9e3dc;
  border-radius: 11px;
  background: #f8fbf9;
}

.company-alias-form label {
  display: grid;
  gap: 6px;
  color: #5f6b64;
  font-size: 13px;
  font-weight: 700;
}

.company-alias-form input,
.company-alias-form select,
.company-alias-form button {
  min-height: 42px;
  border-radius: 8px;
  font: inherit;
}

.company-alias-form input,
.company-alias-form select {
  padding: 0 10px;
  border: 1px solid #bdc9c1;
  background: #ffffff;
}

.company-alias-form button {
  justify-self: start;
  padding: 0 14px;
  border: 0;
  color: #ffffff;
  background: #2f6f4e;
  font-weight: 700;
  cursor: pointer;
}

.company-alias-table {
  min-width: 700px;
}

.category-price-table {
  min-width: 600px;
}

.category-price-table .link-button {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.price-rule-note {
  margin-top: 20px;
}

.sku-price-section {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid #d9e3dc;
}

.company-match {
  margin: 4px 0 0;
  color: #2f6f4e;
  font-size: 13px;
  font-weight: 700;
}

.company-assignment-panel {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid #d9e3dc;
  border-radius: 12px;
  background: #f8fbf9;
}

.company-assignment-form {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 2fr auto;
  align-items: end;
  gap: 12px;
}

.company-assignment-form label {
  display: grid;
  gap: 6px;
  color: #5f6b64;
  font-size: 13px;
  font-weight: 700;
}

.company-assignment-form select,
.company-assignment-form button {
  min-height: 42px;
  border-radius: 8px;
  font: inherit;
}

.company-assignment-form select {
  padding: 0 10px;
  border: 1px solid #bdc9c1;
  background: #ffffff;
}

.company-assignment-form button {
  padding: 0 14px;
  border: 0;
  color: #ffffff;
  background: #2f6f4e;
  font-weight: 700;
  cursor: pointer;
}

.company-assignment-form .checkbox-label {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
}

.item-match-form {
  display: grid;
  gap: 6px;
  min-width: 180px;
  margin-top: 8px;
}

.item-match-form input,
.item-match-form select,
.item-match-form button {
  min-height: 34px;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
}

.item-match-form input,
.item-match-form select {
  padding: 0 8px;
  border: 1px solid #bdc9c1;
  background: #ffffff;
}

.item-match-form button {
  border: 0;
  color: #ffffff;
  background: #2f6f4e;
  font-weight: 700;
  cursor: pointer;
}

.secondary-button {
  color: #1d5a3c;
}

.secondary-danger-button {
  color: #8d3030;
  border-color: #dbb6b6;
}

.category-form {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 0.7fr 0.7fr;
  gap: 12px;
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid #d9e3dc;
  border-radius: 11px;
  background: #f8fbf9;
}

.category-form label {
  display: grid;
  gap: 6px;
  color: #5f6b64;
  font-size: 13px;
  font-weight: 700;
}

.category-form input,
.category-form select,
.category-form button {
  min-height: 42px;
  border-radius: 8px;
  font: inherit;
}

.category-form input,
.category-form select {
  padding: 0 10px;
  border: 1px solid #bdc9c1;
  background: #ffffff;
}

.category-form .checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-form .checkbox-label input {
  min-height: auto;
}

.category-form button {
  border: 0;
  color: #ffffff;
  background: #2f6f4e;
  font-weight: 700;
  cursor: pointer;
}

.category-table {
  min-width: 980px;
}

.category-edit-panel {
  margin-top: 8px;
}

.category-edit-panel summary {
  color: #2f6f4e;
  font-weight: 700;
  cursor: pointer;
}

.category-edit-panel form {
  display: grid;
  min-width: 220px;
  gap: 7px;
  margin-top: 8px;
}

.category-edit-panel input,
.category-edit-panel select {
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid #bdc9c1;
  border-radius: 8px;
  font: inherit;
}

.category-status-form {
  margin-top: 8px;
}

.line-result {
  display: block;
  width: fit-content;
  margin-top: 6px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.result-complete {
  color: #1d5a3c;
  background: #e6f4eb;
}

.result-short,
.result-overage {
  color: #8a491f;
  background: #fff0dd;
}

.result-out_of_stock {
  color: #8d3030;
  background: #fde8e8;
}

.sale-confirmation-panel,
.cancel-order-panel {
  margin-top: 28px;
  padding: 22px;
  border: 1px solid #d7e3dd;
  border-radius: 16px;
  background: #f8fbf9;
}

.confirmation-table input {
  box-sizing: border-box;
  width: 112px;
  padding: 9px 10px;
  border: 1px solid #b9c9c0;
  border-radius: 8px;
}

.confirmation-actions,
.cancel-order-panel form {
  display: flex;
  gap: 14px;
  align-items: end;
  margin-top: 18px;
}

.confirmation-actions label,
.cancel-order-panel label {
  display: grid;
  gap: 6px;
}

.confirmation-actions select,
.confirmation-actions input,
.cancel-order-panel select,
.cancel-order-panel input {
  padding: 10px 12px;
  border: 1px solid #b9c9c0;
  border-radius: 8px;
}

.cancel-order-panel summary {
  cursor: pointer;
  font-weight: 700;
  color: #7c3434;
}

.confirmed-badge,
.status-confirmed {
  color: #1d5a3c;
  background: #e6f4eb;
}

.cancelled-badge,
.status-cancelled {
  color: #8d3030;
  background: #fde8e8;
}

.sales-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
  gap: 14px;
  align-items: end;
  margin: 26px 0;
  padding: 18px;
  border-radius: 14px;
  background: #f3f7f4;
}

.sales-filter label {
  display: grid;
  gap: 7px;
  font-weight: 700;
}

.sales-filter input {
  padding: 10px 12px;
  border: 1px solid #b9c9c0;
  border-radius: 8px;
  background: #fff;
}

/* 同一种浅绿色表示“这里可以填写或调整”，白色区域用于查看结果。 */
.product-form,
.product-edit-form,
.import-preview-form,
.bulk-toolbar,
.price-category-form,
.category-form,
.company-form,
.category-price-form,
.company-alias-form,
.company-assignment-panel,
.sale-confirmation-panel,
.sales-filter {
  border-color: var(--editor-border);
  background: var(--editor-surface);
  box-shadow: var(--editor-shadow);
}

.product-edit-form {
  padding: 18px;
  border: 1px solid var(--editor-border);
  border-radius: 12px;
}

.sales-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}

.sales-metrics article {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid #d9e2dc;
  border-radius: 14px;
}

.sales-metrics span,
.sales-metrics small {
  color: #68736d;
}

.sales-metrics strong {
  color: #204f39;
  font-size: 26px;
}

.report-section {
  margin-top: 32px;
}

.pending-confirmation-panel {
  margin: 26px 0;
  padding: 20px;
  border: 1px solid #e1c46d;
  border-radius: 14px;
  background: #fff9e8;
}

.pending-confirmation-panel > p {
  color: #695725;
}

.report-table td:last-child {
  font-weight: 700;
}

.sales-detail-table {
  min-width: 980px;
}

.report-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
}

.report-pagination a,
.report-pagination span {
  padding: 8px 12px;
  border-radius: 8px;
}

.report-pagination a {
  color: #fff;
  background: #2f6f4e;
  font-weight: 700;
  text-decoration: none;
}

.report-pagination span {
  color: #8a948e;
  background: #edf1ee;
}

.confirmed-badge,
.cancelled-badge {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .welcome-card {
    grid-template-columns: 1fr;
  }

  .welcome-copy h1 {
    white-space: normal;
  }

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

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

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

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

  .billing-principles {
    grid-template-columns: 1fr;
  }

  .billing-phase {
    grid-template-columns: 1fr;
  }

  .billing-platform-links {
    align-items: stretch;
    flex-direction: column;
  }

  .billing-platform-links nav {
    flex-basis: auto;
  }

  .email-work-navigation .channel-switch-link {
    margin-left: 0;
  }

  .order-facts {
    grid-template-columns: 1fr 1fr;
  }

  .product-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-pagination div {
    justify-content: flex-start;
  }

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

  .order-search-form {
    grid-template-columns: 1fr auto;
  }

  .order-search-form .secondary-link {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .picking-queue {
    grid-template-columns: 1fr;
  }

  .delivery-queue {
    grid-template-columns: 1fr;
  }

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

  .delivery-history-facts {
    grid-template-columns: 1fr 1fr;
  }

  .payment-summary-grid,
  .pending-payment-facts {
    grid-template-columns: 1fr 1fr;
  }

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

  .confirmation-actions,
  .cancel-order-panel form {
    align-items: stretch;
    flex-direction: column;
  }

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

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

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

  .preview-counts {
    grid-template-columns: 1fr 1fr;
  }

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

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

  .company-readiness-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .company-profile-grid,
  .company-profile-audit {
    grid-template-columns: 1fr;
  }

  .alias-transfer-summary,
  .alias-transfer-form {
    grid-template-columns: 1fr;
  }

  .alias-reason-field,
  .alias-transfer-warning,
  .alias-transfer-form button {
    grid-column: auto;
  }

  .company-notes-field {
    grid-column: auto;
  }

  .contact-form-grid,
  .contact-audit-grid {
    grid-template-columns: 1fr;
  }

  .new-contact-layout {
    grid-template-columns: 1fr;
  }

  .company-import-summary {
    grid-template-columns: 1fr 1fr;
  }

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

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

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

  .form-note {
    grid-column: span 1;
  }
}

@media (max-width: 520px) {
  .welcome-card {
    margin-top: 16px;
    padding: 32px 24px;
  }

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

  .channel-card-heading {
    flex-direction: column;
  }

  .channel-link-grid {
    grid-template-columns: 1fr;
  }

  .workspace-card {
    padding: 32px 24px;
  }

  .order-facts {
    grid-template-columns: 1fr;
  }

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

  .company-import-form,
  .company-import-summary {
    grid-template-columns: 1fr;
  }

  .order-search-form button,
  .order-search-form .secondary-link {
    grid-column: auto;
    width: 100%;
    justify-content: center;
  }

  .delivery-facts {
    grid-template-columns: 1fr;
  }

  .delivery-history-facts {
    grid-template-columns: 1fr;
  }

  .delivery-event-list li {
    flex-direction: column;
    gap: 5px;
  }

  .delivery-event-list li > span {
    text-align: left;
  }

  .payment-summary-grid,
  .pending-payment-facts {
    grid-template-columns: 1fr;
  }

  .pending-payment-heading,
  .pending-payment-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .pending-payment-heading > strong,
  .payment-amount-unconfirmed {
    white-space: normal;
  }

  .pending-payment-actions .secondary-link,
  .pending-payment-actions button {
    width: 100%;
    text-align: center;
  }

  .delivery-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .delivery-outcome-actions {
    grid-template-columns: 1fr;
  }

  .master-data-counts,
  .category-form,
  .product-form,
  .product-search,
  .import-preview-form,
  .preview-counts {
    grid-template-columns: 1fr;
  }

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

  .company-form,
  .company-alias-form,
  .company-assignment-form,
  .category-price-form {
    grid-template-columns: 1fr;
  }

  .company-readiness-grid,
  .company-filter-form {
    grid-template-columns: 1fr;
  }

  .email-sample-form,
  .email-header-grid,
  .email-structure-grid {
    grid-template-columns: 1fr;
  }

  .email-header-grid .email-wide-field {
    grid-column: auto;
  }

  .company-dependency-summary {
    grid-template-columns: 1fr;
  }

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

  .product-detail-heading,
  .product-status-panel {
    flex-direction: column;
  }
}
.whatsapp-message-timeline {
  margin-top: 1.5rem;
}

.whatsapp-message-card {
  max-width: 44rem;
  margin: 0.75rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid #cdded4;
  border-radius: 0.9rem;
  background: #f3f8f5;
}

.whatsapp-message-card p {
  margin: 0.55rem 0 0;
  white-space: pre-wrap;
}

.whatsapp-message-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: #285a40;
}

.whatsapp-session-action-card {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid #d4dfd8;
  border-radius: 0.9rem;
  background: #fffaf0;
}

.whatsapp-session-action-card h2 {
  margin-top: 0;
}

.whatsapp-draft-summary {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #d8e2dc;
}

/* Compact WhatsApp review desk: evidence first, then one clear row per item. */
.whatsapp-review-workspace { max-width: 78rem; margin-inline: auto; }
.whatsapp-review-header,
.compact-section-title,
.dialog-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.whatsapp-review-header h1,
.compact-section-title h2,
.dialog-heading h2 { margin: 0; }
.whatsapp-manual {
  margin-top: 1rem;
  padding: .7rem .9rem;
  border: 1px solid #d7e2db;
  border-radius: .65rem;
  background: #f8faf9;
}
.whatsapp-manual summary { cursor: pointer; color: #315b44; font-weight: 700; }
.whatsapp-manual ol { margin-bottom: .25rem; }
.whatsapp-evidence-shelf,
.whatsapp-lines-section { margin-top: 1.35rem; }
.compact-section-title { margin-bottom: .7rem; }
.compact-section-title > div > span {
  display: block;
  color: #2f7b55;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.whatsapp-evidence-stream {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: .7rem;
}
.whatsapp-evidence-stream > article {
  min-width: 0;
  margin: 0;
  padding: .75rem;
  border: 1px solid #d6e1da;
  border-radius: .75rem;
  background: #fff;
}
.whatsapp-source-card img {
  width: 100%;
  height: 11rem;
  margin-top: .45rem;
  object-fit: contain;
  border-radius: .55rem;
  background: #f4f6f5;
}
.whatsapp-line-list { display: grid; gap: .75rem; }
.whatsapp-review-progress {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .35rem;
}
.whatsapp-review-progress span {
  padding: .2rem .5rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
}
.whatsapp-review-progress .is-complete { color: #1d633f; background: #eaf6ee; }
.whatsapp-review-progress .is-pending { color: #805b19; background: #fff3d7; }
.whatsapp-line-card {
  padding: .85rem;
  border: 1px solid #d6e0da;
  border-left: 4px solid #aebbb3;
  border-radius: .75rem;
  background: #fff;
}
.whatsapp-line-card.is-complete { background: #f8fbf9; }
.whatsapp-line-card.needs-review { box-shadow: inset 0 0 0 1px rgba(173, 127, 35, .08); }
.whatsapp-line-card > summary {
  list-style: none;
  cursor: pointer;
}
.whatsapp-line-card > summary::-webkit-details-marker { display: none; }
.whatsapp-line-card > summary:focus-visible {
  border-radius: .45rem;
  outline: 2px solid #438164;
  outline-offset: .25rem;
}
.whatsapp-line-card.is-complete:not([open]) > summary { opacity: .9; }
.whatsapp-line-body { margin-top: .65rem; }
.whatsapp-line-card.is-return { border-left-color: #c58a38; }
.whatsapp-line-card.is-order { border-left-color: #2f7b55; }
.whatsapp-line-heading {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: center;
}
.whatsapp-line-number {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: .5rem;
  color: #fff;
  background: #345c47;
  font-weight: 800;
}
.whatsapp-line-title,
.whatsapp-sku-confirmed > div { min-width: 0; }
.whatsapp-line-title strong,
.whatsapp-line-title span,
.whatsapp-sku-confirmed small { display: block; }
.whatsapp-line-title span { margin-top: .15rem; color: #5f6e65; }
.whatsapp-line-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.whatsapp-line-badges .status-ready {
  color: #1d5a3c;
  background: #def4e6;
}
.whatsapp-line-badges .status-pending {
  color: #735700;
  background: #fff3cd;
}
.whatsapp-line-evidence-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  margin: .65rem 0;
  color: #52645a;
  font-size: .88rem;
}
.whatsapp-line-evidence-summary span { padding: .18rem .45rem; border-radius: 999px; background: #eef3f0; }
.whatsapp-line-decision {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(9rem, .7fr) auto;
  gap: .6rem;
  align-items: end;
  padding: .65rem;
  border-radius: .65rem;
  background: #f5f8f6;
}
.whatsapp-line-decision label,
.whatsapp-line-dialog label { display: grid; gap: .25rem; font-weight: 650; }
.whatsapp-line-decision label small { color: #6d7972; font-weight: 400; }
.whatsapp-sku-confirmed {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  margin-top: .65rem;
  padding: .65rem .75rem;
  border: 1px solid #c9ddcf;
  border-radius: .65rem;
  background: #eff8f2;
}
.whatsapp-compact-candidates { margin-top: .7rem; }
.whatsapp-candidate-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem; margin-top: .4rem; }
.whatsapp-candidate-strip article {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: .5rem;
  align-items: center;
  padding: .5rem;
  border: 1px solid #d5dfd9;
  border-radius: .6rem;
}
.whatsapp-candidate-strip img { width: 3.5rem; height: 3.5rem; object-fit: contain; border-radius: .4rem; }
.whatsapp-candidate-strip small { display: block; }
.whatsapp-candidate-strip form { grid-column: 1 / -1; }
.whatsapp-candidate-strip button { width: 100%; }
.whatsapp-sku-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .5rem; margin-top: .7rem; }
.whatsapp-sku-actions form { display: flex; min-width: 0; gap: .4rem; }
.whatsapp-sku-actions input { min-width: 0; flex: 1; }
.whatsapp-pending-note { display: block; margin-top: .45rem; color: #735700; }
.whatsapp-line-more { margin-top: .65rem; color: #52645a; }
.whatsapp-line-more summary { cursor: pointer; font-size: .9rem; }
.whatsapp-line-edit-form,
.whatsapp-line-evidence-form { display: flex; flex-wrap: wrap; gap: .55rem; margin: .65rem 0; align-items: end; }
.whatsapp-line-edit-form label { flex: 1 1 20rem; }
.whatsapp-line-evidence-form label { padding: .35rem .5rem; border-radius: .45rem; background: #f2f5f3; }
.compact-conversion-card { margin-top: 1.25rem; padding: 1rem; }
.compact-conversion-card h2 { margin-top: 0; }
.whatsapp-line-dialog {
  width: min(42rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 1rem;
  border: 0;
  border-radius: .9rem;
  box-shadow: 0 1.25rem 4rem rgba(19, 44, 30, .28);
}
.whatsapp-line-dialog::backdrop { background: rgba(16, 28, 21, .45); }
.whatsapp-line-dialog > form { display: grid; gap: .75rem; }
.whatsapp-line-dialog fieldset { margin: 0; border: 1px solid #d4dfd8; border-radius: .7rem; }
.inline-save-toast {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1000;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: .7rem 1rem;
  border-radius: .65rem;
  color: #fff;
  background: #245f40;
  box-shadow: 0 .65rem 2rem rgba(20, 48, 32, .24);
  opacity: 0;
  transform: translateY(.5rem);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.inline-save-toast.is-visible { opacity: 1; transform: translateY(0); }
.inline-save-toast.is-error { background: #9a3b32; }

@media (max-width: 720px) {
  .whatsapp-line-heading { grid-template-columns: 2rem minmax(0, 1fr); }
  .whatsapp-line-badges { grid-column: 1 / -1; justify-content: flex-start; }
  .whatsapp-line-decision { grid-template-columns: 1fr; }
  .whatsapp-review-header,
  .compact-section-title { align-items: flex-start; }
}

.whatsapp-draft-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.whatsapp-review-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.whatsapp-review-steps li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.1rem 0.6rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid #d3e0d8;
  border-radius: 0.8rem;
  background: #f8fbf9;
}

.whatsapp-review-steps span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: #fff;
  background: #2f7b55;
  font-weight: 800;
}

.whatsapp-review-steps strong,
.whatsapp-review-steps small {
  display: block;
}

.whatsapp-review-steps small {
  color: #66756c;
}

.whatsapp-review-stage {
  padding: 1rem;
  border: 1px solid #d8e2dc;
  border-radius: 0.9rem;
  background: #fcfdfc;
}

.whatsapp-review-stage > h2 {
  margin-top: 0;
}

.whatsapp-draft-tools {
  margin-bottom: 1rem;
  border: 1px dashed #bdcfc4;
  border-radius: 0.8rem;
  background: #f8fbf9;
}

.whatsapp-draft-tools > summary {
  padding: 0.8rem 1rem;
  cursor: pointer;
  color: #315b44;
  font-weight: 700;
}

.whatsapp-draft-tools-body {
  display: grid;
  gap: 0.8rem;
  padding: 0 0.8rem 0.8rem;
}

@media (max-width: 850px) {
  .whatsapp-draft-layout {
    grid-template-columns: 1fr;
  }

  .whatsapp-review-steps {
    grid-template-columns: 1fr;
  }
}

.whatsapp-draft-add-form,
.whatsapp-draft-item-edit {
  display: grid;
  gap: 0.75rem;
}

.whatsapp-draft-add-form {
  padding: 1rem;
  border: 1px solid #d5e1da;
  border-radius: 0.9rem;
  background: #f5f9f6;
}

.whatsapp-evidence-picker {
  margin: 0;
  padding: 0.9rem;
  border: 1px solid #bdcfc4;
  border-radius: 0.8rem;
  background: #fff;
}

.whatsapp-evidence-picker legend {
  padding: 0 0.35rem;
  font-weight: 700;
  color: #214d36;
}

.whatsapp-evidence-picker > p {
  margin: 0 0 0.7rem;
  color: #53675b;
}

.whatsapp-evidence-options {
  display: grid;
  gap: 0.45rem;
  max-height: 20rem;
  overflow-y: auto;
}

.whatsapp-evidence-options label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  padding: 0.65rem;
  border: 1px solid #d9e4dd;
  border-radius: 0.65rem;
  background: #f7faf8;
  cursor: pointer;
}

.whatsapp-evidence-options label:has(input:checked) {
  border-color: #4d8d68;
  background: #eaf6ee;
  box-shadow: inset 3px 0 #2f7b55;
}

.whatsapp-evidence-options input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
}

.whatsapp-evidence-options small,
.whatsapp-evidence-options b {
  display: block;
}

.whatsapp-draft-item-card {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #d5e1da;
  border-radius: 0.9rem;
  background: #fff;
}

.whatsapp-item-evidence {
  margin: 0.8rem 0;
  padding: 0.75rem;
  border: 1px solid #c8d8e9;
  border-radius: 0.75rem;
  background: #f3f8fc;
}

.whatsapp-item-evidence summary {
  cursor: pointer;
  font-weight: 700;
  color: #315879;
}

.whatsapp-item-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.65rem;
  margin-top: 0.7rem;
}

.whatsapp-item-evidence-grid article {
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid #d6e1ea;
  border-radius: 0.65rem;
  background: #fff;
}

.whatsapp-item-evidence-grid time,
.whatsapp-item-evidence-grid strong {
  display: block;
}

.whatsapp-item-evidence-grid time {
  margin-top: 0.2rem;
  color: #617184;
  font-size: 0.8rem;
}

.whatsapp-item-evidence-grid img {
  width: 100%;
  max-height: 9rem;
  margin-top: 0.5rem;
  object-fit: contain;
  border-radius: 0.5rem;
  background: #f6f6f6;
}

.whatsapp-item-evidence-grid audio,
.whatsapp-message-card audio {
  width: 100%;
  margin-top: 0.5rem;
}

.whatsapp-evidence-editor {
  margin: 0.75rem 0;
  padding: 0.7rem;
  border: 1px dashed #b8c9bf;
  border-radius: 0.7rem;
  background: #fbfcfb;
}

.whatsapp-evidence-editor summary {
  cursor: pointer;
  font-weight: 700;
  color: #3f5f4c;
}

.whatsapp-evidence-editor form {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.7rem;
}

.whatsapp-understanding-card {
  padding: 1rem;
  margin-top: 1rem;
  border: 1px solid #b8cfdc;
  border-radius: 0.85rem;
  background: #f3f8fb;
}

.whatsapp-understanding-hints {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.65rem;
}

.whatsapp-understanding-hints div {
  padding: 0.7rem;
  border-radius: 0.6rem;
  background: #fff;
  overflow-wrap: anywhere;
}

.whatsapp-understanding-hints dt { color: #586b76; font-size: 0.85rem; }
.whatsapp-understanding-hints dd { margin: 0.4rem 0 0; font-weight: 600; }
.whatsapp-understanding-hints dd span { display: block; margin-top: 0.2rem; }
.whatsapp-understanding-confirm summary { cursor: pointer; font-weight: 700; }
.whatsapp-understanding-confirm form { display: grid; gap: 0.7rem; margin: 0.8rem 0; }
.whatsapp-audio-card textarea,
.whatsapp-understanding-confirm textarea { width: 100%; resize: vertical; }

.whatsapp-context-reference {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  align-items: center;
  margin: 0.65rem 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid #d7e3dc;
  border-radius: 0.65rem;
  background: #f7faf8;
  color: #52645a;
}

.whatsapp-context-reference div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  align-items: baseline;
}

.whatsapp-context-reference strong { color: #214d36; }
.whatsapp-context-reference span,
.whatsapp-context-reference small { font-size: 0.82rem; }
.whatsapp-context-reference small { max-width: 34rem; text-align: right; }

.intent-example-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.intent-example-list article {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid #d7e3dc;
  border-radius: 0.75rem;
  background: #fff;
}

.intent-example-list p {
  margin: 0.55rem 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.intent-example-list > article > small { color: #63736a; }

.intent-example-result {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.45rem 1rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.55rem;
  background: #f3f8f5;
}

.intent-example-result strong { color: #174f35; }

.whatsapp-inbox-rules {
  margin-top: 1rem;
  border: 1px solid #d5e1da;
  border-radius: 0.8rem;
  background: #f8fbf9;
}

.whatsapp-inbox-rules > summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  color: #24593f;
  font-weight: 800;
  cursor: pointer;
}

.whatsapp-inbox-rules > summary span {
  color: #6b7a72;
  font-size: 0.84rem;
  font-weight: 600;
}

.whatsapp-inbox-rules[open] > summary { border-bottom: 1px solid #dfe8e2; }
.whatsapp-inbox-rules > div { padding: 0.75rem; }
.whatsapp-inbox-rules .email-safety-note { margin: 0 0 0.65rem; }
.whatsapp-inbox-rules .email-safety-note:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .whatsapp-context-reference {
    align-items: flex-start;
    flex-direction: column;
  }

  .whatsapp-context-reference small { text-align: left; }
}

.whatsapp-candidate-search {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.whatsapp-direct-sku-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 15rem) auto;
  gap: 0.7rem;
  align-items: end;
  margin-top: 0.9rem;
  padding: 0.85rem;
  border: 1px solid #d5cba8;
  border-radius: 0.75rem;
  background: #fffaf0;
}

.whatsapp-direct-sku-form small,
.whatsapp-direct-sku-form strong {
  display: block;
}

.whatsapp-direct-sku-form small {
  margin-top: 0.25rem;
  color: #6d6653;
}

@media (max-width: 760px) {
  .whatsapp-direct-sku-form {
    grid-template-columns: 1fr;
  }
}

.whatsapp-candidate-search input {
  flex: 1;
}

.whatsapp-candidate-list {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: #f4f7f5;
}

.whatsapp-candidate-card {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(12rem, auto);
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0;
  border-top: 1px solid #d7e1db;
}

.whatsapp-candidate-card img {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  border-radius: 0.5rem;
  background: #fff;
}

.whatsapp-matched-product {
  display: grid;
  gap: 0.25rem;
  margin: 0.8rem 0;
  padding: 0.75rem;
  border-left: 4px solid #2f7b55;
  background: #eef7f1;
}

.whatsapp-image-learning-card {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin: 0.8rem 0;
  padding: 0.9rem;
  border: 1px solid #c7d9cf;
  border-radius: 0.8rem;
  background: #f7faf8;
}

.whatsapp-image-learning-card img {
  width: 7rem;
  height: 7rem;
  object-fit: contain;
  border-radius: 0.65rem;
  background: #fff;
}

.whatsapp-image-learning-card p {
  margin: 0.35rem 0 0.65rem;
}

.whatsapp-visual-task-card {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin: 0.8rem 0;
  padding: 0.9rem;
  border: 1px solid #c8d8e9;
  border-left: 4px solid #4979a8;
  border-radius: 0.8rem;
  background: #f2f7fb;
}

.whatsapp-visual-task-card img {
  width: 7rem;
  height: 7rem;
  object-fit: contain;
  border-radius: 0.65rem;
  background: #fff;
}

.whatsapp-visual-task-card p {
  margin: 0.35rem 0 0.65rem;
}

.visual-reference-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.55rem 0;
}

.visual-reference-counts span {
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: #fff;
  color: #315879;
  font-size: 0.84rem;
}

.compact-action-form {
  margin-top: 0.65rem;
}

.visual-candidate-results {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.visual-candidate-result {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem;
  border: 1px solid #cbd8e3;
  border-radius: 0.7rem;
  background: #fff;
}

.visual-candidate-result.visual-candidate-strong {
  border-color: #79ad8c;
  box-shadow: inset 4px 0 #2f7b55;
  background: #f5fbf7;
}

.visual-candidate-result img {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: contain;
  border-radius: 0.5rem;
  background: #fff;
}

.visual-candidate-result small {
  display: block;
}

.visual-candidate-result > div {
  min-width: 0;
  overflow-wrap: break-word;
}

.visual-candidate-result > form {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid #e2e9ef;
}

.visual-candidate-result > form label {
  flex: 1 1 14rem;
  min-width: 0;
}

.visual-candidate-result > form button {
  flex: 0 0 auto;
}

.compact-action-form select {
  min-width: min(100%, 16rem);
}

.visual-recognition-workspace {
  background:
    radial-gradient(circle at top right, rgba(70, 120, 160, 0.12), transparent 24rem),
    #fff;
}

.visual-architecture-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1.25rem 0;
}

.visual-architecture-flow article {
  padding: 1rem;
  border: 1px solid #cbd9e4;
  border-radius: 0.85rem;
  background: #f5f9fc;
}

.visual-architecture-flow span {
  display: block;
  margin-bottom: 0.55rem;
  color: #4c7799;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.visual-architecture-flow strong {
  display: block;
  color: #173b58;
  font-size: 1.05rem;
}

.visual-architecture-flow p {
  margin-bottom: 0;
}

.visual-provider-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.55fr);
  gap: 1rem;
  align-items: center;
  margin: 1rem 0;
  padding: 1.1rem;
  border: 1px solid #bcd2e1;
  border-radius: 0.9rem;
  background: #edf5fa;
}

.visual-provider-card h2 {
  margin-top: 0.2rem;
}

.visual-provider-checks {
  padding: 0.85rem;
  border-radius: 0.75rem;
  background: #fff;
}

.visual-provider-checks p {
  margin: 0.35rem 0;
}

.status-dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  margin-right: 0.45rem;
  border-radius: 999px;
  background: #c5923f;
}

.status-dot-ready {
  background: #2f7b55;
}

.button-danger {
  border-color: #bd6d67;
  background: #fff4f2;
  color: #8d302b;
}

.button-danger:hover {
  background: #f9dedb;
}

.whatsapp-conversion-card {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid #cbdcd1;
  border-radius: 0.9rem;
  background: #f2f8f4;
}

.whatsapp-conversion-card h2 {
  margin-top: 0;
}

.readiness-blockers {
  margin-bottom: 0;
  color: #7b3f32;
}

.exact-sku-extract-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, auto);
  gap: 1rem;
  align-items: end;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid #bcd8c7;
  border-radius: 0.9rem;
  background: #eef8f1;
}

.exact-sku-extract-card p {
  margin: 0.35rem 0 0;
}

@media (max-width: 700px) {
  .exact-sku-extract-card {
    grid-template-columns: 1fr;
  }
}

/* Clear, at-a-glance connector status for the home and email workspaces. */
.system-status-section {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--border-color, #d9e3dd);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
}

.system-status-grid,
.connection-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
}

.system-status-card,
.connection-overview-card {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 1px solid #d9e3dd;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  background: #f7faf8;
}

.system-status-card:hover,
.system-status-card:focus-visible {
  border-color: #2f7d59;
  box-shadow: 0 6px 18px rgba(34, 74, 55, 0.1);
  outline: none;
}

.system-status-card.is-ready,
.connection-overview-card.is-ready {
  border-color: #acd0bb;
  background: #f0f8f3;
}

.system-status-card.needs-attention {
  border-color: #e6d9ae;
  background: #fffaf0;
}

.system-status-card span,
.connection-overview-card span {
  color: #52645a;
  font-size: 0.82rem;
  font-weight: 700;
}

.system-status-card strong,
.connection-overview-card strong {
  color: #16231c;
  font-size: 1.08rem;
}

.system-status-card small,
.connection-overview-card small {
  color: #68776f;
  line-height: 1.4;
}

.connection-overview-grid {
  margin: 1rem 0;
}

.settings-details {
  margin-top: 1rem;
  border: 1px solid #d9e3dd;
  border-radius: 14px;
  background: #fbfdfb;
}

.settings-details > summary {
  padding: 0.9rem 1rem;
  color: #24593f;
  font-weight: 800;
  cursor: pointer;
}

.settings-details[open] > summary {
  border-bottom: 1px solid #e1e8e3;
}

.settings-details-body {
  padding: 1rem;
}

.settings-details-body--stacked {
  display: grid;
  gap: 1rem;
}

.settings-details--wide {
  margin-top: 1.4rem;
}

@media (max-width: 700px) {
  .system-status-section {
    padding: 1rem;
  }

  .system-status-grid,
  .connection-overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .whatsapp-candidate-card {
    grid-template-columns: 1fr;
  }

  .whatsapp-image-learning-card {
    grid-template-columns: 1fr;
  }

  .whatsapp-visual-task-card {
    grid-template-columns: 1fr;
  }

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

  .visual-architecture-flow,
  .visual-provider-card {
    grid-template-columns: 1fr;
  }
}

.visual-test-workspace {
  display: grid;
  gap: 1.15rem;
}

.visual-test-upload-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #cadbd1;
  border-radius: 16px;
  background: #f8fbf9;
}

.visual-test-upload-copy h2,
.visual-test-upload-copy p {
  margin-top: 0;
}

.visual-test-form {
  display: grid;
  gap: 0.9rem;
}

.visual-test-dropzone {
  display: grid;
  gap: 0.3rem;
  padding: 1.25rem;
  border: 2px dashed #9bbdab;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}

.visual-test-dropzone span {
  color: #174f35;
  font-weight: 800;
}

.visual-test-dropzone input {
  margin-top: 0.65rem;
}

.visual-test-file-state {
  margin: 0;
  color: #607268;
  font-size: 0.9rem;
}

.visual-test-preview {
  min-height: 240px;
  overflow: hidden;
  border-radius: 14px;
  background: #eaf2ed;
}

.visual-test-preview img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: contain;
}

.visual-test-boundary,
.visual-test-result dl,
.visual-test-history-item dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
}

.visual-test-boundary > div,
.visual-test-result dl > div,
.visual-test-history-item dl > div {
  display: grid;
  gap: 0.25rem;
  padding: 0.8rem;
  border-radius: 12px;
  background: #f2f7f4;
}

.visual-test-boundary strong,
.visual-test-result dt,
.visual-test-history-item dt {
  color: #24593f;
  font-size: 0.82rem;
  font-weight: 800;
}

.visual-test-boundary span,
.visual-test-result dd,
.visual-test-history-item dd {
  margin: 0;
}

.visual-test-result {
  padding: 1rem;
  border: 1px solid #acd0bb;
  border-radius: 16px;
  background: #f0f8f3;
}

.visual-test-result--failed {
  border-color: #e0c3b9;
  background: #fff6f3;
}

.visual-test-history {
  border: 1px solid #d8e2dc;
  border-radius: 14px;
  background: #fff;
}

.visual-test-history > summary {
  padding: 0.9rem 1rem;
  color: #24593f;
  font-weight: 800;
  cursor: pointer;
}

.visual-test-history-list {
  display: grid;
  gap: 0.65rem;
  padding: 0 1rem 1rem;
}

.visual-test-history-item {
  border: 1px solid #dde6e1;
  border-radius: 12px;
}

.visual-test-history-item > summary {
  display: grid;
  grid-template-columns: auto auto minmax(10rem, 1fr) auto auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.75rem;
  cursor: pointer;
}

.visual-test-history-item > dl,
.visual-test-history-item > p {
  margin: 0.75rem;
}

/* Whole-order evidence stays distinct from the editable picking draft. */
.brain-draft-entry,
.brain-analysis-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  margin: 1rem 0;
  border: 1px solid #bdd6c9;
  border-radius: 14px;
  background: #f1f8f4;
}

.brain-draft-entry p,
.brain-analysis-controls p {
  max-width: 48rem;
  margin: 0.45rem 0;
}

.brain-analysis-controls form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
}

.brain-analysis-controls label {
  display: grid;
  gap: 0.4rem;
}

.brain-openai-isolation {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
  padding: 1.15rem;
  border: 1px solid #aebfdf;
  border-left: 5px solid #536fa9;
  border-radius: 14px;
  background: linear-gradient(135deg, #f4f7fd, #f3faf6);
}

.brain-openai-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
}

.brain-openai-heading h2,
.brain-openai-heading p {
  margin: 0.25rem 0;
}

.brain-openai-form {
  display: grid;
  grid-template-columns: minmax(180px, .45fr) minmax(300px, 1fr) auto;
  gap: 0.85rem;
  align-items: end;
  padding: 1rem;
  border: 1px solid #d5dfeb;
  border-radius: 12px;
  background: #fff;
}

.brain-openai-form > label:not(.openai-confirm-line) {
  display: grid;
  gap: 0.4rem;
}

.brain-openai-form .openai-confirm-line {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.6rem;
}

.brain-openai-form .openai-confirm-line input {
  min-height: 0;
  margin-top: 0.25rem;
}

.brain-openai-form small {
  grid-column: 1 / -1;
  color: #5e6d66;
}

.brain-openai-form button:disabled {
  cursor: wait;
  opacity: .7;
}

.brain-workflow,
.brain-suggestion-facts,
.brain-queue-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.brain-workflow article,
.brain-suggestion-facts > div,
.brain-queue-summary > div {
  padding: 1rem;
  border-radius: 12px;
  background: #f1f6f3;
}

.brain-workflow b {
  display: block;
  margin-bottom: 0.5rem;
  color: #2c6950;
  font-size: 1.5rem;
}

.brain-draft-list,
.brain-suggestion-list {
  display: grid;
  gap: 0.85rem;
  margin: 1rem 0;
}

.brain-draft-list > a {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid #cfdfd6;
  border-radius: 12px;
  text-decoration: none;
}

.brain-draft-list small { margin-left: auto; }
.brain-draft-list > a:hover { background: #f1f8f4; }

.brain-result,
.brain-suggestion {
  padding: 1rem;
  border: 1px solid #c9ddd1;
  border-radius: 14px;
  background: #fff;
}

.brain-result.is-stale {
  border-color: #dbc17b;
  background: #fffcf2;
}

.brain-suggestion-facts dt { color: #596d61; font-size: 0.85rem; }
.brain-suggestion-facts dd { margin: 0.45rem 0 0; font-weight: 700; }
.brain-adoption-form {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: 0.9rem;
  padding: 0.8rem;
  border: 1px solid #9dc8ad;
  border-radius: 10px;
  background: #eef8f2;
}
.brain-adoption-form strong,
.brain-adoption-form small { display: block; }
.brain-adoption-form small { margin-top: 0.25rem; color: #52645a; }
.brain-adoption-disabled {
  margin: 0.8rem 0 0;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  color: #746442;
  background: #fff8e8;
  font-size: 0.9rem;
}
.brain-suggestion-detail {
  margin-top: 0.8rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #dce7e0;
  border-radius: 9px;
  background: #f8faf9;
}
.brain-suggestion-detail summary {
  cursor: pointer;
  color: #315f49;
  font-weight: 700;
}
.brain-suggestion-detail > p { margin: 0.7rem 0; }
.brain-correct-link {
  display: inline-block;
  margin-top: 0.75rem;
  color: #315f49;
  font-weight: 700;
  text-decoration: none;
}
.brain-correct-link:hover { text-decoration: underline; }
.brain-batch-panel {
  margin: 1rem 0;
  padding: 0.85rem;
  border: 1px solid #8fbea3;
  border-radius: 12px;
  background: #f0f8f3;
}
.brain-batch-panel > form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brain-batch-panel strong,
.brain-batch-panel small { display: block; }
.brain-batch-panel small { margin-top: 0.25rem; color: #52645a; }
.brain-batch-panel details { margin-top: 0.65rem; font-size: 0.9rem; color: #596d61; }
.brain-batch-panel summary { cursor: pointer; }
.brain-batch-panel details p { margin: 0.55rem 0 0; }
.brain-batch-choice {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.8rem;
  color: #24593f;
  font-weight: 700;
}
.brain-batch-choice input { min-height: 0; width: auto; }
.brain-queue-summary dt { color: #596d61; font-size: 0.85rem; }
.brain-queue-summary dd { margin: 0.45rem 0 0; font-size: 1.25rem; font-weight: 800; }
.brain-job-state {
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #cbded3;
  border-radius: 14px;
  background: #f5faf7;
}
.brain-job-state > div { display: flex; gap: 0.75rem; align-items: center; }
.brain-job-state p { margin: 0; }
.brain-job-state--retry_wait,
.brain-job-state--degraded,
.brain-job-state--needs_attention { border-color: #dbc17b; background: #fffaf0; }
.brain-workspace { overflow-wrap: anywhere; }
.brain-evidence blockquote {
  margin: 0.65rem 0;
  padding: 0.65rem 0.9rem;
  border-left: 3px solid #a9c8b6;
  background: #f8faf9;
  white-space: pre-wrap;
}

.brain-input-preview {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #d7e3dc;
  border-radius: 12px;
}
.brain-input-preview summary { cursor: pointer; font-weight: 700; color: #24593f; }
.brain-input-preview article { border-top: 1px solid #e4ebe7; padding-top: 0.8rem; }
.brain-message-preview {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0;
}
.brain-message-preview article {
  padding: 0.85rem;
  border: 1px solid #dce6e0;
  border-radius: 10px;
  background: #f8faf9;
}
.brain-message-preview p {
  margin: 0.45rem 0 0;
  white-space: pre-wrap;
}
.brain-package-preview {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #dfe9e3;
}
.brain-package-preview > p {
  margin: 0.35rem 0 0.8rem;
  color: #596d61;
}
.brain-package-preview .order-table { min-width: 560px; }
.brain-package-preview td,
.brain-package-preview th { padding: 0.65rem 0.75rem; }
.ai-evaluation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1rem 0;
}
.ai-evaluation-grid > div {
  padding: 0.8rem;
  border-radius: 10px;
  background: #f1f6f3;
}
.ai-evaluation-grid dt { color: #596d61; font-size: 0.85rem; }
.ai-evaluation-grid dd { margin: 0.35rem 0 0; font-size: 1.35rem; font-weight: 800; }
.ai-evaluation-details { border-top: 1px solid #dce7e0; padding-top: 0.75rem; }
.ai-evaluation-details summary { cursor: pointer; color: #315f49; font-weight: 700; }
.ai-evaluation-table { min-width: 680px; }

@media (max-width: 760px) {
  .brain-workflow,
  .brain-suggestion-facts,
  .brain-queue-summary { grid-template-columns: 1fr; }
  .brain-analysis-controls form,
  .brain-analysis-controls label { width: 100%; }
  .brain-openai-heading { flex-direction: column; }
  .brain-openai-form { grid-template-columns: 1fr; }
  .brain-adoption-form { align-items: stretch; flex-direction: column; }
  .brain-batch-panel > form { align-items: stretch; flex-direction: column; }
  .brain-draft-list small { margin-left: 0; }
  .ai-evaluation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .visual-test-upload-card {
    grid-template-columns: 1fr;
  }

  .visual-test-history-item > summary {
    grid-template-columns: auto auto 1fr;
  }
}
.family-learning-admin {
  max-width: 1180px;
}

.family-learning-list {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.family-learning-card {
  border: 1px solid #d7e2dc;
  border-radius: 20px;
  background: #fff;
  padding: 1.35rem;
  box-shadow: 0 10px 28px rgba(22, 70, 48, 0.07);
}

.family-learning-card > header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  border-bottom: 1px solid #e6ece9;
  padding-bottom: 1rem;
}

.family-learning-card h2 {
  margin: 0.55rem 0 0.25rem;
}

.family-learning-card header p {
  margin: 0;
  color: #617069;
}

.family-learning-evidence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 1rem 0;
}

.family-learning-evidence > div {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem;
  border-radius: 14px;
  background: #f4f7f5;
}

.family-learning-evidence span {
  color: #617069;
  font-size: 0.86rem;
}

.family-learning-choice {
  background: #e9f7ef !important;
  border: 1px solid #b8dfc8;
}

.family-learning-form {
  display: grid;
  gap: 0.9rem;
}

.family-learning-form > label:first-child {
  display: grid;
  gap: 0.4rem;
  font-weight: 700;
}

.family-learning-form textarea {
  width: 100%;
  min-height: 6rem;
  resize: vertical;
}

.family-learning-form fieldset {
  display: grid;
  gap: 0.55rem;
  border: 1px solid #d7e2dc;
  border-radius: 14px;
  padding: 0.9rem 1rem;
}

.family-learning-form fieldset label,
.family-learning-form .family-confirm-check {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}

.family-learning-form input[type="radio"],
.family-learning-form input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

.family-learning-form button {
  justify-self: start;
}

.family-learning-no-train {
  margin: 0;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: #fff6dc;
  color: #755300;
}

@media (max-width: 760px) {
  .family-learning-card > header,
  .family-learning-evidence {
    display: grid;
    grid-template-columns: 1fr;
  }

  .family-learning-form button {
    width: 100%;
  }
}
.unverified-send-panel {
  margin: 1rem 0 1.4rem;
  border: 2px solid #e4a72d;
  border-radius: 18px;
  background: #fff8e8;
  padding: 1rem 1.15rem;
}

.unverified-send-panel summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 1.05rem;
}

.unverified-send-panel form,
.unverified-send-panel label {
  display: grid;
  gap: 0.55rem;
}

.unverified-send-panel form {
  margin-top: 1rem;
}

.unverified-send-panel textarea {
  width: 100%;
  resize: vertical;
}

.unverified-picking-section {
  margin: 1.4rem 0 2rem;
  padding: 1.1rem;
  border: 3px solid #d88b08;
  border-radius: 22px;
  background: #fff9e9;
}

.unverified-picking-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.unverified-picking-heading h2,
.unverified-picking-heading p {
  margin: 0;
}

.unverified-picking-heading > strong {
  display: grid;
  place-items: center;
  min-width: 3rem;
  min-height: 3rem;
  border-radius: 999px;
  background: #9c5700;
  color: #fff;
  font-size: 1.35rem;
}

.unverified-picking-card {
  border: 2px solid #e4a72d;
  background: #fffdf6;
}

.unverified-stop-banner {
  display: grid;
  gap: 0.4rem;
  margin: 1rem 0;
  padding: 1.15rem 1.3rem;
  border: 4px solid #b42318;
  border-radius: 18px;
  background: #fff0ee;
  color: #77140d;
}

.unverified-stop-banner strong {
  font-size: 1.35rem;
}

.unverified-ack-form {
  display: grid;
  gap: 0.55rem;
  margin: 1.5rem 0;
  padding: 1rem;
  border-radius: 16px;
  background: #eef5f1;
}

.unverified-ack-form button {
  justify-self: start;
  min-height: 3.25rem;
  font-size: 1.05rem;
}

@media (max-width: 720px) {
  .unverified-picking-section {
    padding: 0.8rem;
  }

  .unverified-ack-form button {
    width: 100%;
  }
}
.unverified-delivery-summary {
  border: 2px solid #e4a72d !important;
  background: #fff8e8 !important;
}

.unverified-delivery-section {
  margin: 1.5rem 0 2rem;
  padding: 1.1rem;
  border: 3px solid #d88b08;
  border-radius: 22px;
  background: #fff9e9;
}

.unverified-delivery-section .delivery-section-heading {
  margin-top: 0;
}

.unverified-delivery-card {
  border: 2px solid #e4a72d;
  background: #fffdf6;
}

.unverified-stage-complete {
  display: grid;
  gap: 0.4rem;
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  border: 2px solid #65a880;
  border-radius: 16px;
  background: #edf8f1;
  color: #195f39;
}

.unverified-stage-complete strong {
  font-size: 1.12rem;
}

.unverified-outcome-form,
.unverified-reconcile-panel {
  display: grid;
  gap: 0.85rem;
  margin: 1.5rem 0;
  padding: 1.15rem;
  border: 3px solid #2f7d57;
  border-radius: 18px;
  background: #f2faf5;
}

.unverified-outcome-form fieldset {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.unverified-outcome-form legend {
  margin-bottom: 0.75rem;
  font-size: 1.35rem;
  font-weight: 850;
}

.unverified-outcome-form fieldset > label {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 4.5rem;
  padding: 0.85rem 1rem;
  border: 2px solid #9cc9af;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}

.unverified-outcome-form input[type="radio"] {
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
}

.unverified-outcome-form fieldset span,
.provisional-outcome-complete {
  display: grid;
  gap: 0.25rem;
}

.unverified-outcome-form button,
.unverified-reconcile-panel button {
  min-height: 3.4rem;
  font-size: 1.05rem;
}

.unverified-reconcile-panel {
  border-color: #c47700;
  background: #fff7df;
  color: #684300;
}

.unverified-reconcile-panel form {
  display: grid;
  gap: 0.65rem;
}

@media (max-width: 720px) {
  .unverified-outcome-form button,
  .unverified-reconcile-panel button {
    width: 100%;
  }
}

.formal-handoff-warning {
  display: grid;
  gap: 0.35rem;
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 2px solid #d88b08;
  border-radius: 14px;
  background: #fff6dc;
  color: #704700;
}

.formal-handoff-warning strong {
  font-size: 1.05rem;
}

.formal-handoff-banner {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.25rem;
  border: 3px solid #b86f00;
  border-radius: 18px;
  background: #fff4d6;
  color: #644000;
}

.formal-handoff-banner strong {
  font-size: 1.2rem;
}

.formal-handoff-banner small {
  font-weight: 750;
}

.migration-summary {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin: 1rem 0 1.4rem;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  background: #fff4d6;
  color: #704700;
}

.migration-summary strong {
  font-size: 2rem;
}

.channel-migration-list,
.channel-bind-form,
.channel-remove-form {
  display: grid;
  gap: 1rem;
}

.channel-migration-card {
  padding: 1.2rem;
  border: 2px solid #d79a2d;
  border-radius: 18px;
  background: #fffdf6;
}

.channel-migration-card header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.channel-bind-form,
.channel-remove-form {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 14px;
  background: #f1f8f4;
}

.channel-bind-form label,
.channel-remove-form label {
  display: grid;
  gap: 0.4rem;
}

.channel-bind-form select,
.channel-bind-form input,
.channel-remove-form input {
  min-height: 3rem;
}

.channel-remove-disclosure {
  margin-top: 1rem;
  color: #7a1f17;
}

.contact-channels {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid #d8e5dd;
}

.contact-channel-list,
.contact-channel-card,
.contact-channel-card form {
  display: grid;
  gap: 0.85rem;
}

.contact-channel-card {
  padding: 1rem;
  border: 2px solid #b9d5c5;
  border-radius: 16px;
  background: #f6fbf8;
}

.contact-channel-card > div,
.contact-channel-card label {
  display: grid;
  gap: 0.35rem;
}

.contact-channel-card select,
.contact-channel-card input {
  min-height: 3rem;
}

.contact-channel-create {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 2px dashed #75a98c;
  border-radius: 14px;
  background: #f7fcf9;
}

.contact-channel-create summary {
  cursor: pointer;
  font-weight: 850;
  color: #17643f;
}

.contact-channel-create form {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}

.contact-channel-create label,
.contact-channel-actions {
  display: grid;
  gap: 0.35rem;
}

.contact-channel-create input,
.contact-channel-create select {
  min-height: 3rem;
}

.contact-channel-actions {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

@media (max-width: 720px) {
  .contact-channel-actions {
    grid-template-columns: 1fr;
  }
}

.home-service-connections {
  margin: 1rem 0;
  border: 1px solid #b8c9bf;
  border-radius: 14px;
  background: #f4f8f5;
  color: #294b3a;
  overflow-wrap: anywhere;
}

.home-service-connections > summary {
  min-height: 44px;
  padding: 14px 18px;
  cursor: pointer;
}

.home-service-connections > summary span {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
}

.service-connections-body { padding: 0 18px 18px; }
.service-connections-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.service-connections-grid article {
  min-width: 0;
  padding: 14px;
  border: 1px solid #d4dfd7;
  border-radius: 10px;
  background: #fff;
}
.service-connections-grid h3 { margin: 0 0 10px; font-size: 1rem; }
.service-connections-body p { line-height: 1.65; }
.service-connections-body a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #146c43;
  font-weight: 700;
}
.service-connections-actions { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; }
.service-connections-safety { margin-bottom: 0; font-size: 0.85rem; }
.home-service-connections > summary:focus-visible,
.service-connections-body a:focus-visible { outline: 3px solid #146c43; outline-offset: 3px; }
@media (max-width: 980px) {
  .service-connections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .service-connections-grid { grid-template-columns: minmax(0, 1fr); }
}

.contact-channel-summary-field {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.contact-channel-summary-field > span {
  font-weight: 750;
  color: #294b3a;
}

.contact-channel-summary-field > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-height: 3rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border: 1px solid #b8c9bf;
  border-radius: 10px;
  background: #fff;
}

.contact-channel-summary-field strong {
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: #dcefe3;
  color: #175f3d;
}

.contact-channel-summary-field > a {
  justify-self: start;
  font-weight: 800;
  color: #146c43;
}

@media (max-width: 720px) {
  .channel-bind-form button,
  .channel-remove-form button {
    width: 100%;
    min-height: 3.4rem;
  }
}