@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --bg: #f4f7f5;
  --surface: #ffffff;
  --surface-soft: #eef3f0;
  --ink: #1f2523;
  --muted: #66706b;
  --line: #d9e1dc;
  --primary: #0f5f55;
  --primary-2: #c65445;
  --accent: #7b8f22;
  --accent-2: #2f67a5;
  --danger: #b23b43;
  --warn: #a17416;
  --info: #315e9e;
  --ok: #16705a;
  --table-row-hover: #edf5f1;
  --table-row-hover-line: #c7ddd3;
  --shadow: 0 16px 38px rgba(40, 37, 34, 0.1);
  --radius: 8px;
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: linear-gradient(180deg, #f8faf8 0, #eef4f1 360px, var(--bg) 100%);
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 0;
}

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

button {
  border: 0;
  cursor: pointer;
}

button:disabled,
select:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

a {
  color: inherit;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr) minmax(220px, auto);
  align-items: center;
  gap: 12px;
  padding: 8px clamp(14px, 2.6vw, 26px);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

/* Unified local and Lingmao sample browser */
.quick-lookup-scopes {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.quick-lookup-scope {
  flex: 0 0 auto;
  min-height: 36px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.quick-lookup-scope.active { border-bottom-color: var(--accent); color: var(--accent); }
.quick-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quick-result-heading h3, .quick-result-heading .sample-name { min-width: 0; margin: 0; }

.source-badge {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 850;
}

.source-badge.lingmao { border-color: rgba(47, 103, 165, 0.22); background: #edf4fb; color: #2f67a5; }
.source-badge.local { border-color: rgba(22, 112, 90, 0.22); background: #eaf6f1; color: #16705a; }
.quick-result-statuses { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.quick-result-statuses span { border-radius: 4px; background: var(--surface-soft); color: var(--muted); padding: 3px 6px; font-size: 11px; font-weight: 750; }
.quick-lookup-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 4px; color: var(--muted); font-size: 12px; font-weight: 750; }
.lingmao-sample-detail-modal .modal-body { display: grid; gap: 18px; }

.lingmao-sample-hero {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.lingmao-sample-photo {
  display: grid;
  place-items: center;
  width: 148px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 34px;
  font-weight: 850;
}

.lingmao-sample-photo img { width: 100%; height: 100%; object-fit: contain; }
.lingmao-sample-identity > strong { display: block; margin-top: 5px; color: var(--accent-2); font-size: 18px; }
.lingmao-sample-identity > p { margin: 5px 0 0; color: var(--muted); }
.lingmao-sample-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.lingmao-sample-kpis span { display: grid; gap: 2px; border-left: 3px solid var(--line-strong); padding-left: 8px; color: var(--muted); font-size: 12px; }
.lingmao-sample-kpis b { color: var(--ink); font-size: 20px; }
.lingmao-detail-section { display: grid; gap: 10px; }
.lingmao-detail-section > h3, .lingmao-detail-section .panel-title h3 { margin: 0; font-size: 16px; }
.lingmao-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.lingmao-detail-grid p { display: grid; gap: 4px; min-width: 0; margin: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px; }
.lingmao-detail-grid span { color: var(--muted); font-size: 11px; }
.lingmao-detail-grid strong { overflow-wrap: anywhere; font-size: 13px; }
.lingmao-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lingmao-detail-table th, .lingmao-detail-table td { border-bottom: 1px solid var(--line); padding: 8px 9px; text-align: left; }
.lingmao-detail-table th { background: var(--surface-soft); color: var(--muted); }
.lingmao-development-list { display: grid; gap: 7px; }
.lingmao-development-list article { border-left: 4px solid #2f67a5; background: var(--surface-soft); padding: 9px 11px; }
.lingmao-development-list article > div, .lingmao-document-list p { display: flex; justify-content: space-between; gap: 10px; }
.lingmao-development-list p, .lingmao-document-list p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.linked-local-samples { display: flex; flex-wrap: wrap; gap: 7px; }

@media (max-width: 780px) {
  .lingmao-sample-hero { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .lingmao-sample-photo { width: 88px; }
  .lingmao-sample-kpis { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lingmao-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-lookup-pagination { justify-content: space-between; }
}

.brand-mark {
  display: inline-grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 8px;
  background:
    linear-gradient(135deg, #fff3df, #ffd1a8 52%, #f08b6c);
  color: #67362b;
  font-weight: 800;
  box-shadow:
    inset 0 0 0 1px rgba(164, 95, 55, 0.16),
    0 8px 18px rgba(164, 95, 55, 0.12);
}

.brand-logo {
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand h1 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.brand p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.operator {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 230px;
  gap: 10px;
}

.sync-status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(217, 225, 220, 0.86);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.82);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.sync-status i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

.sync-status.sync-ok {
  color: var(--ok);
}

.sync-status.sync-loading {
  color: var(--info);
}

.sync-status.sync-loading i {
  animation: sync-pulse 0.9s ease-in-out infinite;
}

.sync-status.sync-error {
  color: var(--danger);
}

.mobile-account-menu-button {
  display: none;
  flex: 0 0 auto;
}

@keyframes sync-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.88);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.workspace-context {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 12px;
}

.workspace-context-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.workspace-context-eyebrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.workspace-context-copy strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.workspace-context-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.operator label,
.field label,
.mini-label {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.operator select,
.field input,
.field select,
.field textarea,
.scan-input,
.search-input {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefa;
  color: var(--ink);
  padding: 5px 10px;
  outline: none;
}

.field textarea {
  min-height: 48px;
  resize: vertical;
}

.field input[type="file"] {
  padding: 3px 10px 3px 4px;
}

.field input[type="file"]::file-selector-button {
  min-height: 26px;
  margin-right: 8px;
  border: 1px solid rgba(186, 75, 63, 0.28);
  border-radius: 7px;
  background: #f07e5e;
  color: #fffefa;
  padding: 4px 10px;
  font-weight: 800;
  cursor: pointer;
}

.field input[type="file"]::file-selector-button:hover {
  background: #d8644a;
  border-color: rgba(186, 75, 63, 0.45);
}

.field input[type="file"]:disabled::file-selector-button {
  cursor: not-allowed;
  background: #d9d0c2;
  color: #776c60;
  border-color: rgba(117, 82, 54, 0.14);
}

.field-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.field-action-row .btn {
  min-height: 32px;
  padding: 6px 10px;
  white-space: nowrap;
}

.autocomplete-layer {
  position: fixed;
  z-index: 1200;
  display: grid;
  gap: 4px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(117, 82, 54, 0.2);
  border-radius: 10px;
  background: rgba(255, 254, 250, 0.98);
  box-shadow: 0 18px 48px rgba(61, 43, 31, 0.18);
}

.autocomplete-option {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.autocomplete-option strong {
  font-size: 13px;
  line-height: 1.2;
}

.autocomplete-option span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.autocomplete-option:hover,
.autocomplete-option.active {
  background: linear-gradient(135deg, rgba(255, 225, 181, 0.9), rgba(248, 122, 88, 0.14));
}

.operator select:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.scan-input:focus,
.search-input:focus {
  border-color: var(--primary-2);
  box-shadow: 0 0 0 3px rgba(186, 75, 63, 0.14);
}

.auth-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(480px, 0.9fr);
  background:
    linear-gradient(90deg, #fff1df 0 52%, #f7f4ef 52% 100%);
}

.auth-intro {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  gap: 24px;
  min-height: 100vh;
  padding: clamp(44px, 7vw, 96px);
  background:
    linear-gradient(135deg, rgba(255, 244, 222, 0.96), rgba(255, 207, 168, 0.9) 44%, rgba(255, 237, 208, 0.95)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='980' height='760' viewBox='0 0 980 760'%3E%3Crect width='980' height='760' fill='%23fff1df'/%3E%3Cpath d='M0 0h980v178H0z' fill='%23f6b27d' fill-opacity='.28'/%3E%3Cpath d='M0 574h980v186H0z' fill='%23ffcf9f' fill-opacity='.38'/%3E%3Cpath d='M700 0h280v760H700z' fill='%23ffd789' fill-opacity='.28'/%3E%3Cpath d='M0 0h980M0 152h980M0 304h980M0 456h980M0 608h980M162 0v760M324 0v760M486 0v760M648 0v760M810 0v760' stroke='%23a6583a' stroke-opacity='.07'/%3E%3Cg fill='none' stroke='%239b563c' stroke-opacity='.2' stroke-width='2'%3E%3Cpath d='M108 126h256l60 90-76 50v280H180V266l-76-50 4-90z'/%3E%3Cpath d='M574 92h194l48 72-60 40v218H586V204l-60-40 48-72z'/%3E%3Cpath d='M496 472h252l66 84-78 50v86H510v-86l-78-50 64-84z'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.35'%3E%3Cpath d='M104 126h260l-40 74H144z'/%3E%3Cpath d='M574 92h194l-34 56H608z'/%3E%3C/g%3E%3Cpath d='M78 642c104-44 206-42 306 8 90 46 186 48 288 8' fill='none' stroke='%23d98b3e' stroke-opacity='.42' stroke-width='4'/%3E%3C/svg%3E");
  background-size: cover, min(980px, 112vw);
  background-position: center;
  color: #4a2f25;
}

.auth-intro::before {
  content: "";
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(154, 86, 60, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    0 18px 58px rgba(164, 95, 55, 0.11);
  border-radius: 8px;
  pointer-events: none;
}

.auth-brand,
.auth-flow,
.auth-stats {
  position: relative;
  z-index: 1;
}

.auth-brand {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  max-width: 700px;
}

.auth-brand .brand-mark {
  background: #fffefa;
  color: #8e3f2f;
  box-shadow: 0 10px 26px rgba(164, 95, 55, 0.16);
}

.auth-brand .brand-logo {
  background: transparent;
  box-shadow: none;
}

.auth-brand h1 {
  margin: 0;
  color: #4a2f25;
  font-size: clamp(36px, 4.3vw, 58px);
  line-height: 1.08;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.auth-brand p {
  max-width: 660px;
  margin: 12px 0 0;
  color: rgba(74, 47, 37, 0.82);
  font-size: 17px;
  line-height: 1.75;
}

.auth-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 700px;
}

.auth-flow span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid rgba(154, 86, 60, 0.18);
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.42);
  color: #6a3d2f;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(164, 95, 55, 0.08);
}

.auth-flow span:nth-child(2) {
  background: rgba(255, 214, 188, 0.72);
}

.auth-flow span:nth-child(3) {
  background: rgba(255, 225, 157, 0.72);
}

.auth-flow span:nth-child(4) {
  background: rgba(255, 242, 199, 0.76);
}

.auth-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 700px;
}

.auth-stat {
  min-height: 94px;
  border: 1px solid rgba(154, 86, 60, 0.2);
  border-radius: 8px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    0 10px 28px rgba(164, 95, 55, 0.1);
}

.auth-stat strong {
  display: block;
  color: #7f3f2f;
  font-size: 29px;
  line-height: 1.1;
}

.auth-stat span {
  display: block;
  margin-top: 7px;
  color: rgba(74, 47, 37, 0.76);
  font-size: 12px;
  font-weight: 650;
}

.auth-side {
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: 100vh;
  padding: clamp(24px, 5vw, 72px);
}

.auth-panel {
  width: min(500px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.97);
  box-shadow: 0 22px 60px rgba(40, 37, 34, 0.16);
  padding: 22px;
}

.auth-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
}

.auth-panel-head strong {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 10px;
  background: #f2e8d5;
  color: var(--primary);
  font-size: 12px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 18px;
  padding: 4px;
  border-radius: 8px;
  background: #eee9df;
}

.auth-tab {
  min-height: 42px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.auth-tab.active {
  background: #fffdf8;
  color: var(--primary);
  box-shadow: 0 5px 14px rgba(40, 37, 34, 0.09);
}

.auth-title {
  margin-bottom: 16px;
}

.auth-title h2 {
  margin: 0;
  font-size: 27px;
  line-height: 1.18;
}

.auth-title p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.auth-form {
  display: grid;
  gap: 0;
}

.auth-submit {
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
}

.demo-accounts {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

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

.demo-password {
  color: var(--primary-2);
  font-size: 12px;
  font-weight: 750;
}

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

.demo-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f3efe6;
  padding: 9px;
  color: var(--muted);
  font-size: 12px;
  text-align: left;
}

.demo-item:hover,
.demo-item:focus-visible,
.demo-item.is-selected {
  border-color: rgba(186, 75, 63, 0.32);
  background: #f7eadf;
  box-shadow: 0 0 0 3px rgba(186, 75, 63, 0.12);
  outline: none;
}

.demo-item:active {
  transform: translateY(1px);
}

.demo-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: #fffdf8;
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(186, 75, 63, 0.14);
}

.demo-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.demo-item strong {
  display: block;
  color: var(--ink);
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-item span span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-footnote {
  margin: 12px 0 0;
}

.account-summary {
  display: grid;
  min-width: 0;
  text-align: right;
}

.account-name {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-role {
  color: var(--muted);
  font-size: 12px;
}

.shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 18px;
  padding: 18px clamp(16px, 3vw, 32px) 96px;
  transition: grid-template-columns 0.18s ease, gap 0.18s ease;
}

.app-view.nav-collapsed .shell {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
}

.side-nav {
  position: sticky;
  top: 78px;
  align-self: start;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(217, 225, 220, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  transition: padding 0.18s ease, width 0.18s ease;
}

.nav-items {
  display: grid;
  gap: 8px;
}

.nav-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 34px;
  gap: 7px;
  border: 1px solid rgba(222, 215, 202, 0.86);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.72);
  color: var(--muted);
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 800;
}

.nav-collapse-toggle:hover,
.nav-collapse-toggle:focus-visible {
  border-color: rgba(186, 75, 63, 0.24);
  background: #fffefa;
  color: var(--primary);
  outline: none;
}

.nav-collapse-icon {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 6px;
  background: #f4efe5;
  line-height: 1;
}

.side-nav.is-collapsed {
  padding: 8px;
}

.side-nav.is-collapsed .nav-collapse-toggle {
  padding: 6px;
}

.side-nav.is-collapsed .nav-collapse-text,
.side-nav.is-collapsed .nav-text {
  display: none;
}

.side-nav.is-collapsed .nav-button {
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 44px;
  padding: 7px;
}

.side-nav.is-collapsed .nav-divider {
  margin: 4px 2px;
}

.nav-divider {
  height: 1px;
  margin: 4px 8px;
  background: var(--line);
}

.nav-profile {
  margin-top: 2px;
}

.nav-button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 48px;
  gap: 10px;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  padding: 8px 12px;
  text-align: left;
}

.nav-button:hover,
.nav-button.active {
  background: #eef5f1;
  box-shadow: none;
}

.nav-icon {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: #f4efe5;
  color: var(--primary);
  font-weight: 700;
}

.nav-items .nav-button:nth-child(3n + 1) .nav-icon,
.bottom-nav .nav-button:nth-child(3n + 1) .nav-icon {
  color: var(--primary-2);
}

.nav-items .nav-button:nth-child(3n + 2) .nav-icon,
.bottom-nav .nav-button:nth-child(3n + 2) .nav-icon {
  color: var(--accent-2);
}

.nav-button.active .nav-icon {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(15, 95, 85, 0.2);
}

.nav-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.workspace {
  min-width: 0;
}

@media (min-width: 1041px) {
  body.dashboard-view-active {
    overflow: hidden;
  }

  body.dashboard-view-active .app-view {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    overflow: hidden;
  }

  body.dashboard-view-active .topbar {
    position: relative;
    top: auto;
  }

  .app-view.view-dashboard .shell {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .app-view.view-dashboard .side-nav {
    position: static;
    max-height: 100%;
    overflow: hidden;
  }

  .workspace-dashboard {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
}

@media (min-width: 1041px) {
  body.data-view-active {
    overflow: hidden;
  }

  body.data-view-active .app-view {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    overflow: hidden;
  }

  body.data-view-active .topbar {
    position: relative;
    top: auto;
  }

  body.data-view-active .shell {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  body.data-view-active .side-nav {
    position: static;
    max-height: 100%;
    overflow: hidden;
  }

  body.data-view-active .workspace {
    display: grid;
    align-content: stretch;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    gap: 7px;
  }

  body.data-view-active .workspace-inbound,
  body.data-view-active .workspace-return,
  body.data-view-active .workspace-settlement {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  body.data-view-active .workspace-transfer,
  body.data-view-active .workspace-ledger {
    grid-template-rows: auto minmax(0, 1fr);
  }

  body.data-view-active .workspace-ledger {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  body.data-view-active .workspace > .band,
  body.data-view-active .module-tabs-band {
    margin-bottom: 0;
  }

  body.data-view-active .view-head {
    align-items: start;
    gap: 8px;
    min-height: 0;
    margin-bottom: 0;
  }

  body.data-view-active .view-head h2 {
    font-size: 21px;
    line-height: 1.05;
  }

  body.data-view-active .view-head h2::after {
    margin-top: 4px;
  }

  body.data-view-active .view-head p {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.25;
  }

  body.data-view-active .head-actions {
    gap: 6px;
  }

  body.data-view-active .head-actions .btn {
    min-height: 30px;
    padding: 5px 10px;
  }

  body.data-view-active .module-tabs {
    gap: 6px;
    padding: 3px;
  }

  body.data-view-active .module-tab {
    gap: 1px;
    min-height: 40px;
    padding: 5px 10px;
  }

  body.data-view-active .module-tab span {
    font-size: 14px;
    line-height: 1.15;
  }

  body.data-view-active .module-tab strong {
    font-size: 11px;
    line-height: 1.15;
  }

  body.data-view-active .list-surface {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding-top: 0;
  }

  body.data-view-active .primary-list-surface {
    min-height: 0;
  }

  body.data-view-active .secondary-list-surface {
    min-height: 0;
    margin-top: 0;
    padding-top: 0;
  }

  body.data-view-active .list-surface > .panel-title {
    flex: 0 0 auto;
    margin-bottom: 5px;
    padding: 0 2px;
  }

  body.data-view-active .list-surface > .panel-title h3 {
    font-size: 17px;
    line-height: 1.12;
  }

  body.data-view-active .list-surface > .panel-title p {
    margin-top: 1px;
    font-size: 12px;
    line-height: 1.2;
  }

  body.data-view-active .list-toolbar {
    flex: 0 0 auto;
    gap: 5px 8px;
    margin-bottom: 6px;
    padding: 4px;
  }

  body.data-view-active .list-search input {
    min-height: 32px;
    padding: 5px 10px;
  }

  body.data-view-active .pager {
    flex: 0 0 auto;
    margin-top: 6px;
    padding: 0;
  }

  body.data-view-active .list-scroll-region {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  body.data-view-active .list-scroll-region > .table-wrap.desktop-only {
    display: block;
    height: 100%;
    overflow: auto;
  }

  body.data-view-active .list-scroll-region > .empty {
    display: grid;
    min-height: 100%;
    place-items: center;
  }
}

.view-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}

.view-head-actions-only {
  min-height: 0;
}

.view-head-actions-only .head-actions {
  margin-left: auto;
}

.view-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 25px;
}

.view-head h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--primary);
}

.view-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

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

.band {
  margin-bottom: 14px;
}

.grid {
  display: grid;
  gap: 14px;
}

.grid > *,
.panel,
.card,
.empty {
  min-width: 0;
}

.grid.kpis {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

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

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

.module-tabs-band {
  margin-top: -4px;
}

.module-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(244, 239, 229, 0.78);
}

.module-tab {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 48px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  text-align: left;
}

.module-tab span {
  color: var(--ink);
  font-weight: 800;
}

.module-tab strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.module-tab.active {
  border-color: rgba(219, 108, 79, 0.28);
  background:
    linear-gradient(135deg, rgba(255, 244, 225, 0.96), rgba(255, 224, 202, 0.88));
  box-shadow: 0 10px 22px rgba(189, 79, 69, 0.1);
}

.module-tab.active strong {
  color: var(--primary-2);
}

.inbound-tab-grid {
  grid-template-columns: minmax(320px, 0.86fr) minmax(0, 1.14fr);
}

.panel,
.card,
.empty {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.panel {
  position: relative;
  padding: 12px;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(180deg, var(--primary-2), var(--accent), var(--accent-2));
  opacity: 0.72;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-title h3 {
  margin: 0;
  font-size: 17px;
}

.panel-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.taobao-import {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.taobao-import .import-title {
  margin-bottom: 10px;
}

.taobao-import-grid {
  grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 2fr);
}

.kpi {
  position: relative;
  display: grid;
  align-content: start;
  gap: 3px;
  overflow: hidden;
  min-height: 92px;
  padding: 13px 15px;
}

.kpi::after {
  display: none;
}

.kpi .value {
  margin: 2px 0 0;
  font-size: 29px;
  line-height: 1.05;
  font-weight: 800;
}

.kpi .label {
  color: var(--muted);
  line-height: 1.2;
}

.kpi .hint {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.kpi .hint-info {
  color: var(--accent-2);
}

.kpi .hint-danger {
  color: var(--danger);
}

.kpi .hint-warn {
  color: var(--warn);
}

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

.stage-progress {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(56px, 1fr) 38px;
  gap: 6px;
  min-width: 0;
}

.stage-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: #eef3ef;
  overflow: hidden;
}

.stage-progress-bar span {
  display: block;
  height: 100%;
  background: var(--primary-2);
}

.stage-progress.good .mini-label {
  color: var(--ok);
}

.stage-progress.warn .mini-label {
  color: var(--warn);
}

.stage-progress.bad .mini-label {
  color: var(--danger);
}

.stage-progress.neutral .stage-progress-bar span {
  background: var(--accent-2) !important;
}

.stage-table-wrap {
  overflow: visible;
}

.stage-table-wrap table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.stage-table-wrap th,
.stage-table-wrap td {
  padding: 9px 10px;
}

.stage-table-wrap th:nth-child(1),
.stage-table-wrap td:nth-child(1) {
  width: 38%;
}

.stage-table-wrap th:nth-child(2),
.stage-table-wrap td:nth-child(2) {
  width: 58px;
  text-align: center;
}

.stage-table-wrap th:nth-child(3),
.stage-table-wrap td:nth-child(3) {
  width: auto;
}

.stage-table-wrap td:first-child {
  overflow-wrap: anywhere;
}

.stage-table-wrap .mini-label {
  font-weight: 800;
  text-align: right;
}

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

.field {
  display: grid;
  gap: 3px;
}

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

.field.span-3 {
  grid-column: span 3;
}

.inbound-assist {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed rgba(170, 128, 80, 0.34);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 246, 231, 0.78), rgba(255, 252, 246, 0.96));
}

.inbound-assist-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inbound-assist-bar > div:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.inbound-assist-bar strong {
  font-size: 14px;
}

.inbound-assist-bar span,
.assist-empty {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.inbound-assist-results {
  display: grid;
  gap: 7px;
}

.assist-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(181, 147, 104, 0.3);
  border-radius: 8px;
  background: rgba(255, 254, 250, 0.84);
}

.assist-card.pending {
  border-color: rgba(219, 108, 79, 0.34);
  background: linear-gradient(135deg, rgba(255, 239, 219, 0.9), rgba(255, 253, 248, 0.92));
}

.assist-main {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.assist-main strong,
.assist-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.assist-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  gap: 8px;
  border-radius: 8px;
  padding: 6px 11px;
  border: 1px solid transparent;
  background: var(--surface-soft);
  color: var(--ink);
  font-weight: 650;
}

.btn.primary {
  background: linear-gradient(135deg, #f08a63, #db6c4f 55%, #bd4f45);
  color: #fff;
  box-shadow: 0 10px 22px rgba(189, 79, 69, 0.18);
}

.btn.secondary {
  border-color: #d9d1c2;
  background: #f4efe5;
  color: var(--primary);
}

.btn.danger {
  background: #f4dede;
  color: var(--danger);
}

.btn.link {
  min-height: auto;
  padding: 0;
  background: transparent;
  color: var(--primary-2);
}

.table-actions {
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
}

.btn.action-btn {
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 9px;
  border-color: transparent;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}

.btn.action-view {
  border-color: rgba(49, 94, 158, 0.2);
  background: #e8eef8;
  color: #294f86;
}

.btn.action-print {
  border-color: rgba(180, 138, 45, 0.24);
  background: #fff0c8;
  color: #7a5510;
}

.btn.action-arrive {
  border-color: rgba(58, 159, 124, 0.2);
  background: #e1f3ec;
  color: #166d56;
}

.btn.action-delete {
  border-color: rgba(178, 59, 67, 0.22);
  background: #f7e2e2;
  color: var(--danger);
}

.btn.action-settle {
  border-color: rgba(22, 112, 90, 0.2);
  background: linear-gradient(135deg, #3a9f7c, #16705a);
  color: #fff;
  box-shadow: 0 8px 16px rgba(22, 112, 90, 0.14);
}

.btn.action-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn.icon {
  width: 40px;
  padding: 0;
}

.list-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 8px;
}

.list-toolbar-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.list-search {
  position: relative;
  flex: 1 1 320px;
  max-width: none;
}

.list-search input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 8px 12px;
}

.list-search input:focus {
  border-color: rgba(186, 75, 63, 0.48);
  box-shadow: 0 0 0 3px rgba(186, 75, 63, 0.1);
  outline: none;
}

.list-search-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.list-toolbar-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.list-count {
  flex: 0 0 auto;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.filter-chip-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  gap: 6px;
  border: 1px solid rgba(15, 95, 85, 0.18);
  border-radius: 999px;
  background: #eef6f2;
  color: var(--primary);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 750;
}

.filter-chip b {
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 999px;
  background: rgba(15, 95, 85, 0.12);
  line-height: 1;
}

.filter-chip:hover {
  border-color: rgba(15, 95, 85, 0.32);
  background: #e4f1eb;
}

.search-hit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.search-hit-tag {
  display: inline-flex;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid rgba(15, 95, 85, 0.14);
  border-radius: 999px;
  background: #f1f8f4;
  color: var(--primary);
  padding: 2px 6px;
  font-weight: 700;
}

.timeline-item .search-hit {
  margin-top: 6px;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 0;
}

.pager-summary {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
}

.pager-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.pager-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.pager-current {
  display: none;
}

.pager-btn {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefa;
  color: var(--ink);
  padding: 6px 10px;
  font-weight: 700;
}

.pager-btn.active {
  border-color: rgba(219, 108, 79, 0.38);
  background: #ffe1cf;
  color: #7f3f2f;
}

.pager-btn:disabled {
  color: var(--muted);
}

.page-size-control,
.page-jump {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.page-size-control select,
.page-jump input {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefa;
  color: var(--ink);
  padding: 4px 8px;
}

.page-size-control select {
  min-width: 64px;
}

.page-jump input {
  width: 58px;
  text-align: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 10px;
  background: #f1ece2;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.pill.ok {
  background: #dceee8;
  color: var(--ok);
}

.pill.warn {
  background: #f5e8c5;
  color: #7d5a08;
}

.pill.danger {
  background: #f5dddd;
  color: var(--danger);
}

.pill.info {
  background: #e3e9f6;
  color: var(--info);
}

.source-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.source-web-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  gap: 6px;
  border: 1px solid rgba(44, 108, 177, 0.28);
  border-radius: 8px;
  background: #eaf2fb;
  color: #1f5f9f;
  padding: 5px 10px;
  font-weight: 800;
  text-decoration: none;
}

.source-web-link:hover,
.source-web-link:focus-visible {
  border-color: rgba(44, 108, 177, 0.52);
  background: #dcecf9;
  box-shadow: 0 0 0 3px rgba(44, 108, 177, 0.12);
  outline: none;
}

.table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.table-wrap.stage-table-wrap {
  overflow: visible;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
  text-align: left;
  vertical-align: middle;
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fbf7ee;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

td {
  font-size: 14px;
}

td.copy-flash {
  outline: 2px solid rgba(58, 159, 124, 0.55);
  outline-offset: -2px;
  background: #edf8f2;
}

tr:last-child td {
  border-bottom: 0;
}

table tbody tr {
  position: relative;
  z-index: 0;
  transition: transform 160ms cubic-bezier(0.2, 0.75, 0.3, 1);
}

table tbody tr > td {
  position: relative;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

table tbody tr > td:first-child::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scaleY(0.35);
  transform-origin: center;
  transition:
    opacity 140ms ease,
    transform 180ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

table tbody tr:focus-within {
  z-index: 1;
  transform: translateY(-1px);
}

table tbody tr:focus-within > td {
  border-bottom-color: var(--table-row-hover-line);
  background: var(--table-row-hover);
  box-shadow:
    inset 0 1px 0 var(--table-row-hover-line),
    inset 0 -1px 0 var(--table-row-hover-line);
}

table tbody tr:focus-within > td:first-child::before {
  opacity: 1;
  transform: scaleY(1);
}

table tbody tr:focus-within .thumb-trigger,
table tbody tr:focus-within .thumb.placeholder,
table tbody tr:focus-within .thumb-upload {
  transform: translateY(-1px) scale(1.025);
  box-shadow: 0 8px 18px rgba(40, 37, 34, 0.13);
}

@media (hover: hover) and (pointer: fine) {
  table tbody tr:hover {
    z-index: 1;
    transform: translateY(-1px);
  }

  table tbody tr:hover > td {
    border-bottom-color: var(--table-row-hover-line);
    background: var(--table-row-hover);
    box-shadow:
      inset 0 1px 0 var(--table-row-hover-line),
      inset 0 -1px 0 var(--table-row-hover-line);
  }

  table tbody tr:hover > td:first-child::before {
    opacity: 1;
    transform: scaleY(1);
  }

  table tbody tr:hover .thumb-trigger,
  table tbody tr:hover .thumb.placeholder,
  table tbody tr:hover .thumb-upload {
    transform: translateY(-1px) scale(1.025);
    box-shadow: 0 8px 18px rgba(40, 37, 34, 0.13);
  }
}

.sample-cell {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 210px;
}

.thumb {
  width: 48px;
  height: 48px;
  border: 1px solid #d2c7b4;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-soft);
  box-shadow: 0 6px 14px rgba(40, 37, 34, 0.08);
}

.thumb-trigger {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 8px;
  background: transparent;
  padding: 0;
}

.thumb-trigger,
.thumb.placeholder,
.thumb-upload {
  transition:
    transform 160ms cubic-bezier(0.2, 0.75, 0.3, 1),
    box-shadow 160ms ease;
}

.thumb-trigger:focus-visible {
  outline: 3px solid rgba(219, 108, 79, 0.24);
  outline-offset: 2px;
}

.thumb.placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.thumb-upload {
  position: relative;
  display: grid;
  grid-template-rows: 18px 14px;
  place-items: center;
  padding: 6px 4px 5px;
  cursor: pointer;
  color: var(--info);
  border-style: dashed;
  background: #eef5fb;
  box-shadow: none;
}

.thumb-upload:hover,
.thumb-upload:focus-within {
  border-color: rgba(44, 108, 177, 0.58);
  background: #e2f0fb;
  outline: 3px solid rgba(44, 108, 177, 0.12);
  outline-offset: 2px;
}

.thumb-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.thumb-upload-plus {
  line-height: 1;
  font-size: 20px;
  font-weight: 900;
}

.thumb-upload-text {
  line-height: 1;
  font-size: 11px;
  font-weight: 850;
}

.image-hover-preview {
  position: fixed;
  z-index: 160;
  width: 300px;
  border: 1px solid rgba(154, 86, 60, 0.22);
  border-radius: 8px;
  background: #fffefa;
  box-shadow: 0 20px 54px rgba(40, 37, 34, 0.2);
  padding: 8px;
  pointer-events: none;
}

.image-hover-preview[hidden] {
  display: none;
}

.image-hover-preview img {
  display: block;
  width: 100%;
  max-height: 320px;
  border-radius: 6px;
  object-fit: contain;
  background: #f7f4ef;
}

.image-hover-preview span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.image-preview-modal {
  display: grid;
  place-items: center;
}

.image-preview-modal img {
  display: block;
  width: min(720px, 100%);
  max-height: min(70vh, 680px);
  border-radius: 8px;
  object-fit: contain;
  background: #f7f4ef;
}

.sample-name {
  overflow: hidden;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sample-meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.scan-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

.scan-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 42px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fffdf8;
}

.scan-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 8px;
  border-radius: 999px;
  background: #f2e8d5;
  padding: 5px 8px 5px 10px;
  font-size: 12px;
  font-weight: 700;
}

.scan-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.scan-chip button {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #fffdf8;
  color: var(--muted);
}

.settlement-retain-panel {
  padding: 12px 14px;
}

.settlement-retain-panel .panel-title {
  margin-bottom: 10px;
}

.settlement-retain-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: 12px;
}

.settlement-scan-area {
  min-width: 0;
}

.settlement-retain-panel .scan-list {
  min-height: 34px;
  padding: 7px 8px;
}

.settlement-retain-form {
  display: grid;
  gap: 9px;
  min-width: 0;
  border: 1px solid rgba(222, 215, 202, 0.76);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 247, 236, 0.78), rgba(255, 253, 248, 0.96));
  padding: 10px;
}

.settlement-retain-form .form-grid {
  grid-template-columns: minmax(120px, 0.72fr) minmax(150px, 0.92fr) minmax(190px, 1.18fr);
  align-items: end;
  gap: 8px;
}

.settlement-retain-form .retain-note {
  grid-column: auto;
}

.settlement-retain-form textarea {
  min-height: 32px;
  max-height: 76px;
}

.settlement-retain-form .btn-row {
  justify-content: flex-end;
}

.settlement-check-head {
  align-items: start;
}

.settlement-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.settlement-summary span {
  min-height: 32px;
  border: 1px solid rgba(222, 215, 202, 0.86);
  border-radius: 8px;
  background: #fff9ef;
  color: var(--muted);
  padding: 6px 10px;
  font-size: 12px;
}

.settlement-summary strong {
  color: #7f3f2f;
}

.settlement-toolbar {
  margin-bottom: 10px;
}

.settlement-table-wrap {
  overflow: visible;
}

.settlement-table {
  min-width: 0;
  table-layout: fixed;
}

.settlement-table th,
.settlement-table td {
  padding: 9px 10px;
}

.settlement-table th:nth-child(1),
.settlement-table td:nth-child(1) {
  width: 54px;
  text-align: center;
}

.settlement-table th:nth-child(2),
.settlement-table td:nth-child(2) {
  width: 34%;
}

.settlement-table th:nth-child(3),
.settlement-table td:nth-child(3) {
  width: 20%;
}

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

.settlement-table th:nth-child(5),
.settlement-table td:nth-child(5) {
  width: 16%;
}

.settlement-table th:nth-child(6),
.settlement-table td:nth-child(6) {
  width: 104px;
}

.settlement-table .sample-cell {
  grid-template-columns: 44px minmax(0, 1fr);
  min-width: 0;
}

.settlement-table .thumb,
.settlement-table .thumb-trigger {
  width: 44px;
  height: 44px;
}

.settlement-table .sample-meta,
.settlement-owner span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
}

.settlement-owner {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.settlement-owner strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barcode-label {
  display: inline-grid;
  gap: 0.04cm;
  width: var(--label-width, 75mm);
  max-width: 100%;
  height: var(--label-height, 30mm);
  box-sizing: border-box;
  border: 1px solid #111;
  border-radius: 0.08cm;
  background: #fff;
  color: #111;
  padding: 0.12cm 0.2cm;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

.barcode-label .code {
  font-size: 8.6pt;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
}

.barcode-label svg {
  width: 100%;
  height: var(--code-graphic-height, 14.2mm);
  display: block;
}

.barcode-label .text {
  display: grid;
  min-width: 0;
  gap: 0.01cm;
  font-size: 5.8pt;
  line-height: 1.08;
}

.barcode-label .text span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barcode-label.is-qr {
  grid-template-columns: minmax(0, 1fr) min(18mm, 42%);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 2.2mm;
}

.barcode-label.is-qr .code {
  grid-column: 1 / -1;
}

.barcode-label.is-qr .qr-code {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.barcode-label.is-qr .text {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
}

.timeline {
  display: grid;
  gap: 10px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
}

.timeline-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 4px rgba(116, 110, 102, 0.08);
}

.timeline-item.event-inbound .timeline-dot {
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(49, 94, 158, 0.1);
}

.timeline-item.event-select .timeline-dot {
  background: #d08435;
  box-shadow: 0 0 0 4px rgba(208, 132, 53, 0.12);
}

.timeline-item.event-transfer .timeline-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(180, 138, 45, 0.12);
}

.timeline-item.event-return .timeline-dot {
  background: var(--danger);
  box-shadow: 0 0 0 4px rgba(178, 59, 67, 0.1);
}

.timeline-item.event-retain .timeline-dot {
  background: #d08435;
  box-shadow: 0 0 0 4px rgba(208, 132, 53, 0.12);
}

.timeline-item.event-settlement .timeline-dot {
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(22, 112, 90, 0.1);
}

.timeline-item.event-print .timeline-dot {
  background: #6b7a90;
  box-shadow: 0 0 0 4px rgba(107, 122, 144, 0.14);
}

.timeline-title {
  font-weight: 750;
}

.timeline-meta {
  color: var(--muted);
  font-size: 12px;
}

.mobile-cards {
  display: none;
}

.record-card {
  display: grid;
  gap: 10px;
  padding: 13px;
}

.record-card .top {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.record-card .facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.empty {
  padding: 26px;
  color: var(--muted);
  background:
    linear-gradient(135deg, rgba(186, 75, 63, 0.05), transparent 32%),
    var(--surface);
  text-align: center;
}

.permission-grid {
  display: grid;
  grid-template-columns: 220px repeat(10, minmax(86px, 1fr)) minmax(110px, 0.8fr);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.permission-grid > div {
  min-height: 42px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
}

.permission-grid .header {
  position: sticky;
  top: 0;
  background: #fbf7ee;
  color: var(--muted);
  font-weight: 800;
}

.permission-grid .role-name {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fffdf8;
  font-weight: 800;
}

.check {
  color: var(--ok);
  font-weight: 900;
}

.check.default {
  color: var(--ok);
}

.check.extra {
  color: var(--accent-2);
}

.check.removed {
  color: var(--primary-2);
}

.check.all {
  color: var(--primary-2);
}

.deny {
  color: var(--muted);
}

.permission-mobile-list {
  display: none;
}

.role-permission-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  padding: 12px;
}

.role-permission-card.active {
  border-color: rgba(186, 75, 63, 0.34);
  background: linear-gradient(135deg, rgba(255, 241, 223, 0.72), #fffdf8);
}

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

.role-card-head strong {
  display: block;
  font-size: 15px;
}

.role-card-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.permission-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.permission-chip {
  border-radius: 999px;
  background: #f3ece0;
  color: #6b4f37;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
}

.permission-chip.all {
  background: #f2dbce;
  color: var(--primary-2);
}

.permission-chip.extra {
  background: #e7eef8;
  color: var(--accent-2);
}

.permission-chip.removed {
  background: #f6e2df;
  color: var(--primary-2);
  text-decoration: line-through;
}

.role-card-action {
  margin-top: 10px;
}

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

.permission-toggle {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  padding: 9px 10px;
}

.permission-toggle.is-default {
  background: #f7f4ee;
}

.permission-toggle.is-removed {
  border-color: rgba(198, 84, 69, 0.34);
  background: #fff7f5;
}

.permission-toggle.is-extra {
  border-color: rgba(47, 103, 165, 0.28);
  background: #f6f9fd;
}

.permission-toggle strong,
.permission-toggle small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-toggle small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.permission-badge {
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.permission-badge.default {
  background: #e8f3ee;
  color: var(--ok);
}

.permission-badge.extra {
  background: #e7eef8;
  color: var(--accent-2);
}

.permission-badge.removed {
  background: #f6e2df;
  color: var(--primary-2);
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.profile-summary-panel,
.profile-forms {
  display: grid;
  gap: 14px;
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.profile-avatar {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 8px;
  background: #e1eee8;
  color: var(--ok);
  font-size: 22px;
  font-weight: 900;
}

.profile-identity h3,
.profile-identity p {
  margin: 0;
}

.profile-identity p {
  margin-top: 3px;
  color: var(--muted);
}

.profile-facts {
  display: grid;
  gap: 0;
  margin: 0;
}

.profile-facts > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(222, 215, 202, 0.72);
}

.profile-facts dt {
  color: var(--muted);
}

.profile-facts dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 750;
}

.profile-permissions {
  padding-top: 0;
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(330px, 0.78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: 14px;
  max-width: 1320px;
}

.settings-left-column {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.settings-account-panel,
.settings-entry-panel,
.settings-permissions-panel {
  min-width: 0;
}

.settings-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.settings-panel-head h3,
.settings-panel-head p {
  margin: 0;
}

.settings-panel-head h3 {
  color: var(--ink);
  font-size: 18px;
}

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

.settings-account-head {
  align-items: center;
}

.settings-account-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.settings-profile-identity {
  align-items: flex-start;
  padding: 12px;
  border: 1px solid rgba(222, 215, 202, 0.78);
  border-radius: 8px;
  background: rgba(248, 251, 249, 0.86);
}

.settings-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.settings-facts > div:last-child {
  border-bottom: 0;
}

.settings-control-panel {
  align-self: start;
}

.settings-permission-chips {
  max-height: 116px;
  overflow: auto;
  padding-right: 2px;
}

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

.settings-action-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  min-height: 138px;
  padding: 14px;
  border: 1px solid rgba(194, 176, 145, 0.52);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.82);
}

.settings-action-card-wide {
  grid-column: 1 / -1;
  min-height: 112px;
}

.settings-action-card strong {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 17px;
}

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

.settings-action-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.settings-action-foot .btn {
  flex: 0 0 auto;
}

.account-manager {
  display: grid;
  gap: 14px;
}

.account-manager-summary {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.account-manager-summary strong {
  color: var(--ink);
  font-size: 17px;
}

.account-manager-summary p,
.account-create-form .form-intro {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.account-manager-table-wrap {
  max-height: min(52vh, 520px);
  overflow: auto;
  border: 1px solid rgba(222, 215, 202, 0.86);
  border-radius: 8px;
}

.account-manager-table {
  width: 100%;
  border-collapse: collapse;
}

.account-manager-table th,
.account-manager-table td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(222, 215, 202, 0.72);
  text-align: left;
  vertical-align: middle;
}

.account-manager-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
}

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

.account-manager-table td:first-child strong,
.account-manager-table td:first-child span {
  display: block;
}

.account-manager-table td:first-child span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.account-manager-table .empty-cell {
  padding: 32px 14px;
  color: var(--muted);
  text-align: center;
}

.account-manager-table .account-role-button {
  min-height: 34px;
  padding: 6px 10px;
  white-space: nowrap;
}

.supplier-manager {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  height: 100%;
}

.supplier-manager-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.supplier-search-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.supplier-manager-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.supplier-import-button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.supplier-import-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.supplier-manager-count {
  flex: 0 0 auto;
}

.supplier-manager-table-wrap {
  flex: 0 0 auto;
  height: clamp(320px, 52vh, 520px);
  max-height: none;
  overflow: auto;
}

.supplier-manager .filter-chip-row {
  flex: 0 0 auto;
}

.supplier-manager .pager {
  flex: 0 0 auto;
}

.supplier-manager-table code {
  display: inline-flex;
  max-width: 180px;
  padding: 4px 7px;
  border: 1px solid rgba(222, 215, 202, 0.86);
  border-radius: 6px;
  background: rgba(255, 252, 246, 0.9);
  color: var(--ink);
  font-size: 12px;
  white-space: nowrap;
}

.supplier-row-actions {
  flex-wrap: nowrap;
}

.handoff-center-entry {
  gap: 8px;
}

.btn-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(226, 117, 82, 0.14);
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.handoff-center-modal .modal-body {
  display: flex;
  min-height: min(64vh, 600px);
  padding: 0;
}

.handoff-center {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  min-height: 0;
}

.handoff-center-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(248, 245, 238, 0.76);
}

.handoff-center-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid rgba(222, 215, 202, 0.86);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.86);
  color: var(--muted);
  font-weight: 700;
}

.handoff-center-tab strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 13px;
}

.handoff-center-tab strong em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #b83f4a;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  line-height: 1;
}

.handoff-center-tab.has-alert {
  border-color: rgba(184, 63, 74, 0.34);
}

.handoff-center-tab.active {
  border-color: rgba(38, 105, 90, 0.4);
  background: rgba(230, 245, 240, 0.86);
  color: var(--accent);
}

.handoff-center-panel {
  min-height: 0;
  padding: 14px 16px 16px;
  overflow: auto;
}

.handoff-center-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.handoff-center-panel-head h4 {
  margin: 0 0 3px;
  font-size: 17px;
}

.handoff-center-panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.handoff-inbox-surface {
  border-color: rgba(226, 117, 82, 0.28);
}

.handoff-outbox-surface {
  border-color: rgba(38, 105, 90, 0.24);
  background: linear-gradient(180deg, rgba(244, 251, 248, 0.92), rgba(255, 252, 246, 0.94));
}

.handoff-returned-surface {
  border-color: rgba(222, 105, 81, 0.22);
  background: linear-gradient(180deg, rgba(255, 248, 246, 0.84), rgba(255, 252, 246, 0.94));
}

.handoff-sent-card {
  background: rgba(255, 255, 255, 0.74);
}

.handoff-returned-card {
  border-color: rgba(222, 105, 81, 0.28);
  background: rgba(255, 249, 247, 0.92);
}

.handoff-returned-item {
  border-color: rgba(222, 105, 81, 0.22);
  background: rgba(255, 255, 255, 0.76);
}

.handoff-sent-note {
  margin: -2px 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.handoff-sent-items {
  display: grid;
  gap: 8px;
}

.handoff-sent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(222, 215, 202, 0.72);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.86);
}

.handoff-sent-item .sample-cell {
  min-width: 0;
}

.handoff-sent-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.handoff-recipient-panel,
.handoff-recipient-empty {
  min-height: 42px;
}

.handoff-recipient-panel {
  display: grid;
  gap: 8px;
}

.handoff-recipient-empty {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px dashed rgba(150, 139, 122, 0.42);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.72);
  color: var(--muted);
}

.handoff-recipient-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
}

.handoff-recipient-toolbar > span {
  color: var(--muted);
  font-size: 13px;
}

.handoff-recipient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.handoff-recipient-option,
.handoff-item-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.handoff-recipient-option {
  position: relative;
  min-width: 0;
  min-height: 58px;
  padding: 8px 38px 8px 10px;
  border: 1px solid rgba(222, 215, 202, 0.86);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.86);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.handoff-recipient-option:has(input:checked) {
  border-color: rgba(226, 117, 82, 0.62);
  background: rgba(255, 244, 235, 0.96);
  box-shadow: inset 0 0 0 1px rgba(226, 117, 82, 0.2);
}

.handoff-recipient-option:has(input:focus-visible) {
  outline: 2px solid rgba(38, 105, 90, 0.4);
  outline-offset: 2px;
}

.handoff-recipient-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.handoff-recipient-avatar {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(38, 105, 90, 0.12);
  color: var(--accent);
  font-weight: 700;
}

.handoff-recipient-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.handoff-recipient-copy strong,
.handoff-recipient-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.handoff-recipient-copy small {
  color: var(--muted);
  font-size: 12px;
}

.handoff-recipient-check {
  position: absolute;
  top: 50%;
  right: 10px;
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(150, 139, 122, 0.34);
  background: rgba(255, 255, 255, 0.78);
  color: transparent;
  transform: translateY(-50%);
}

.handoff-recipient-option:has(input:checked) .handoff-recipient-check {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}

.handoff-list,
.handoff-item-list {
  display: grid;
  gap: 10px;
}

.handoff-card,
.handoff-item-card {
  border: 1px solid rgba(222, 215, 202, 0.86);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.92);
}

.handoff-card {
  padding: 12px;
}

.handoff-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.handoff-card-head div {
  display: grid;
  gap: 2px;
}

.handoff-card-head span:not(.pill) {
  color: var(--muted);
  font-size: 13px;
}

.handoff-item-card {
  padding: 10px;
}

.handoff-item-card .facts {
  margin-top: 8px;
}

.handoff-item-actions {
  justify-content: flex-end;
  margin-top: 10px;
}

.supplier-note-field {
  grid-column: 1 / -1;
}

.account-role-modal .field {
  margin-top: 2px;
}

.account-create-form {
  display: grid;
  gap: 16px;
}

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

.account-create-form .field:first-child {
  grid-column: 1 / -1;
}

.settings-modal .view-head {
  display: none;
}

.settings-modal .band {
  margin-bottom: 14px;
}

.settings-modal .band:last-child {
  margin-bottom: 0;
}

.settings-modal .modal-body {
  padding-top: 14px;
}

.modal-panel.supplier-manager-modal {
  height: min(86vh, 760px);
}

.supplier-manager-modal .modal-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.settings-modal .permission-grid {
  display: none;
}

.settings-modal .permission-mobile-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-modal .role-permission-card {
  min-height: auto;
}

.panel-title.compact {
  margin-bottom: 0;
}

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

.profile-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.print-settings-shell {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: 14px;
  align-items: start;
}

.print-settings-form {
  display: grid;
  gap: 12px;
}

.print-settings-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
}

.print-settings-main {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.85fr);
  gap: 12px;
  min-width: 0;
  align-items: start;
}

.print-setup-panel {
  min-width: 0;
}

.print-template-panel {
  grid-column: 1 / -1;
}

.print-settings-form .field {
  margin-top: 10px;
}

.print-settings-form .field > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.print-setup-facts {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
}

.print-setup-facts > div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(194, 176, 145, 0.42);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.78);
}

.print-setup-facts dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.print-setup-facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 760;
}

.print-profile-grid {
  display: grid;
  gap: 8px;
}

.print-profile-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-height: 62px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefa;
  cursor: pointer;
}

.print-profile-option:hover,
.print-profile-option:focus-within,
.print-profile-option.is-selected {
  border-color: rgba(15, 95, 85, 0.42);
  background: #edf5f1;
}

.print-profile-option input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--ok);
}

.print-profile-option span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.print-profile-option small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.36;
}

.print-browser-note span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.42;
}

.print-browser-note {
  display: grid;
  gap: 3px;
  padding: 9px;
  border-radius: 8px;
  grid-column: 1 / -1;
  border: 1px solid rgba(15, 95, 85, 0.2);
  background: #edf5f1;
}

.print-browser-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 5px;
}

.print-browser-actions .btn {
  min-height: 34px;
}

.print-bridge-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(194, 176, 145, 0.52);
  border-radius: 8px;
  background: #fffefa;
}

.print-bridge-status strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 780;
}

.print-bridge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.print-bridge-actions .btn {
  min-height: 34px;
}

.print-bridge-status[data-status="ok"] {
  border-color: rgba(15, 95, 85, 0.35);
  background: #edf5f1;
}

.print-bridge-status[data-status="error"] {
  border-color: rgba(204, 92, 67, 0.36);
  background: #fff3ed;
}

.print-bridge-status[data-status="checking"] {
  border-color: rgba(196, 143, 53, 0.42);
  background: #fff8e6;
}

.print-bridge-install {
  display: block;
  margin-top: 7px;
  padding: 8px;
  border: 1px solid rgba(194, 176, 145, 0.52);
  border-radius: 8px;
  background: #fffefa;
}

.print-bridge-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.print-bridge-steps li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
}

.print-bridge-steps li:first-child {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
}

.print-bridge-steps .step-index {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #edf5f1;
  color: var(--green-700);
  font-size: 12px;
  font-weight: 820;
}

.print-bridge-steps strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.35;
}

.print-bridge-steps small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 620;
  line-height: 1.45;
}

.print-bridge-install .btn {
  min-height: 34px;
}

.remote-print-panel {
  display: grid;
  gap: 8px;
  margin-top: 9px;
  padding: 10px;
  border: 1px solid rgba(15, 95, 85, 0.22);
  border-radius: 8px;
  background: #f6fbf8;
}

.remote-print-head,
.remote-print-subhead,
.remote-print-client,
.remote-print-job-card,
.remote-print-job-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.remote-print-head strong,
.remote-print-subhead strong,
.remote-print-job-card strong {
  color: var(--ink);
  font-weight: 820;
}

.remote-print-head span,
.remote-print-client small,
.remote-print-job-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.45;
}

.remote-print-client,
.remote-print-job-card,
.remote-print-job-line {
  padding: 8px;
  border: 1px solid rgba(194, 176, 145, 0.45);
  border-radius: 8px;
  background: #fffefa;
}

.remote-print-client.is-online {
  border-color: rgba(15, 95, 85, 0.28);
  background: #edf5f1;
}

.remote-print-warning {
  padding: 8px;
  border: 1px solid rgba(204, 92, 67, 0.32);
  border-radius: 8px;
  background: #fff3ed;
  color: #9f3f2c;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.45;
}

.remote-print-client span,
.remote-print-subhead span,
.remote-print-job-line strong {
  color: var(--green-700);
  font-size: 12px;
  font-weight: 780;
}

.remote-print-jobs,
.remote-print-recent {
  display: grid;
  gap: 7px;
}

.remote-print-jobs > .muted,
.remote-print-recent > .muted {
  margin: 0;
  padding: 8px;
  border: 1px dashed rgba(15, 95, 85, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.btn-row.compact {
  gap: 5px;
  flex-wrap: nowrap;
}

.btn-row.compact .btn {
  min-height: 30px;
  padding-inline: 9px;
}

.print-driver-meta {
  color: #7d5a08;
  font-weight: 720;
  overflow-wrap: anywhere;
}

.label-template-grid,
.label-code-type-grid,
.label-content-options {
  display: grid;
  gap: 8px;
}

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

.label-code-type-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 8px;
}

.label-content-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.label-control-panel .label-content-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.label-template-option,
.label-code-type-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-height: 64px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefa;
  cursor: pointer;
}

.label-template-option:hover,
.label-template-option:focus-within,
.label-code-type-option:hover,
.label-code-type-option:focus-within,
.label-template-option.is-selected,
.label-code-type-option.is-selected {
  border-color: rgba(15, 95, 85, 0.42);
  background: #edf5f1;
}

.label-template-option input,
.label-code-type-option input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--ok);
}

.label-template-option span,
.label-code-type-option span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.label-template-option small,
.label-code-type-option small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.36;
}

.print-preview-panel {
  display: grid;
  align-content: start;
  gap: 10px;
}

.label-control-panel {
  display: grid;
  gap: 8px;
}

.print-preview-head {
  align-items: start;
  gap: 12px;
}

.print-preview-stage {
  display: grid;
  min-height: 190px;
  max-height: 238px;
  place-items: center;
  overflow: auto;
  padding: 12px;
  border: 1px dashed rgba(15, 95, 85, 0.26);
  border-radius: 8px;
  background: #f8fbf8;
}

.label-preview-page {
  width: var(--preview-page-width, 75mm);
  height: var(--preview-page-height, 30mm);
  max-width: 100%;
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(31, 34, 31, 0.32);
  box-shadow: 0 8px 18px rgba(31, 34, 31, 0.08);
}

.label-preview-frame {
  position: absolute;
  inset: 0 auto auto 0;
}

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

.toggle-field {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefa;
}

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

.toggle-field input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--ok);
}

.toggle-field span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.toggle-field strong {
  font-size: 14px;
}

.toggle-field small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}


body.modal-open {
  overflow: hidden;
}

body.scanner-open {
  background: #050505;
}

body.scanner-open #appView,
body.scanner-open #authView,
body.scanner-open #confirmRoot,
body.scanner-open #toastRoot {
  visibility: hidden;
}

.dashboard-workbench-panel {
  min-width: 0;
}

.dashboard-overview-panel {
  min-width: 0;
}

.dashboard-workbench-head {
  align-items: center;
}

.dashboard-workbench-total {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border: 1px solid rgba(15, 95, 85, 0.14);
  border-radius: 999px;
  background: rgba(226, 241, 235, 0.76);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  white-space: nowrap;
}

.dashboard-overview-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.dashboard-overview-stat {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefa;
  padding: 9px 10px;
}

.dashboard-overview-stat span,
.dashboard-overview-stat small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-overview-stat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.dashboard-overview-stat strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.dashboard-overview-stat small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.dashboard-overview-stat.tone-info strong {
  color: var(--info);
}

.dashboard-overview-stat.tone-ok strong {
  color: var(--ok);
}

.dashboard-overview-stat.tone-warn strong {
  color: var(--warn);
}

.dashboard-overview-stat.tone-muted strong {
  color: #58656a;
}

.dashboard-overview-grid {
  display: grid;
  grid-template-columns: minmax(480px, 0.8fr) minmax(360px, 0.7fr);
  gap: 12px;
  align-items: start;
}

.dashboard-workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.9fr);
  gap: 12px;
  align-items: stretch;
}

.dashboard-workbench-column {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  padding: 9px;
}

.dashboard-risk-column {
  align-self: start;
  background: rgba(255, 250, 240, 0.66);
}

.dashboard-lifecycle-column {
  background: rgba(252, 253, 251, 0.86);
}

.dashboard-column-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.dashboard-column-title strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.dashboard-column-title span {
  color: var(--muted);
  font-size: 12px;
}

.dashboard-task-list,
.dashboard-risk-list {
  display: grid;
  gap: 7px;
}

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

.dashboard-lifecycle-list {
  display: grid;
  gap: 6px;
}

.dashboard-lifecycle-row {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(150px, 1fr) minmax(90px, 0.7fr) 70px auto;
  gap: 8px;
  min-width: 0;
  min-height: 46px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.dashboard-lifecycle-row::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: max(var(--fill), 4px);
  min-width: 0;
  border-radius: 8px 0 0 8px;
  background: rgba(64, 112, 170, 0.12);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  content: "";
}

.dashboard-lifecycle-row > * {
  position: relative;
  z-index: 1;
}

.dashboard-lifecycle-row:hover {
  border-color: rgba(15, 95, 85, 0.28);
  background: #f8fbf9;
}

.dashboard-lifecycle-index {
  display: inline-flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: rgba(64, 112, 170, 0.12);
  color: var(--info);
  font-size: 15px;
  font-weight: 900;
}

.dashboard-lifecycle-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.dashboard-lifecycle-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-lifecycle-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-lifecycle-meter {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(224, 231, 228, 0.78);
}

.dashboard-lifecycle-meter::before {
  display: block;
  width: var(--fill);
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  content: "";
}

.dashboard-lifecycle-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.dashboard-lifecycle-value b {
  font-size: 21px;
  line-height: 1;
}

.dashboard-lifecycle-value small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.dashboard-lifecycle-row.tone-info::before,
.dashboard-lifecycle-row.tone-info .dashboard-lifecycle-index {
  background: rgba(64, 112, 170, 0.12);
}

.dashboard-lifecycle-row.tone-info .dashboard-lifecycle-index,
.dashboard-lifecycle-row.tone-info .dashboard-lifecycle-value b {
  color: var(--info);
}

.dashboard-lifecycle-row.tone-info .dashboard-lifecycle-meter::before {
  background: var(--info);
}

.dashboard-lifecycle-row.tone-ok::before,
.dashboard-lifecycle-row.tone-ok .dashboard-lifecycle-index {
  background: rgba(22, 112, 90, 0.12);
}

.dashboard-lifecycle-row.tone-ok .dashboard-lifecycle-index,
.dashboard-lifecycle-row.tone-ok .dashboard-lifecycle-value b {
  color: var(--ok);
}

.dashboard-lifecycle-row.tone-ok .dashboard-lifecycle-meter::before {
  background: var(--ok);
}

.dashboard-lifecycle-row.tone-danger::before,
.dashboard-lifecycle-row.tone-danger .dashboard-lifecycle-index {
  background: rgba(173, 66, 74, 0.12);
}

.dashboard-lifecycle-row.tone-danger .dashboard-lifecycle-index,
.dashboard-lifecycle-row.tone-danger .dashboard-lifecycle-value b {
  color: var(--danger);
}

.dashboard-lifecycle-row.tone-danger .dashboard-lifecycle-meter::before {
  background: var(--danger);
}

.dashboard-lifecycle-row.tone-warn::before,
.dashboard-lifecycle-row.tone-warn .dashboard-lifecycle-index {
  background: rgba(154, 107, 37, 0.12);
}

.dashboard-lifecycle-row.tone-warn .dashboard-lifecycle-index,
.dashboard-lifecycle-row.tone-warn .dashboard-lifecycle-value b {
  color: var(--warn);
}

.dashboard-lifecycle-row.tone-warn .dashboard-lifecycle-meter::before {
  background: var(--warn);
}

.dashboard-lifecycle-row.tone-muted::before,
.dashboard-lifecycle-row.tone-muted .dashboard-lifecycle-index {
  background: rgba(88, 101, 106, 0.12);
}

.dashboard-lifecycle-row.tone-muted .dashboard-lifecycle-index,
.dashboard-lifecycle-row.tone-muted .dashboard-lifecycle-value b {
  color: #58656a;
}

.dashboard-lifecycle-row.tone-muted .dashboard-lifecycle-meter::before {
  background: #8a9698;
}

.dashboard-task-row,
.dashboard-risk-row {
  display: grid;
  min-width: 0;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.dashboard-task-row {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 7px;
  min-height: 42px;
  padding: 6px 8px;
}

.dashboard-risk-row {
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 42px;
  padding: 6px 8px;
}

.dashboard-task-row:hover,
.dashboard-risk-row:hover {
  border-color: rgba(15, 95, 85, 0.28);
  background: #f8fbf9;
}

.dashboard-row-count {
  display: inline-flex;
  min-width: 36px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--surface-soft);
  font-size: 19px;
  font-weight: 850;
  line-height: 1;
}

.dashboard-row-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.dashboard-row-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-row-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-row-action {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  white-space: nowrap;
}

.dashboard-risk-mark {
  width: 8px;
  height: 22px;
  border-radius: 999px;
  background: var(--primary);
}

.dashboard-task-row.tone-danger .dashboard-row-count,
.dashboard-risk-row.tone-danger b {
  color: var(--danger);
}

.dashboard-task-row.tone-warn .dashboard-row-count,
.dashboard-risk-row.tone-warn b {
  color: var(--warn);
}

.dashboard-task-row.tone-ok .dashboard-row-count,
.dashboard-risk-row.tone-ok b {
  color: var(--ok);
}

.dashboard-task-row.tone-info .dashboard-row-count,
.dashboard-risk-row.tone-info b {
  color: var(--info);
}

.dashboard-risk-row.tone-danger .dashboard-risk-mark {
  background: var(--danger);
}

.dashboard-risk-row.tone-warn .dashboard-risk-mark {
  background: var(--warn);
}

.dashboard-risk-row.tone-info .dashboard-risk-mark {
  background: var(--info);
}

.dashboard-risk-row b {
  font-size: 19px;
}

.dashboard-risk-empty {
  min-height: 50px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 14px 12px;
  font-size: 13px;
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.15fr) minmax(380px, 0.85fr);
  align-items: start;
  gap: 14px;
  min-height: 0;
}

@media (min-width: 1041px) {
  .workspace-dashboard .dashboard-main-grid {
    height: max(430px, calc(100vh - 372px));
    margin-bottom: 0;
  }
}

.list-surface {
  min-width: 0;
  padding: 4px 0 0;
}

.list-scroll-region {
  min-width: 0;
}

.list-surface > .panel-title {
  margin-bottom: 10px;
  padding: 0 2px;
}

.primary-list-surface {
  min-height: 420px;
}

.secondary-list-surface {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.dashboard-events-list {
  min-height: 440px;
  min-width: 0;
}

@media (min-width: 1041px) {
  .workspace-dashboard .view-head-actions-only {
    display: none;
  }

  .workspace-dashboard .view-head {
    align-items: start;
    margin-bottom: 8px;
  }

  .workspace-dashboard .view-head h2 {
    font-size: 23px;
    line-height: 1.1;
  }

  .workspace-dashboard .view-head h2::after {
    margin-top: 5px;
  }

  .workspace-dashboard .view-head p {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.35;
  }

  .workspace-dashboard .view-head .head-actions {
    display: none;
  }

  .workspace-dashboard .band {
    margin-bottom: 10px;
  }

  .workspace-dashboard .grid.kpis {
    gap: 10px;
  }

  .workspace-dashboard .kpi {
    min-height: 78px;
    padding: 10px 13px;
  }

  .workspace-dashboard .kpi .value {
    font-size: 27px;
  }

  .workspace-dashboard .panel-title {
    margin-bottom: 8px;
  }

  .workspace-dashboard .panel-title h3 {
    font-size: 16px;
    line-height: 1.2;
  }

  .workspace-dashboard .panel-title p {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.3;
  }

  .workspace-dashboard .dashboard-workbench-panel,
  .workspace-dashboard .dashboard-overview-panel {
    padding: 10px 12px;
  }

  .workspace-dashboard .dashboard-workbench-grid,
  .workspace-dashboard .dashboard-overview-grid {
    gap: 9px;
  }

  .workspace-dashboard .dashboard-workbench-column {
    padding: 7px;
  }

  .workspace-dashboard .dashboard-overview-stats {
    gap: 7px;
    margin-bottom: 9px;
  }

  .workspace-dashboard .dashboard-overview-stat {
    padding: 7px 8px;
  }

  .workspace-dashboard .dashboard-overview-stat strong {
    font-size: 21px;
  }

  .workspace-dashboard .dashboard-overview-stat small {
    font-size: 10px;
  }

  .workspace-dashboard .dashboard-lifecycle-row {
    grid-template-columns: 40px minmax(145px, 1fr) minmax(82px, 0.66fr) 64px auto;
    min-height: 43px;
  }

  .workspace-dashboard .dashboard-lifecycle-copy strong {
    font-size: 14px;
  }

  .workspace-dashboard .dashboard-lifecycle-copy small {
    font-size: 11px;
  }

  .workspace-dashboard .dashboard-lifecycle-value b {
    font-size: 20px;
  }

  .workspace-dashboard .dashboard-task-row,
  .workspace-dashboard .dashboard-risk-row {
    min-height: 38px;
    padding: 5px 8px;
  }

  .workspace-dashboard .dashboard-row-count {
    min-height: 28px;
    font-size: 18px;
  }

  .workspace-dashboard .dashboard-risk-mark {
    height: 22px;
  }

  .workspace-dashboard .dashboard-risk-row b {
    font-size: 17px;
  }

  .workspace-dashboard .dashboard-row-copy small {
    line-height: 1.25;
  }

  .workspace-dashboard .dashboard-events-list {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .workspace-dashboard .dashboard-events-list .timeline-list {
    flex: 1 1 auto;
    align-content: start;
    min-height: 0;
    overflow: hidden;
  }

  .workspace-dashboard .dashboard-events-list .pager {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 7px 0 0;
  }

  .workspace-dashboard .dashboard-events-list .page-size-control,
  .workspace-dashboard .dashboard-events-list .page-jump {
    display: none;
  }
}

.dashboard-stage-panel {
  align-self: start;
  min-width: 0;
}

@media (min-width: 1041px) {
  .workspace-dashboard .dashboard-main-grid {
    grid-template-columns: minmax(480px, 0.8fr) minmax(360px, 0.7fr);
    align-items: stretch;
    gap: 12px;
    height: 100%;
    min-height: 0;
  }

  .workspace-dashboard .dashboard-events-list {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .workspace-dashboard .dashboard-events-list {
    padding-top: 0;
  }

  .workspace-dashboard .dashboard-events-list .list-toolbar {
    gap: 6px 8px;
    margin-bottom: 8px;
    padding: 6px;
  }

  .workspace-dashboard .dashboard-events-list .list-search input {
    min-height: 34px;
    padding: 6px 10px;
  }

  .workspace-dashboard .dashboard-events-list .list-search-actions .btn {
    min-height: 34px;
    padding: 6px 10px;
  }

  .workspace-dashboard .dashboard-stage-panel {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 10px 12px;
  }

  .workspace-dashboard .dashboard-stage-panel .panel-title {
    flex: 0 0 auto;
  }

  .workspace-dashboard .dashboard-stage-panel .stage-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  .workspace-dashboard .stage-table-wrap th,
  .workspace-dashboard .stage-table-wrap td {
    padding: 6px 7px;
    font-size: 12px;
    line-height: 1.25;
  }

  .workspace-dashboard .stage-table-wrap th:nth-child(1),
  .workspace-dashboard .stage-table-wrap td:nth-child(1) {
    width: 36%;
  }

  .workspace-dashboard .stage-table-wrap th:nth-child(2),
  .workspace-dashboard .stage-table-wrap td:nth-child(2) {
    width: 44px;
  }

  .workspace-dashboard .stage-table-wrap .stage-progress-bar {
    height: 5px;
  }

  .workspace-dashboard .stage-table-wrap .stage-progress {
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 6px;
  }

  .workspace-dashboard .stage-table-wrap .stage-progress .mini-label {
    font-size: 11px;
  }
}

.timeline-list {
  gap: 0;
  border-top: 1px solid var(--line);
}

.timeline-list .timeline-item {
  padding: 12px 4px;
  border-bottom: 1px solid rgba(222, 215, 202, 0.76);
}

.timeline-list .timeline-title {
  font-size: 14px;
}

@media (min-width: 1041px) {
  .workspace-dashboard .timeline-list .timeline-item {
    padding: 5px 4px;
  }

  .workspace-dashboard .timeline-list .timeline-title {
    font-size: 13px;
    line-height: 1.25;
  }

  .workspace-dashboard .timeline-list .timeline-meta {
    font-size: 12px;
    line-height: 1.25;
  }
}

.list-total,
.selection-counter {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.selection-counter {
  border-color: rgba(22, 112, 90, 0.24);
  background: #e8f3ee;
  color: var(--ok);
}

.success-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  border: 1px solid rgba(22, 112, 90, 0.22);
  border-radius: 7px;
  background: #edf8f2;
  color: #145c4b;
  padding: 9px 12px;
}

.ledger-commandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.82);
}

.ledger-search {
  flex: 1 1 460px;
  max-width: 680px;
}

.ledger-search input {
  min-height: 38px;
}

.ledger-command-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.profile-overview {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.profile-permissions-panel {
  min-height: 100%;
}

.modal-intro {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.business-form {
  display: grid;
  gap: 16px;
}

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

.modal-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.modal-form-actions > .btn-row {
  margin-left: auto;
}

.modal-scan-block {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(222, 215, 202, 0.9);
  border-radius: 8px;
  background: #f8f5ee;
}

.modal-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-section-title span {
  color: var(--muted);
  font-size: 12px;
}

.modal-section-title b {
  color: var(--primary);
}

.scan-box {
  display: grid;
  gap: 8px;
}

.scan-box .scan-list {
  min-height: 38px;
  padding: 8px;
}

.modal-selection-summary {
  min-width: 0;
}

.compact-summary-table table {
  min-width: 0;
}

.compact-summary-table th,
.compact-summary-table td {
  padding: 8px 10px;
}

.compact-empty {
  min-height: 54px;
  padding: 14px;
}

.modal-lookup {
  margin-top: 4px;
}

.quick-lookup-panel {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.quick-lookup-camera-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  grid-column: 1 / -1;
  justify-self: center;
  min-width: 128px;
  min-height: 58px;
  gap: 8px;
  border-color: rgba(38, 105, 90, 0.24);
  border-radius: 999px;
  background: rgba(232, 244, 240, 0.96);
  box-shadow: 0 10px 28px rgba(38, 105, 90, 0.12);
  color: var(--accent);
  font-weight: 900;
  animation: quickCameraPulse 2.6s ease-in-out infinite;
}

.quick-camera-icon {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 28px;
  border: 3px solid rgba(38, 105, 90, 0.82);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(204, 230, 223, 0.86)),
    rgba(232, 244, 240, 0.96);
  box-shadow: inset 0 -3px 0 rgba(38, 105, 90, 0.08);
}

.quick-camera-icon::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 8px;
  width: 16px;
  height: 8px;
  border: 3px solid rgba(38, 105, 90, 0.82);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: rgba(232, 244, 240, 0.96);
}

.quick-camera-icon::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(38, 105, 90, 0.72);
}

.quick-camera-lens {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border: 3px solid rgba(38, 105, 90, 0.88);
  border-radius: 999px;
  background: rgba(38, 105, 90, 0.12);
  transform: translate(-50%, -50%);
}

.quick-camera-lens::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
}

.quick-camera-label {
  line-height: 1;
}

.quick-lookup-camera-button:hover,
.quick-lookup-camera-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(38, 105, 90, 0.38);
  box-shadow: 0 14px 34px rgba(38, 105, 90, 0.18);
}

@keyframes quickCameraPulse {
  0%,
  100% {
    box-shadow: 0 10px 28px rgba(38, 105, 90, 0.12);
  }
  50% {
    box-shadow: 0 10px 28px rgba(38, 105, 90, 0.12), 0 0 0 7px rgba(38, 105, 90, 0.08);
  }
}

@media (max-width: 780px) {
  .quick-lookup-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-lookup-panel .scan-input {
    grid-column: 1 / -1;
  }

  .quick-lookup-camera-button {
    width: 116px;
    height: 116px;
    min-width: 116px;
    min-height: 116px;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
  }

  .quick-camera-icon {
    width: 44px;
    height: 34px;
    border-radius: 12px;
  }

  .quick-camera-icon::before {
    top: -10px;
    left: 10px;
    width: 18px;
    height: 9px;
  }

  .quick-camera-lens {
    width: 17px;
    height: 17px;
  }
}

.lookup-feedback {
  min-height: 32px;
  display: flex;
  align-items: center;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 750;
}

.lookup-feedback.loading {
  color: var(--accent-2);
}

.quick-lookup-results {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.quick-result-list {
  display: grid;
  gap: 8px;
  max-height: 46vh;
  overflow: auto;
  padding-right: 2px;
}

.quick-result-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefa;
  padding: 9px;
}

.quick-result-main {
  min-width: 0;
}

.quick-result-actions {
  display: grid;
  align-self: stretch;
  align-content: center;
  gap: 7px;
  min-width: 112px;
}

.sample-stage-marker,
.sample-stage-summary {
  --stage-color: var(--muted);
  --stage-bg: #f0f3f1;
}

.sample-stage-marker.stage-selected,
.sample-stage-summary.stage-selected {
  --stage-color: #a17416;
  --stage-bg: #fff7df;
}

.sample-stage-marker.stage-inbound,
.sample-stage-summary.stage-inbound {
  --stage-color: #16705a;
  --stage-bg: #eaf6f1;
}

.sample-stage-marker.stage-buyer,
.sample-stage-summary.stage-buyer {
  --stage-color: #2f67a5;
  --stage-bg: #edf4fb;
}

.sample-stage-marker.stage-photo,
.sample-stage-summary.stage-photo {
  --stage-color: #c65445;
  --stage-bg: #fff0eb;
}

.sample-stage-marker.stage-archive,
.sample-stage-summary.stage-archive {
  --stage-color: #59699b;
  --stage-bg: #f0f2fa;
}

.sample-stage-marker.stage-retained,
.sample-stage-summary.stage-retained {
  --stage-color: #8b681c;
  --stage-bg: #fff7e5;
}

.sample-stage-marker.stage-returned,
.sample-stage-summary.stage-returned {
  --stage-color: #b23b43;
  --stage-bg: #fcecee;
}

.sample-stage-marker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 8px;
  margin-top: 7px;
  border-left: 4px solid var(--stage-color);
  border-radius: 6px;
  background: var(--stage-bg);
  padding: 7px 9px;
}

.sample-stage-marker > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.sample-stage-marker > strong {
  color: var(--stage-color);
  font-size: 14px;
}

.sample-stage-marker > small {
  grid-column: 1 / -1;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-result-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.quick-result-facts span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sample-stage-summary {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(280px, 1.2fr);
  align-items: center;
  gap: 14px 22px;
  margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--stage-color) 28%, var(--line));
  border-left: 6px solid var(--stage-color);
  border-radius: 8px;
  background: var(--stage-bg);
  padding: 14px 16px;
}

.sample-stage-summary-main {
  min-width: 0;
}

.sample-stage-kicker {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.sample-stage-summary-main > strong {
  display: block;
  margin-top: 2px;
  color: var(--stage-color);
  font-size: 23px;
  line-height: 1.2;
}

.sample-stage-summary-main > p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.sample-stage-summary-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sample-stage-summary-meta > span {
  min-width: 0;
  border-left: 1px solid color-mix(in srgb, var(--stage-color) 25%, var(--line));
  padding-left: 10px;
  overflow-wrap: anywhere;
}

.sample-stage-summary-meta b {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
}

.sample-detail-grid {
  grid-template-columns: minmax(250px, 0.75fr) minmax(0, 1.25fr);
  align-items: start;
}

.sample-detail-visual {
  min-width: 0;
}

.sample-detail-photo {
  display: block;
  width: 100%;
  height: min(54vh, 420px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(248, 245, 238, 0.58);
  object-fit: contain;
  object-position: center;
}

.sample-detail-label {
  margin-top: 12px;
  overflow: auto;
}

.sample-detail-section-title {
  margin-top: 5px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 7px;
  font-size: 15px;
  font-weight: 800;
}

.sample-detail-section-title:not(:first-child) {
  margin-top: 12px;
}

.sample-detail-content > p {
  margin: 0;
  line-height: 1.55;
}

.modal-root:empty {
  display: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(31, 39, 37, 0.38);
}

.modal-panel {
  display: flex;
  flex-direction: column;
  width: min(940px, 100%);
  max-height: min(86vh, 760px);
  overflow: hidden;
  border: 1px solid rgba(222, 215, 202, 0.86);
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 20px 70px rgba(31, 39, 37, 0.24);
}

.modal-panel.business-modal {
  width: min(980px, 100%);
}

.modal-panel.wide-modal {
  width: min(1120px, 100%);
}

.modal-panel.compact-modal {
  width: min(680px, 100%);
}

.modal-head,
.modal-body,
.modal-foot {
  padding: 16px;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.modal-head h3 {
  margin: 0;
  font-size: 18px;
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.modal-foot {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line);
}

.confirm-root:empty {
  display: none;
}

.confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(31, 39, 37, 0.52);
}

.confirm-panel {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px 14px;
  width: min(430px, 100%);
  border: 1px solid rgba(222, 215, 202, 0.9);
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 24px 80px rgba(31, 39, 37, 0.3);
  padding: 18px;
}

.confirm-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: #f6e4d8;
  color: var(--primary-2);
  font-size: 20px;
  font-weight: 900;
}

.confirm-copy h3,
.confirm-copy p {
  margin: 0;
}

.confirm-copy h3 {
  font-size: 17px;
}

.confirm-copy p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.btn.danger.solid {
  border-color: #a93139;
  background: #b23b43;
  color: #fff;
}

.toast-root {
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 120;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 32px));
}

.toast {
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary-2);
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: var(--shadow);
  padding: 12px 13px;
  color: var(--ink);
}

.camera-box {
  display: grid;
  gap: 10px;
}

.camera-preview {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: #111;
}

.camera-preview.unavailable {
  display: none;
}

.camera-reader {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.camera-reader video,
.camera-reader canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.camera-reader video {
  z-index: 1;
  background: #111;
}

.camera-reader canvas {
  z-index: 2;
  background: transparent;
  pointer-events: none;
}

.camera-tools {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}

.camera-tool {
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  padding: 7px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
}

.camera-tool[hidden] {
  display: none;
}

.camera-guide {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: min(82%, 520px);
  height: 38%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.24);
  pointer-events: none;
  transition: width 160ms ease, height 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.camera-preview.barcode-located .camera-guide {
  width: min(72%, 460px);
  height: 30%;
  border-color: #6ee7b7;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.32), 0 0 0 4px rgba(110, 231, 183, 0.2);
}

.camera-guide-label {
  position: absolute;
  z-index: 3;
  top: calc(69% + 10px);
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.camera-preview.barcode-located .camera-guide-label {
  color: #a7f3d0;
  font-weight: 800;
}

.camera-status {
  min-height: 38px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.45;
}

body.scanner-open .modal-backdrop {
  z-index: 220;
  display: block;
  padding: 0;
  background: #050505;
}

body.scanner-open .camera-fullscreen,
body.scanner-open .modal-panel.camera-fullscreen {
  width: 100vw;
  height: 100dvh;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: #050505;
  box-shadow: none;
}

body.scanner-open .camera-fullscreen .modal-head,
body.scanner-open .camera-fullscreen .modal-foot {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  border-color: rgba(255, 255, 255, 0.15);
  background: #111;
  color: #fff;
}

body.scanner-open .camera-fullscreen .modal-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

body.scanner-open .camera-box,
body.scanner-open .camera-preview {
  width: 100%;
  height: 100%;
  min-height: 0;
}

body.scanner-open .camera-box {
  position: relative;
  display: block;
}

body.scanner-open .camera-preview {
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}

body.scanner-open .camera-status {
  position: absolute;
  z-index: 4;
  right: 14px;
  bottom: 14px;
  left: 14px;
  min-height: 0;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.68);
  color: #fff;
  text-align: center;
}

.bottom-nav {
  display: none;
}

.mobile-more-menu,
.mobile-account-menu {
  display: grid;
  gap: 10px;
}

.mobile-more-menu-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 52px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 8px 10px;
  text-align: left;
  font-weight: 850;
}

.mobile-more-menu-item.active {
  border-color: rgba(15, 95, 85, 0.28);
  background: rgba(232, 244, 240, 0.84);
  color: var(--primary);
}

.mobile-account-card,
.mobile-account-sync {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.86);
  padding: 10px 12px;
}

.mobile-account-card strong {
  color: var(--ink);
  font-size: 16px;
}

.mobile-account-card span,
.mobile-account-sync span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.mobile-account-sync {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.mobile-account-sync i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
}

.mobile-account-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 1120px) {
  .topbar {
    grid-template-columns: minmax(220px, 1fr) minmax(220px, auto);
  }

  .workspace-context {
    grid-column: 1 / -1;
    order: 3;
    justify-content: space-between;
  }

  .operator {
    min-width: 180px;
  }

  .dashboard-workbench-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-task-row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
  }

  .grid.kpis {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

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

  .settlement-retain-layout {
    grid-template-columns: 1fr;
  }

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

  .settlement-retain-form .retain-note {
    grid-column: span 2;
  }

  .settlement-summary {
    justify-content: start;
  }

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

@media (max-width: 780px) {
  body {
    font-size: 14px;
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    padding: 12px 14px;
  }

  .brand-mark {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .brand h1 {
    font-size: 17px;
  }

  .brand p {
    display: none;
  }

  .operator {
    min-width: 0;
    gap: 6px;
  }

  .operator .logout-button {
    display: none;
  }

  .mobile-account-menu-button {
    display: inline-flex;
    min-height: 30px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 850;
  }

  .sync-status {
    justify-content: center;
    width: 30px;
    min-height: 30px;
    padding: 0;
  }

  .sync-status span {
    display: none;
  }

  .workspace-context {
    display: none;
  }

  .account-summary {
    max-width: 104px;
  }

  .shell {
    display: block;
    padding: 14px 12px 78px;
  }

  .side-nav {
    display: none;
  }

  .bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
    border-top: 1px solid var(--line);
    background: rgba(255, 253, 248, 0.96);
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom));
    backdrop-filter: blur(16px);
  }

  .bottom-nav .nav-button {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 50px;
    gap: 1px;
    border-radius: 7px;
    padding: 4px 0;
    font-size: 11px;
    text-align: center;
  }

  .bottom-nav .nav-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 12px;
  }

  .bottom-nav .nav-text {
    max-width: 100%;
  }

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

  .head-actions {
    align-self: start;
    display: grid;
    grid-auto-flow: column;
    gap: 6px;
    justify-content: end;
    max-width: 178px;
  }

  .module-tabs {
    gap: 6px;
    padding: 3px;
  }

  .module-tab {
    min-height: 44px;
    padding: 7px 9px;
  }

  .module-tab strong {
    font-size: 11px;
  }

  .inbound-tab-grid {
    grid-template-columns: 1fr;
  }

  .view-head > div:first-child {
    display: contents;
  }

  .view-head h2 {
    grid-column: 1;
    font-size: 24px;
  }

  .view-head h2::after {
    margin-top: 6px;
  }

  .view-head p {
    grid-column: 1 / -1;
    margin-top: 0;
    line-height: 1.45;
  }

  .view-head .head-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .head-actions .btn {
    min-height: 36px;
    padding: 8px 10px;
    white-space: nowrap;
  }

  .dashboard-stage-panel {
    padding: 12px;
  }

  .dashboard-stage-panel .panel-title {
    margin-bottom: 10px;
  }

  .dashboard-stage-panel .panel-title h3 {
    font-size: 18px;
  }

  .dashboard-stage-panel .panel-title p {
    font-size: 12px;
    line-height: 1.35;
  }

  .stage-table-wrap {
    overflow: visible;
  }

  .stage-table-wrap table {
    min-width: 0;
    table-layout: fixed;
  }

  .stage-table-wrap th,
  .stage-table-wrap td {
    padding: 8px 7px;
  }

  .stage-table-wrap th:nth-child(1),
  .stage-table-wrap td:nth-child(1) {
    width: 42%;
  }

  .stage-table-wrap th:nth-child(2),
  .stage-table-wrap td:nth-child(2) {
    width: 46px;
    text-align: center;
  }

  .stage-table-wrap th:nth-child(3),
  .stage-table-wrap td:nth-child(3) {
    width: auto;
  }

  .stage-table-wrap td {
    font-size: 12px;
  }

  .stage-table-wrap .stage-progress {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 6px;
  }

  .stage-table-wrap .stage-progress-bar {
    height: 6px;
  }

  .stage-table-wrap .stage-progress .mini-label {
    font-size: 11px;
    text-align: right;
  }

  .grid.kpis,
  .grid.two,
  .grid.three,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .band {
    margin-bottom: 12px;
  }

  .grid {
    gap: 10px;
  }

  .panel,
  .card,
  .empty {
    border-radius: 8px;
  }

  .panel {
    padding: 12px;
  }

  .panel-title {
    align-items: start;
    gap: 8px;
    margin-bottom: 10px;
  }

  .panel-title h3 {
    font-size: 16px;
    line-height: 1.2;
  }

  .panel-title p {
    font-size: 12px;
    line-height: 1.4;
  }

  .grid.kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
  }

  .grid.kpis .kpi {
    min-height: 82px;
    padding: 10px 12px;
    display: grid;
    align-content: start;
    gap: 4px;
  }

  .grid.kpis .kpi::after {
    right: -18px;
    bottom: -20px;
    width: 58px;
    height: 58px;
  }

  .grid.kpis .kpi .label {
    font-size: 12px;
    line-height: 1.2;
  }

  .grid.kpis .kpi .value {
    margin: 0;
    font-size: 24px;
    line-height: 1.05;
  }

  .grid.kpis .kpi .hint {
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .field.span-2,
  .field.span-3 {
    grid-column: auto;
  }

  .settlement-retain-panel {
    padding: 12px;
  }

  .settlement-retain-layout,
  .settlement-retain-form .form-grid {
    grid-template-columns: 1fr;
  }

  .settlement-retain-form {
    border: 0;
    background: transparent;
    padding: 0;
  }

  .settlement-retain-form .retain-note {
    grid-column: auto;
  }

  .settlement-retain-form .btn-row {
    justify-content: start;
  }

  .settlement-summary {
    width: 100%;
    justify-content: start;
  }

  .settlement-summary span {
    flex: 1 1 132px;
  }

  .settlement-toolbar {
    margin-bottom: 10px;
  }

  .form-grid {
    gap: 10px;
  }

  .field {
    gap: 5px;
  }

  .field label {
    font-size: 12px;
  }

  .table-wrap.desktop-only {
    display: none;
  }

  .mobile-cards {
    display: grid;
    gap: 8px;
  }

  .record-card {
    gap: 8px;
    padding: 10px;
  }

  .record-card .top {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .record-card .facts {
    gap: 6px;
    font-size: 12px;
  }

  .scan-panel {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
  }

  .scan-list {
    min-height: 36px;
    gap: 6px;
    padding: 8px;
  }

  .scan-chip {
    gap: 6px;
    padding: 4px 7px 4px 9px;
  }

  .scan-chip button {
    width: 20px;
    height: 20px;
  }

  .pager {
    align-items: stretch;
    display: grid;
  }

  .list-toolbar {
    align-items: stretch;
    display: grid;
    gap: 7px;
  }

  .list-search {
    max-width: none;
  }

  .list-search-actions {
    justify-content: start;
  }

  .list-count {
    justify-self: end;
  }

  .pager-controls {
    display: grid;
    justify-content: stretch;
  }

  .pager-actions {
    justify-content: start;
  }

  .page-size-control,
  .page-jump {
    justify-content: start;
  }

  .profile-layout {
    grid-template-columns: 1fr;
  }

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

  .password-grid .field.span-2 {
    grid-column: auto;
  }

  .btn {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 13px;
  }

  .btn.link {
    min-height: 30px;
    padding: 4px 0;
  }

  .btn-row {
    gap: 6px;
  }

  .inbound-assist {
    padding: 9px;
  }

  .inbound-assist-bar {
    display: grid;
    gap: 8px;
  }

  .assist-card {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
  }

  .assist-side {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .scan-input,
  .search-input,
  .field input,
  .field select,
  .field textarea {
    min-height: 40px;
    padding: 8px 10px;
  }

  .field-action-row {
    grid-template-columns: 1fr;
  }

  .field-action-row .btn {
    min-height: 40px;
  }

  .field textarea {
    min-height: 76px;
  }

  .autocomplete-layer {
    border-radius: 12px;
    padding: 7px;
  }

  .autocomplete-option {
    min-height: 48px;
    padding: 9px 10px;
  }

  .thumb,
  .thumb-trigger {
    width: 42px;
    height: 42px;
  }

  .modal-backdrop {
    align-items: end;
    padding: 0;
  }

  .modal-panel {
    width: 100%;
    max-height: 88vh;
    border-radius: 8px 8px 0 0;
  }

  .toast-root {
    top: calc(10px + env(safe-area-inset-top));
    right: 12px;
    bottom: auto;
    left: 12px;
    justify-items: center;
    width: auto;
    pointer-events: none;
  }

  .toast {
    width: min(340px, 100%);
    padding: 10px 12px;
    border-left-width: 3px;
    font-size: 13px;
    line-height: 1.35;
  }

  .permission-grid {
    display: none;
  }

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

  .role-permission-card {
    padding: 10px;
  }

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

  .permission-chips {
    gap: 5px;
    margin-top: 8px;
  }

  .permission-chip {
    padding: 5px 7px;
    font-size: 11px;
  }

  .permission-editor {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .auth-view {
    display: block;
    background: #f7f8f4;
  }

  .auth-intro {
    min-height: auto;
    gap: 18px;
    padding: 30px 18px 44px;
  }

  .auth-intro::before {
    inset: 14px;
  }

  .auth-brand {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
  }

  .auth-brand .brand-mark {
    width: 46px;
    height: 46px;
  }

  .auth-brand h1 {
    font-size: 30px;
  }

  .auth-brand p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.65;
  }

  .auth-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .auth-flow span {
    justify-content: center;
    min-height: 32px;
    padding: 5px 8px;
    font-size: 12px;
  }

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

  .auth-stat {
    min-height: 74px;
    padding: 10px;
  }

  .auth-stat strong {
    font-size: 22px;
  }

  .auth-side {
    position: relative;
    z-index: 2;
    align-content: start;
    justify-items: stretch;
    min-height: auto;
    margin-top: 0;
    padding: 14px 12px 34px;
  }

  .auth-panel {
    width: 100%;
    padding: 16px;
  }
}

@media (min-width: 861px) and (max-height: 760px) {
  .auth-intro {
    gap: 18px;
    padding: 36px 56px;
  }

  .auth-brand h1 {
    font-size: 44px;
  }

  .auth-brand p {
    margin-top: 8px;
    font-size: 15px;
  }

  .auth-stat {
    min-height: 78px;
    padding: 12px;
  }

  .auth-stat strong {
    font-size: 24px;
  }

  .auth-side {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .auth-panel {
    padding: 16px;
  }

  .auth-panel-head {
    margin-bottom: 10px;
  }

  .auth-tabs {
    margin-bottom: 14px;
  }

  .auth-tab {
    min-height: 38px;
  }

  .auth-title {
    margin-bottom: 12px;
  }

  .auth-title h2 {
    font-size: 24px;
  }

  .auth-title p {
    font-size: 13px;
  }

  .auth-submit {
    min-height: 40px;
    margin-top: 12px;
  }

  .demo-accounts {
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
  }

  .demo-grid {
    gap: 6px;
  }

  .demo-item {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    padding: 7px;
  }

  .demo-avatar {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 520px) {
  .auth-intro {
    padding: 22px 14px 28px;
  }

  .auth-brand {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .auth-brand .brand-mark {
    width: 42px;
    height: 42px;
  }

  .auth-brand h1 {
    font-size: 25px;
  }

  .auth-brand p {
    font-size: 13px;
  }

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

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

  .auth-stat {
    min-height: 66px;
    padding: 9px;
  }

  .auth-stat strong {
    font-size: 20px;
  }

  .auth-stat span {
    margin-top: 4px;
    font-size: 11px;
  }

  .auth-panel-head {
    align-items: flex-start;
    display: grid;
  }

  .auth-title h2 {
    font-size: 23px;
  }

  .demo-item {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
  }

  .demo-avatar {
    width: 30px;
    height: 30px;
  }

  .auth-side {
    padding-top: 12px;
  }

  .topbar {
    gap: 8px;
  }

  .operator .btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 44px;
    min-height: 36px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .operator .logout-button::after {
    content: "出";
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .auth-brand {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
  }

  .auth-brand .brand-mark {
    width: 40px;
    height: 40px;
  }

  .auth-brand h1 {
    font-size: 23px;
  }

  .auth-brand p {
    font-size: 12px;
  }

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

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

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

  .auth-stat {
    min-height: auto;
  }
}

@media (max-width: 780px) {
  .operator .btn::after {
    content: none;
    display: none;
  }
}

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

  .dashboard-overview-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-stage-panel {
    max-width: none;
  }
}

@media (max-width: 780px) {
  .list-surface,
  .primary-list-surface,
  .dashboard-events-list {
    min-height: 0;
  }

  .workspace-dashboard .dashboard-workbench-head p,
  .workspace-dashboard .dashboard-column-title span {
    display: none;
  }

  .workspace-dashboard .dashboard-workbench-head {
    gap: 8px;
  }

  .workspace-dashboard .dashboard-column-title {
    margin-bottom: 8px;
  }

  .dashboard-workbench-grid,
  .dashboard-overview-grid {
    grid-template-columns: 1fr;
  }

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

  .dashboard-overview-stat small {
    white-space: normal;
  }

  .dashboard-lifecycle-list {
    gap: 6px;
  }

  .dashboard-lifecycle-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 50px;
    padding-right: 7px;
  }

  .dashboard-lifecycle-row::before {
    width: 4px;
    clip-path: none;
  }

  .dashboard-lifecycle-index {
    align-self: center;
    width: 30px;
    height: 28px;
    margin-left: 6px;
    border-radius: 7px;
    font-size: 14px;
  }

  .dashboard-lifecycle-meter {
    grid-column: 2 / 4;
    width: 100%;
    height: 5px;
  }

  .dashboard-lifecycle-value {
    grid-column: 3;
    grid-row: 1;
    gap: 4px;
  }

  .dashboard-lifecycle-value b {
    font-size: 20px;
  }

  .dashboard-lifecycle-value small {
    font-size: 11px;
  }

  .dashboard-lifecycle-row .dashboard-row-action {
    display: none;
  }

  .dashboard-lifecycle-copy strong,
  .dashboard-lifecycle-copy small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .dashboard-lifecycle-copy strong {
    font-size: 14px;
    line-height: 1.2;
  }

  .dashboard-lifecycle-copy small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .dashboard-task-list {
    grid-template-columns: 1fr;
  }

  .dashboard-task-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 64px;
    padding: 9px 10px;
  }

  .dashboard-row-copy strong {
    overflow: visible;
    font-size: 14px;
    line-height: 1.25;
    text-overflow: clip;
    white-space: normal;
  }

  .workspace-dashboard .dashboard-row-copy small {
    overflow: visible;
    font-size: 11px;
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
  }

  .dashboard-row-action {
    grid-column: auto;
    justify-self: end;
    min-width: 64px;
    justify-content: center;
  }

  .list-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    margin-bottom: 10px;
    padding: 8px;
  }

  .list-toolbar-main {
    display: contents;
  }

  .list-search {
    grid-column: 1 / -1;
    width: 100%;
  }

  .list-search input {
    min-height: 40px;
    padding: 8px 10px;
  }

  .list-search-actions {
    grid-column: 1;
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .list-search-actions::-webkit-scrollbar {
    display: none;
  }

  .list-search-actions .btn {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 10px;
  }

  .list-toolbar-meta {
    grid-column: 2;
    width: auto;
    justify-content: flex-end;
  }

  .list-count {
    min-height: 34px;
    text-align: right;
  }

  .filter-chip-row {
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: none;
  }

  .filter-chip-row::-webkit-scrollbar {
    display: none;
  }

  .pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "summary size"
      "actions actions"
      "jump jump";
    align-items: center;
    gap: 8px 10px;
    margin-top: 8px;
    border-top: 1px solid var(--line);
    padding: 10px 0 2px;
  }

  .pager-summary {
    grid-area: summary;
    min-width: 0;
    line-height: 1.35;
  }

  .pager-controls {
    display: contents;
  }

  .page-size-control {
    grid-area: size;
    justify-self: end;
  }

  .pager-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    width: 100%;
    gap: 8px;
  }

  .pager-actions .pager-btn:first-child,
  .pager-actions .pager-btn:last-child {
    width: 100%;
  }

  .pager-current {
    display: inline-flex;
    min-width: 96px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    padding: 6px 9px;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
  }

  .pager-page-number {
    display: none;
  }

  .page-jump {
    grid-area: jump;
    justify-self: end;
  }

  .page-size-control select,
  .page-jump input {
    height: 34px;
  }

  .secondary-list-surface {
    margin-top: 20px;
    padding-top: 18px;
  }

  .list-surface > .panel-title,
  .modal-section-title,
  .success-strip {
    align-items: flex-start;
  }

  .list-total {
    flex: 0 0 auto;
  }

  .timeline-list .timeline-item {
    padding: 10px 2px;
  }

  .ledger-commandbar {
    display: grid;
    gap: 8px;
    justify-content: stretch;
    margin-bottom: 10px;
    padding: 8px;
  }

  .ledger-search {
    width: 100%;
    max-width: none;
  }

  .ledger-command-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    overflow: visible;
  }

  .ledger-command-actions .list-total {
    margin-left: auto;
  }

  .profile-overview {
    grid-template-columns: 1fr;
  }

  .settings-layout,
  .settings-action-grid,
  .account-create-form .form-grid,
  .settings-modal .permission-mobile-list {
    grid-template-columns: 1fr;
  }

  .settings-action-card-wide,
  .account-create-form .field:first-child {
    grid-column: auto;
  }

  .account-manager-summary {
    display: grid;
  }

  .supplier-manager-toolbar {
    grid-template-columns: 1fr;
  }

  .supplier-search-group {
    grid-template-columns: 1fr auto;
  }

  .account-manager-table {
    min-width: 720px;
  }

  .supplier-manager-table {
    min-width: 860px;
  }

  .supplier-note-field {
    grid-column: auto;
  }

  .settings-panel-head,
  .settings-account-head {
    display: grid;
  }

  .settings-account-actions {
    display: flex;
    justify-content: flex-start;
    gap: 6px;
  }

  .settings-account-actions .btn {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 12px;
    font-size: 13px;
  }

  .settings-action-card {
    min-height: auto;
  }

  .print-settings-shell {
    grid-template-columns: 1fr;
  }

  .print-settings-main {
    grid-template-columns: 1fr;
  }

  .print-settings-sidebar {
    position: static;
  }

  .label-template-grid,
  .label-code-type-grid,
  .label-content-options {
    grid-template-columns: 1fr;
  }

  .print-preview-head {
    align-items: stretch;
  }

  .print-setup-facts > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .modal-backdrop {
    align-items: end;
    padding: 0;
  }

  .modal-panel,
  .modal-panel.business-modal,
  .modal-panel.wide-modal,
  .modal-panel.compact-modal {
    width: 100%;
    max-height: 92vh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 8px 8px 0 0;
  }

  .modal-panel.supplier-manager-modal {
    height: 92vh;
  }

  .modal-head,
  .modal-body,
  .modal-foot {
    padding: 13px;
  }

  .modal-head {
    flex: 0 0 auto;
  }

  .modal-body {
    overscroll-behavior: contain;
  }

  .modal-foot {
    align-items: stretch;
    padding: 10px 13px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 253, 248, 0.98);
    box-shadow: 0 -12px 24px rgba(31, 39, 37, 0.08);
  }

  .business-form,
  .modal-scan-block {
    gap: 12px;
  }

  .business-form .form-grid,
  .modal-compact-grid,
  .password-grid {
    grid-template-columns: 1fr;
  }

  .business-form .field.span-2,
  .business-form .field.span-3,
  .toggle-field.span-2,
  .password-grid .field.span-2 {
    grid-column: auto;
  }

  .modal-section-title {
    display: grid;
    gap: 3px;
  }

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

  .scan-panel .scan-input {
    grid-column: 1 / -1;
  }

  .scan-panel .btn {
    width: 100%;
  }

  .quick-result-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .quick-result-actions {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-width: 0;
    width: 100%;
  }

  .quick-result-item .btn {
    width: 100%;
  }

  .sample-stage-summary {
    grid-template-columns: 1fr;
    gap: 11px;
    margin-bottom: 11px;
    padding: 12px;
  }

  .sample-stage-summary-main > strong {
    font-size: 21px;
  }

  .sample-stage-summary-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sample-stage-summary-meta > span:last-child {
    grid-column: 1 / -1;
  }

  .sample-detail-grid {
    grid-template-columns: 1fr;
  }

  .sample-detail-photo {
    height: min(48vh, 320px);
  }

  .sample-detail-modal .modal-foot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sample-detail-modal .modal-foot .sample-workflow-button {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 44px;
  }

  .sample-detail-modal .modal-foot .btn {
    width: 100%;
  }

  .modal-form-actions {
    align-items: stretch;
    display: grid;
    justify-content: stretch;
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin: 6px -13px -13px;
    padding: 10px 13px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255, 253, 248, 0.98);
    box-shadow: 0 -12px 24px rgba(31, 39, 37, 0.08);
  }

  .modal-form-actions > .btn-row {
    width: 100%;
    margin-left: 0;
  }

  .modal-form-actions .btn-row .btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
  }

  .confirm-backdrop {
    align-items: end;
    padding: 12px;
  }

  .confirm-panel {
    width: 100%;
    padding: 16px;
  }
}

/* Full-screen video landing page */

.auth-view {
  display: block;
  min-height: 100vh;
  padding: 12px;
  background: #ffffff;
  font-family: "Inter", "Microsoft YaHei", "PingFang SC", sans-serif;
}

.auth-view * {
  font-family: inherit;
}

.auth-stage {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 24px);
  overflow: hidden;
  border-radius: 24px;
  background: #20272b;
  box-shadow: 0 18px 60px rgba(17, 24, 39, 0.18);
}

.auth-video,
.auth-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.auth-video {
  z-index: -3;
  object-fit: cover;
}

.auth-scrim {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(6, 10, 12, 0.18), rgba(6, 10, 12, 0.08) 38%, rgba(6, 10, 12, 0.64)),
    linear-gradient(90deg, rgba(6, 10, 12, 0.28), transparent 58%);
}

.auth-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 24px);
  gap: 24px;
  padding: 16px;
}

.auth-nav {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 8px 26px rgba(17, 24, 39, 0.1);
  padding: 8px 8px 8px 12px;
  backdrop-filter: blur(18px);
}

.auth-nav-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  color: #111111;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.auth-nav-brand .brand-mark {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.auth-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  color: #30343a;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.auth-nav-links span {
  transition: opacity 160ms ease;
}

.auth-nav-links span:hover {
  opacity: 0.58;
}

.auth-nav-cta {
  min-height: 38px;
  margin-left: auto;
  border-radius: 12px;
  background: #111111;
  color: #ffffff;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 160ms ease, transform 160ms ease;
}

.auth-nav-cta:hover {
  background: #2f3033;
  transform: translateY(-1px);
}

.auth-spacer {
  flex: 1;
  min-height: 32px;
}

.auth-bottom-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

.auth-intro {
  position: relative;
  display: block;
  min-height: 0;
  max-width: 680px;
  overflow: visible;
  padding: 0 0 4px;
  background: none;
  color: #ffffff;
}

.auth-intro::before {
  display: none;
}

.auth-eyebrow {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.auth-intro h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 600;
  line-height: 1.02;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.24);
}

.auth-intro h1 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.auth-lead {
  max-width: 590px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.7;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.24);
}

.auth-flow {
  display: flex;
  max-width: 620px;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.auth-flow span,
.auth-flow span:nth-child(n) {
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
  color: #ffffff;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(10px);
}

.auth-side {
  display: block;
  flex: 0 0 min(500px, 44%);
  min-height: 0;
  padding: 0;
}

.auth-panel {
  width: 100%;
  border: 0;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(17, 24, 39, 0.26);
  padding: 22px;
}

.auth-panel-head {
  align-items: flex-start;
  margin-bottom: 14px;
  color: #111111;
}

.auth-panel-head > div {
  display: grid;
  gap: 3px;
}

.auth-panel-head > div > span {
  font-size: 21px;
  font-weight: 700;
}

.auth-panel-head > div > strong {
  min-height: 0;
  border-radius: 0;
  background: transparent;
  color: #6b7280;
  padding: 0;
  font-size: 12px;
  font-weight: 400;
}

.auth-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  background: #f4f4f5;
  color: #4b5563;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.auth-status-dot i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.auth-connection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 16px;
  background: #f7f7f8;
  padding: 10px 12px;
}

.auth-connection-row > div:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.auth-connection-row > div:first-child span {
  color: #9ca3af;
  font-size: 11px;
}

.auth-connection-row > div:first-child strong {
  overflow: hidden;
  color: #2563eb;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-capabilities {
  display: flex;
  gap: 5px;
}

.auth-capabilities span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 30px;
  border-radius: 9px;
  background: #ffffff;
  color: #4b5563;
  font-size: 11px;
  font-weight: 600;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 600;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

.auth-tabs {
  gap: 4px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: #f4f4f5;
  padding: 4px;
}

.auth-tab {
  min-height: 38px;
  border-radius: 9px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.auth-tab.active {
  background: #ffffff;
  color: #111111;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.07);
}

.auth-title {
  margin-bottom: 14px;
}

.auth-title h2 {
  font-size: 22px;
  font-weight: 650;
}

.auth-title p {
  margin-top: 5px;
  color: #6b7280;
  font-size: 12px;
}

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

.auth-form .field {
  gap: 5px;
}

.auth-form .field label {
  color: #111111;
  font-size: 12px;
  font-weight: 500;
}

.auth-form .field input,
.auth-form .field select {
  min-height: 40px;
  border-color: #e5e7eb;
  border-radius: 10px;
  background: transparent;
  padding: 8px 10px;
  font-size: 13px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.auth-form .field input:focus,
.auth-form .field select:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px #111111;
}

.auth-submit {
  min-height: 42px;
  margin-top: 14px;
  border-radius: 14px;
  background: #111111;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  transition: background 160ms ease;
}

.auth-submit:hover {
  background: #303033;
}

.demo-accounts {
  margin-top: 14px;
  padding-top: 14px;
}

.demo-grid {
  gap: 6px;
}

.demo-item {
  border-color: #ececef;
  border-radius: 10px;
  background: #fafafa;
  padding: 7px;
}

.demo-item:hover,
.demo-item:focus-visible,
.demo-item.is-selected {
  border-color: #111111;
  background: #f4f4f5;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.08);
}

.demo-avatar {
  background: #ffffff;
  color: #111111;
  box-shadow: inset 0 0 0 1px #e5e7eb;
}

.auth-nav-cta:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .auth-view {
    padding: 16px;
  }

  .auth-stage,
  .auth-content {
    min-height: calc(100vh - 32px);
  }

  .auth-content {
    padding: 24px;
  }
}

@media (min-width: 768px) {
  .auth-view {
    padding: 24px;
  }

  .auth-stage,
  .auth-content {
    min-height: calc(100vh - 48px);
  }

  .auth-content {
    padding: 28px;
  }
}

@media (min-width: 1024px) {
  .auth-stage {
    height: calc(100vh - 48px);
    min-height: 660px;
  }

  .auth-content {
    height: 100%;
    min-height: 660px;
    overflow-y: auto;
  }

  .auth-panel {
    max-height: min(650px, calc(100vh - 220px));
    overflow-y: auto;
  }
}

@media (max-width: 1023px) {
  .auth-bottom-row {
    align-items: stretch;
    flex-direction: column;
  }

  .auth-side {
    flex-basis: auto;
    width: 100%;
  }

  .auth-panel {
    width: min(560px, 100%);
    margin-left: auto;
  }
}

@media (max-width: 639px) {
  .auth-view {
    padding: 10px;
  }

  .auth-stage {
    min-height: calc(100vh - 20px);
    border-radius: 20px;
  }

  .auth-content {
    min-height: calc(100vh - 20px);
    gap: 20px;
    padding: 14px;
  }

  .auth-nav {
    gap: 10px;
    border-radius: 14px;
    padding-left: 9px;
  }

  .auth-nav-links {
    display: none;
  }

  .auth-nav-brand {
    overflow: hidden;
  }

  .auth-nav-brand > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .auth-nav-cta {
    min-height: 36px;
    padding: 7px 13px;
  }

  .auth-spacer {
    min-height: 80px;
  }

  .auth-intro h1 {
    font-size: clamp(36px, 11vw, 48px);
  }

  .auth-eyebrow {
    font-size: 10px;
  }

  .auth-lead {
    font-size: 13px;
  }

  .auth-flow {
    margin-top: 14px;
  }

  .auth-panel {
    border-radius: 20px;
    padding: 16px;
  }

  .auth-panel-head > div > span {
    font-size: 19px;
  }

  .auth-status-dot {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .auth-connection-row {
    padding: 9px 10px;
  }

  .auth-capabilities span {
    min-width: 34px;
    min-height: 28px;
  }

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

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

@media (max-width: 720px) {
  .handoff-center-modal .modal-body {
    min-height: 68vh;
  }

  .handoff-center-tabs {
    grid-template-columns: 1fr;
  }

  .handoff-center-panel-head,
  .handoff-sent-item {
    align-items: stretch;
    flex-direction: column;
  }

  .handoff-center-panel-head .btn-row,
  .handoff-sent-meta {
    justify-content: flex-start;
  }

  .handoff-recipient-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .handoff-recipient-grid {
    grid-template-columns: 1fr;
  }

  .handoff-recipient-option {
    min-height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  table tbody tr:hover,
  table tbody tr:focus-within,
  table tbody tr:hover .thumb-trigger,
  table tbody tr:hover .thumb.placeholder,
  table tbody tr:hover .thumb-upload,
  table tbody tr:focus-within .thumb-trigger,
  table tbody tr:focus-within .thumb.placeholder,
  table tbody tr:focus-within .thumb-upload {
    transform: none;
  }
}

@media print {
  body.printing > :not(.print-window) {
    display: none !important;
  }
}
/* Research and production workspace */
.workspace-development { overflow: auto; }
.development-shell { min-height: 100%; background: #f4f8f6; color: #182521; }
.development-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px 14px; border-bottom: 1px solid #d7e2dd; background: #fffdfa; }
.development-head h2, .development-section-title h3, .development-project-detail h4 { margin: 0; }
.development-head p, .development-section-title p { margin: 4px 0 0; color: #687771; }
.development-head-actions, .development-task-scopes, .development-task-actions, .development-record-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.development-tabs { display: flex; align-items: stretch; gap: 0; padding: 0 22px; overflow-x: auto; background: #fffdfa; border-bottom: 1px solid #d7e2dd; scrollbar-width: thin; }
.development-tab { position: relative; min-width: max-content; height: 46px; padding: 0 15px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #52615c; font: inherit; font-weight: 700; cursor: pointer; }
.development-tab.active { color: #096b57; border-bottom-color: #d9684b; }
.development-tab span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 5px; padding: 0 5px; border-radius: 10px; background: #c3444d; color: #fff; font-size: 12px; }
.development-content { padding: 18px 22px 28px; }
.development-loading, .development-empty { display: grid; min-height: 110px; place-items: center; color: #73817c; border: 1px dashed #cbd7d2; background: #fffdfa; }
.development-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid #d3dfda; background: #fffdfa; }
.development-kpi { min-width: 0; padding: 16px 18px; border-right: 1px solid #dbe4e0; }
.development-kpi:last-child { border-right: 0; }
.development-kpi span, .development-kpi small { display: block; color: #66756f; }
.development-kpi strong { display: block; margin: 5px 0 2px; font-size: 30px; line-height: 1; color: #1e4f45; }
.development-kpi.tone-danger strong { color: #b43d49; }
.development-kpi.tone-review strong { color: #9b6c0d; }
.development-work-grid, .lingmao-data-layout, .project-detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 16px; margin-top: 16px; }
.development-column, .development-list-surface, .development-notice-strip, .lingmao-console { border: 1px solid #d3dfda; background: #fffdfa; }
.development-section-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 12px 15px; border-bottom: 1px solid #dbe4e0; }
.development-section-title h3 { font-size: 18px; }
.development-task-list, .development-record-list, .development-notification-list { display: grid; }
.development-task-row, .development-record, .development-production-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 88px; padding: 13px 15px; border-bottom: 1px solid #e0e7e3; }
.development-task-row:last-child, .development-record:last-child, .development-production-row:last-child { border-bottom: 0; }
.development-task-row.is-overdue { box-shadow: inset 4px 0 #bd3d48; background: #fff9f8; }
.development-task-state { display: grid; gap: 5px; }
.development-task-state span, .development-status { width: max-content; padding: 5px 9px; border-radius: 4px; background: #e7f1ed; color: #176453; font-weight: 800; }
.development-task-state small, .development-task-copy small, .development-record p, .development-record-meta span, .lingmao-console small, .development-organization small { color: #687771; }
.development-task-copy { min-width: 0; }
.development-task-copy strong, .development-record h4 { font-size: 17px; }
.development-task-copy p, .development-record h4, .development-record p { margin: 3px 0; }
.development-notice-strip { margin-top: 16px; }
.development-notification { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 12px; width: 100%; padding: 12px 15px; border: 0; border-bottom: 1px solid #e0e7e3; background: transparent; text-align: left; color: inherit; cursor: pointer; }
.development-notification:last-child { border-bottom: 0; }
.development-notification.is-unread { background: #f1f8f5; }
.development-notification i { width: 8px; height: 100%; min-height: 36px; background: #3b75ae; }
.development-notification i.severity-warning { background: #b27d14; }
.development-notification i.severity-error { background: #bd3d48; }
.development-notification i.severity-success { background: #08745e; }
.development-notification span, .development-notification small { display: block; }
.development-notification small { margin-top: 4px; color: #64736e; }
.development-task-scopes { padding: 12px 15px; border-bottom: 1px solid #dbe4e0; }
.development-task-scopes strong { margin-left: auto; }
.development-record { grid-template-columns: minmax(0, 1fr) 190px auto; }
.development-code { display: inline-block; color: #397064; font: 700 12px/1.2 ui-monospace, Consolas, monospace; }
.development-record-meta { display: grid; justify-items: start; gap: 8px; }
.development-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #dbe4e0; }
.development-project-tile { display: grid; gap: 16px; min-height: 210px; padding: 18px; background: #fffdfa; }
.development-project-tile h4 { margin: 7px 0 4px; font-size: 18px; }
.development-project-tile p { margin: 0; color: #65736e; }
.development-project-metrics { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.development-project-metrics span { color: #64736e; }
.development-project-metrics strong { color: #1b4c42; }
.danger-text { color: #b43d49 !important; }
.ok-text { color: #08745e !important; }
.development-production-row { grid-template-columns: minmax(250px, 1fr) minmax(160px, .7fr) 130px auto; }
.production-progress { height: 8px; overflow: hidden; background: #e6ece9; }
.production-progress span { display: block; height: 100%; background: #258b72; }
.development-form { padding: 2px 0; }
.development-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.development-form-grid .span-2 { grid-column: 1 / -1; }
.development-publish-toggle { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 12px; border: 1px solid #d4e0db; background: #f2f8f5; }
.development-publish-toggle input { width: 18px; height: 18px; }
.project-summary-band { display: grid; grid-template-columns: 2fr repeat(3, 1fr); border: 1px solid #d3dfda; background: #eef5f2; }
.project-summary-band > div { padding: 14px 16px; border-right: 1px solid #d3dfda; }
.project-summary-band > div:last-child { border-right: 0; }
.project-summary-band span, .project-summary-band strong { display: block; }
.project-summary-band span { color: #687771; font-size: 12px; }
.project-flow-map { margin-top: 16px; }
.project-flow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.project-flow-node { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; min-height: 76px; padding: 12px; border: 1px solid #d3dfda; background: #fffdfa; }
.project-flow-node > span { display: grid; place-items: center; width: 34px; height: 34px; background: #e6efeb; color: #246657; font-weight: 800; }
.project-flow-node small { display: block; margin-top: 5px; color: #697771; }
.project-flow-node.status-in_progress, .project-flow-node.status-pending_review { border-color: #d38b54; background: #fffbf5; }
.project-flow-node.status-passed, .project-flow-node.status-completed { border-color: #6ba792; }
.project-flow-node.status-returned { border-color: #ce7a82; background: #fff8f8; }
.project-detail-grid > div { border: 1px solid #d3dfda; padding: 14px; background: #fffdfa; }
.project-detail-line { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e0e7e3; }
.project-timeline-item { display: grid; grid-template-columns: 10px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid #e0e7e3; }
.project-timeline-item i { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #2a7967; }
.project-timeline-item small { display: block; color: #697771; }
.project-timeline-item p { margin: 3px 0 0; }
.lingmao-console { border: 0; background: transparent; }
.lingmao-data-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.lingmao-data-head h3 { margin: 0; font-size: 22px; }
.lingmao-data-head p { margin: 3px 0 0; color: #687771; }
.lingmao-connection-summary { display: flex; align-items: center; gap: 0; min-height: 38px; border: 1px solid #d3dfda; background: #fffdfa; }
.lingmao-connection-summary span { padding: 0 12px; border-right: 1px solid #dbe4e0; font-size: 13px; font-weight: 700; white-space: nowrap; }
.lingmao-connection-summary span:last-child { border-right: 0; color: #687771; font-weight: 500; }
.lingmao-browser-toolbar { display: grid; grid-template-columns: minmax(210px, .7fr) minmax(320px, 1.5fr) auto auto; align-items: end; gap: 8px; padding: 12px; border: 1px solid #d3dfda; background: #fffdfa; }
.lingmao-browser-toolbar label { display: grid; gap: 5px; min-width: 0; }
.lingmao-browser-toolbar label > span { color: #52615c; font-size: 13px; font-weight: 700; }
.lingmao-browser-toolbar select, .lingmao-browser-toolbar input { width: 100%; min-width: 0; }
.lingmao-resource-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; margin-top: 10px; border: 1px solid #d3dfda; background: #d3dfda; }
.lingmao-resource-strip button { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 42px; padding: 8px 10px; border: 0; background: #f7faf8; color: #334640; cursor: pointer; }
.lingmao-resource-strip button:hover, .lingmao-resource-strip button.active { background: #e6f1ed; color: #075f4e; }
.lingmao-resource-strip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lingmao-resource-strip strong { color: #0c725e; }
.lingmao-table-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 0 2px 8px; }
.lingmao-table-head > div { display: flex; align-items: baseline; gap: 10px; }
.lingmao-table-head strong { font-size: 18px; }
.lingmao-table-head span, .lingmao-table-head small { color: #687771; }
.lingmao-table-wrap { min-height: 380px; overflow: auto; border: 1px solid #d3dfda; background: #fffdfa; }
.lingmao-table-wrap.is-loading { opacity: .62; pointer-events: none; }
.lingmao-entity-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lingmao-entity-table th { position: sticky; top: 0; z-index: 1; height: 42px; padding: 0 10px; border-bottom: 1px solid #cbd8d2; background: #edf3f0; color: #52615c; text-align: left; font-size: 13px; }
.lingmao-entity-table td { height: 54px; padding: 8px 10px; border-bottom: 1px solid #e0e7e3; color: #273934; vertical-align: middle; }
.lingmao-entity-table tbody tr:hover { background: #f7faf8; }
.lingmao-entity-table th:nth-child(1) { width: 132px; }.lingmao-entity-table th:nth-child(2) { width: 19%; }.lingmao-entity-table th:nth-child(3) { width: 150px; }.lingmao-entity-table th:nth-child(4) { width: 17%; }.lingmao-entity-table th:nth-child(5) { width: 90px; }.lingmao-entity-table th:nth-child(6) { width: 160px; }.lingmao-entity-table th:nth-child(7) { width: 80px; }.lingmao-entity-table th:nth-child(8) { width: 72px; }
.lingmao-type-badge { display: inline-block; padding: 4px 7px; border-radius: 4px; background: #e7f1ed; color: #176453; font-size: 12px; font-weight: 800; }
.lingmao-external-id { display: block; overflow: hidden; color: #687771; font-family: ui-monospace, Consolas, monospace; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lingmao-linked { color: #08745e; font-weight: 700; }.lingmao-unlinked { color: #7b8984; }
.lingmao-pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 8px 0; color: #5e6d67; }
.lingmao-pager label, .lingmao-page-buttons { display: flex; align-items: center; gap: 7px; }
.lingmao-page-size { width: 74px; }
.lingmao-page-buttons .btn { min-width: 40px; }
.lingmao-sync-details { margin-top: 6px; border: 1px solid #d3dfda; background: #fffdfa; }
.lingmao-sync-details summary { padding: 11px 13px; color: #315b51; font-weight: 800; cursor: pointer; }
.lingmao-sync-content { border-top: 1px solid #dbe4e0; }
.lingmao-sync-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; }
.lingmao-sync-actions > span { color: #687771; font-size: 13px; }
.lingmao-sync-actions > div { display: flex; gap: 8px; }
.lingmao-run-list { max-height: 260px; overflow: auto; }
.lingmao-run-list > div { display: grid; grid-template-columns: minmax(0, 1fr) 100px auto; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid #e0e7e3; }
.sync-run-success { color: #08745e; }.sync-run-failed { color: #b43d49; }.sync-run-running, .sync-run-queued { color: #9b6c0d; }
.lingmao-detail-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #d3dfda; background: #f7faf8; }
.lingmao-detail-summary > div { display: grid; gap: 4px; min-width: 0; padding: 11px 13px; border-right: 1px solid #dbe4e0; border-bottom: 1px solid #dbe4e0; }
.lingmao-detail-summary > div:nth-child(3n) { border-right: 0; }
.lingmao-detail-summary span { color: #687771; font-size: 12px; }
.lingmao-detail-summary strong { overflow-wrap: anywhere; }
.lingmao-detail-fields, .lingmao-detail-links { margin-top: 16px; }
.lingmao-detail-fields h4, .lingmao-detail-links h4 { margin: 0 0 8px; }
.lingmao-detail-fields dl { margin: 0; border: 1px solid #d3dfda; }
.lingmao-detail-fields dl > div { display: grid; grid-template-columns: 210px minmax(0, 1fr); border-bottom: 1px solid #e0e7e3; }
.lingmao-detail-fields dl > div:last-child { border-bottom: 0; }
.lingmao-detail-fields dt, .lingmao-detail-fields dd { min-width: 0; margin: 0; padding: 9px 11px; }
.lingmao-detail-fields dt { background: #f1f5f3; color: #52615c; font-family: ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 700; }
.lingmao-detail-fields dd { overflow-wrap: anywhere; }
.lingmao-detail-fields pre { max-height: 240px; margin: 0; overflow: auto; white-space: pre-wrap; }
.lingmao-detail-fields .muted { color: #8a9692; }
.lingmao-detail-links > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #e0e7e3; }
.lingmao-console .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.dashboard-source-tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--line); margin-bottom: 9px; flex-wrap: wrap; }
.dashboard-source-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 7px 2px; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.dashboard-source-tabs button[aria-selected="true"] { border-bottom-color: var(--primary); color: #086f60; font-weight: 700; }
button.dashboard-overview-stat { font: inherit; text-align: left; cursor: pointer; min-width: 0; }
button.dashboard-overview-stat:hover { border-color: #79a99b; }
.dashboard-node-link { border: 0; padding: 4px 0; background: none; font: inherit; text-align: left; color: #15665c; cursor: pointer; }
.dashboard-node-link:hover { text-decoration: underline; }
.unified-sample-browser { min-width: 0; }
.unified-browser-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; margin-bottom: 8px; }
.unified-browser-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 10px; }
.unified-browser-filters label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; min-width: 0; }
.unified-browser-filters select { width: auto; min-width: 110px; max-width: 240px; padding: 7px 24px 7px 8px; font-size: 13px; }
.unified-data-warning { color: #936609; font-size: 13px; line-height: 1.5; }
.unified-data-warning .btn { margin-left: 8px; }
.unified-sample-browser > .quick-result-list { min-height: 0; max-height: none; overflow-y: auto; flex: 1 1 auto; align-content: start; }
.unified-sample-browser > .quick-lookup-pagination { position: static; flex: 0 0 auto; margin-top: 8px; }
.unified-sample-browser .quick-result-item { grid-template-columns: 54px minmax(0,1fr) auto; border-radius: 6px; }
.unified-sample-browser .quick-result-main { min-width: 0; }
.unified-sample-browser .sample-meta { overflow-wrap: anywhere; }
.unified-sample-browser .quick-result-statuses, .unified-sample-browser .quick-result-facts { flex-wrap: wrap; }
.development-external-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 8px 0 12px; border-bottom: 1px solid var(--line); }
@media (min-width: 1041px) {
  .workspace-dashboard .dashboard-overview-grid, .workspace-dashboard .dashboard-main-grid { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
  .workspace-dashboard .dashboard-lifecycle-row { grid-template-columns: 32px minmax(0,1fr) minmax(0,.5fr) 92px auto; gap: 6px; }
  .workspace-dashboard .dashboard-overview-stat small { white-space: normal; }
  body.data-view-active .workspace-ledger:has(.unified-sample-browser) { grid-template-rows: auto minmax(0,1fr); }
  .workspace-development:has(.unified-sample-browser) .development-shell { display: grid; grid-template-rows: auto auto minmax(0,1fr); height: calc(100vh - 150px); min-height: 560px; }
  .development-content:has(.unified-sample-browser) { display: flex; flex-direction: column; min-height: 0; }
  .development-content > .unified-sample-browser { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .workspace-dashboard .dashboard-lifecycle-value { white-space: nowrap; }
}
@media (max-width: 1040px) {
  .unified-sample-browser .quick-result-item { grid-template-columns: 48px minmax(0,1fr); }
  .unified-sample-browser .quick-result-actions { grid-column: 1 / -1; }
  .unified-browser-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .unified-browser-filters label { display: grid; gap: 3px; }
  .unified-browser-filters select { width: 100%; min-width: 0; max-width: 100%; }
  .unified-data-warning { grid-column: 1 / -1; }
  .unified-sample-browser > .quick-result-list { overflow: visible; }
  .development-external-summary { flex-wrap: wrap; }
  .workspace-dashboard .dashboard-column-title .dashboard-workbench-total { display: inline-flex; }
}
.development-organization section { display: grid; grid-template-columns: 180px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid #dbe4e0; }
.development-organization section > div:first-child { display: grid; gap: 4px; }
.organization-people { display: flex; flex-wrap: wrap; gap: 7px; }
.organization-people span { padding: 6px 9px; border: 1px solid #d4ded9; background: #f7faf8; }
.organization-people span.manager { border-color: #d6b991; background: #fff8ed; }

@media (max-width: 900px) {
  .development-head { align-items: flex-start; padding: 14px 16px 12px; }
  .development-head p { display: none; }
  .development-head-actions .btn.secondary { display: none; }
  .development-tabs { padding: 0 8px; }
  .development-content { padding: 12px 12px 90px; }
  .development-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .development-kpi { border-bottom: 1px solid #dbe4e0; }
  .development-kpi:last-child { grid-column: 1 / -1; }
  .development-work-grid, .lingmao-data-layout, .project-detail-grid { grid-template-columns: 1fr; }
  .development-task-row, .development-record, .development-production-row { grid-template-columns: 1fr; gap: 9px; padding: 14px; }
  .development-task-state { grid-auto-flow: column; justify-content: start; align-items: center; }
  .development-task-actions, .development-record-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .development-task-actions .btn, .development-record-actions .btn { width: 100%; }
  .development-project-grid { grid-template-columns: 1fr; }
  .development-project-tile { min-height: 0; }
  .development-form-grid { grid-template-columns: 1fr; }
  .development-form-grid .span-2 { grid-column: auto; }
  .project-summary-band { grid-template-columns: repeat(2, 1fr); }
  .project-summary-band > div:nth-child(2) { border-right: 0; }
  .project-flow-grid { grid-template-columns: 1fr; }
  .lingmao-data-head { align-items: flex-start; flex-direction: column; }
  .lingmao-connection-summary { width: 100%; overflow-x: auto; }
  .lingmao-browser-toolbar { grid-template-columns: 1fr 1fr; }
  .lingmao-filter-type, .lingmao-filter-keyword { grid-column: 1 / -1; }
  .lingmao-resource-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lingmao-table-head { align-items: flex-start; flex-direction: column; }
  .lingmao-table-head small { display: none; }
  .lingmao-table-wrap { min-height: 300px; overflow: visible; border: 0; background: transparent; }
  .lingmao-entity-table, .lingmao-entity-table tbody { display: grid; gap: 8px; }
  .lingmao-entity-table thead { display: none; }
  .lingmao-entity-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; padding: 12px; border: 1px solid #d3dfda; background: #fffdfa; }
  .lingmao-entity-table td { display: grid; gap: 2px; height: auto; padding: 0; border: 0; }
  .lingmao-entity-table td::before { content: attr(data-label); color: #74827d; font-size: 11px; }
  .lingmao-entity-table td:nth-child(2), .lingmao-entity-table td:nth-child(4), .lingmao-entity-table td:nth-child(8) { grid-column: 1 / -1; }
  .lingmao-entity-table td:nth-child(8)::before { display: none; }
  .lingmao-entity-table td:nth-child(8) .btn { width: 100%; }
  .lingmao-pager { align-items: stretch; flex-direction: column; }
  .lingmao-pager label { justify-content: space-between; }
  .lingmao-page-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lingmao-page-buttons .btn { width: 100%; min-width: 0; }
  .lingmao-sync-actions { align-items: flex-start; flex-direction: column; }
  .lingmao-sync-actions > span { overflow-wrap: anywhere; }
  .lingmao-run-list > div { grid-template-columns: 1fr; gap: 3px; }
  .lingmao-detail-summary { grid-template-columns: 1fr 1fr; }
  .lingmao-detail-summary > div:nth-child(3n) { border-right: 1px solid #dbe4e0; }
  .lingmao-detail-summary > div:nth-child(2n) { border-right: 0; }
  .lingmao-detail-fields dl > div { grid-template-columns: 1fr; }
  .development-organization section { grid-template-columns: 1fr; }
}