* { box-sizing: border-box; }

html {
  min-width: 0;
  background: var(--picker-background);
}

body {
  margin: 0;
  min-width: 0;
  font-family: var(--picker-font-family);
  color: var(--picker-text);
  background:
    radial-gradient(circle at top right, rgba(241, 95, 87, 0.12), transparent 28%),
    linear-gradient(180deg, var(--picker-background) 0%, var(--picker-background-mid) 42%, var(--picker-background-end) 100%);
}

body.history-active {
  background: var(--history-page-background);
}

body.history-active {
  background:
    linear-gradient(180deg, #d8e9f7 0%, var(--history-page-background) 44%, #eef6fd 100%);
}

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

button {
  touch-action: manipulation;
}

.hidden { display: none !important; }

.app-shell {
  width: min(100%, var(--picker-page-max-width));
  margin: 0 auto;
  padding: max(1.2rem, calc(env(safe-area-inset-top, 0px) + 1rem)) 0.7rem calc(6rem + env(safe-area-inset-bottom, 0px));
}

.app-logo-top {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 4.8rem;
  margin: 0 auto 0.85rem;
  line-height: 1;
}

.app-logo-top img {
  display: block;
  width: min(18rem, 78vw);
  height: auto;
  object-fit: contain;
}

.login-page,
.picker-selection-page {
  display: grid;
  gap: var(--picker-space-3);
}

.login-shell {
  background: linear-gradient(180deg, #fff7f6 0%, #ffffff 100%);
  border: 1px solid rgba(241, 95, 87, 0.14);
  border-radius: 28px;
  padding: 20px 16px 18px;
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.08);
  margin-bottom: 14px;
}

.login-kicker {
  color: var(--picker-primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 8px;
}

.login-title {
  color: var(--picker-text);
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  margin: 0 0 10px;
}

.login-form-card {
  display: grid;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #f0d9d6;
  border-radius: 22px;
  padding: 16px 14px 14px;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.05);
}

.login-form-kicker {
  text-align: left;
  margin-bottom: 0;
}

.login-form-title {
  color: var(--picker-text);
  font-size: 24px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0;
}

.login-form-copy {
  color: var(--picker-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.login-field {
  display: grid;
  gap: 0.32rem;
  color: var(--picker-text-muted);
  font-size: 0.82rem;
  font-weight: var(--picker-font-weight-heavy);
}

.login-field input {
  width: 100%;
  min-height: var(--picker-control-height);
  border: 1px solid var(--picker-border);
  border-radius: 14px;
  background: #ffffff;
  padding: 0.65rem 0.78rem;
  color: var(--picker-text);
  font-size: 16px;
  font-weight: 750;
  outline: none;
}

.login-field input:focus {
  border-color: var(--picker-primary);
  box-shadow: 0 0 0 3px rgba(241, 95, 87, 0.14);
}

.login-error {
  min-height: 1.25rem;
  color: var(--picker-error);
  font-size: 0.86rem;
  font-weight: 850;
}

.picker-setup-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(245, 158, 11, 0.34);
  background: radial-gradient(circle at 88% 18%, rgba(251, 191, 36, 0.26), transparent 30%), linear-gradient(180deg, rgba(255, 251, 235, 0.98) 0%, rgba(255, 247, 237, 0.98) 100%);
  box-shadow: 0 16px 36px rgba(217, 119, 6, 0.12);
}

.picker-setup-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.picker-shift-badge {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.32rem 0.68rem;
  border-radius: var(--picker-radius-pill);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111827;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.86);
}

.picker-shift-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--picker-space-2);
}

.picker-list {
  display: grid;
  gap: var(--picker-space-2);
  max-height: 390px;
  overflow: auto;
  padding-right: 0.15rem;
}

.picker-option {
  display: grid;
  gap: 0.22rem;
  width: 100%;
  min-height: 78px;
  border: 1px solid var(--picker-border);
  border-radius: var(--picker-radius-medium);
  background: var(--picker-card-button-bg);
  color: var(--picker-text);
  padding: 0.86rem 0.95rem;
  text-align: left;
  box-shadow: var(--picker-shadow-soft);
}

.picker-option strong {
  font-size: 1rem;
  font-weight: var(--picker-font-weight-heavy);
}

.picker-option span {
  color: var(--picker-text-muted);
  font-size: 0.84rem;
  font-weight: 750;
}

.picker-option-disabled,
.picker-option:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  filter: grayscale(0.3);
  background: #edf1f5;
  border-color: #c9d3dd;
  color: #66717e;
}

.picker-option-disabled span,
.picker-option:disabled span {
  color: #6f7a86;
  font-weight: 900;
}

.picker-selection-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.mobile-header-card {
  position: static;
  top: auto;
  z-index: auto;
  margin: 0.35rem 0 0.75rem;
  padding: 0.82rem 0.78rem 0.72rem;
  overflow: hidden;
  background: var(--picker-surface);
  border: 1px solid var(--picker-border);
  border-radius: var(--picker-radius-large);
  box-shadow: var(--picker-shadow-soft);
}

.mobile-header-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: start;
}

.mobile-header-title-block {
  grid-column: 1;
  grid-row: 1;
}

.mobile-header-kicker,
.section-kicker,
.control-label,
.metric-label {
  margin: 0;
  color: var(--picker-text-muted);
  font-size: var(--picker-font-size-kicker);
  font-weight: var(--picker-font-weight-heavy);
  letter-spacing: 0.13em;
  line-height: 1.05;
  text-transform: uppercase;
}

.mobile-header-title,
.section-title {
  margin: 0.18rem 0 0;
  color: var(--picker-text);
  font-size: var(--picker-font-size-title);
  font-weight: var(--picker-font-weight-heavy);
  line-height: 1.05;
  letter-spacing: 0;
}

.section-title {
  font-size: 1.28rem;
}

.section-title-compact {
  margin: 0;
  color: var(--picker-text);
  font-size: 1rem;
  font-weight: var(--picker-font-weight-heavy);
  line-height: 1.12;
  letter-spacing: 0;
}

.section-copy,
.muted-copy,
.version-info {
  color: var(--picker-text-muted);
  font-size: var(--picker-font-size-body);
  line-height: 1.35;
}

.version-info {
  margin-top: 0.22rem;
  font-size: 0.76rem;
}

.header-actions,
.header-pills,
.diagnostic-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--picker-space-2);
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.65rem 0 0.12rem;
  scroll-padding-inline: 0.2rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.header-actions {
  margin-right: -0.2rem;
  padding-right: 0.2rem;
}

.header-actions::-webkit-scrollbar,
.header-pills::-webkit-scrollbar {
  display: none;
}

.header-pill,
.secondary-link,
.secondary-button {
  flex: 0 0 auto;
  min-height: 42px;
  min-width: 7.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  padding: 0.5rem 0.68rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: var(--picker-radius-medium);
  background: #fffdfd;
  color: var(--picker-text);
  text-align: center;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: var(--picker-font-weight-heavy);
  line-height: 1.12;
  cursor: pointer;
}

.header-pill {
  flex-direction: column;
  align-items: flex-start;
  min-height: 58px;
  flex: 0 0 auto;
  min-width: 8.2rem;
  scroll-snap-align: start;
}

.header-control-chip:nth-child(3),
.header-control-chip:nth-child(6) {
  margin-left: 0.28rem;
}

.header-input-chip {
  width: 10.8rem;
  padding: 0.42rem 0.5rem 0.5rem;
}

.header-date-chip {
  width: 11.4rem;
}

.header-control-input {
  width: 100%;
  min-height: 2.25rem;
  margin-top: 0.22rem;
  border: 1px solid var(--picker-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  color: var(--picker-text);
  padding: 0.42rem 0.52rem;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.1;
  outline: none;
}

.header-control-input:focus {
  border-color: var(--picker-primary);
  box-shadow: 0 0 0 3px rgba(241, 95, 87, 0.14);
}

.header-pill span,
.header-refresh-pill span {
  color: var(--picker-text-muted);
  font-size: 0.66rem;
  font-weight: var(--picker-font-weight-heavy);
  letter-spacing: 0.12em;
  line-height: 1.05;
  text-transform: uppercase;
}

.header-pill strong,
.header-refresh-pill strong {
  display: block;
  color: var(--picker-text);
  font-size: 0.9rem;
  font-weight: var(--picker-font-weight-heavy);
  line-height: 1.16;
}

.header-refresh-pill {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  min-width: 10.2rem;
  border: 1px solid var(--picker-success-border-soft);
  border-radius: 999px;
  background: var(--picker-success-bg);
  color: #173826;
  padding: 0.35rem 0.84rem;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
  width: auto;
  justify-self: start;
  grid-column: auto;
}

.header-refresh-pill span,
.header-refresh-pill strong {
  color: #173826;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: none;
}

.header-refresh-pill.is-refreshing,
.header-refresh-pill:disabled {
  cursor: wait;
  opacity: 0.78;
}

.secondary-button,
.secondary-link {
  min-width: auto;
}

.header-pill-small {
  min-width: 5.6rem;
}

.sage-health-ok {
  border-color: var(--picker-success-border-soft);
  background: var(--picker-success-bg);
  color: var(--picker-success);
}

.sage-health-ok strong,
.sage-health-ok span {
  color: var(--picker-success);
}

.sage-health-error {
  border-color: var(--picker-danger-border);
  background: var(--picker-danger-bg);
  color: var(--picker-danger);
}

.sage-health-error strong,
.sage-health-error span {
  color: var(--picker-danger);
}

.status {
  flex: 0 0 auto;
  min-height: 58px;
  min-width: 6.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  border-radius: var(--picker-radius-medium);
  padding: 0.5rem 0.72rem;
  border: 1px solid var(--picker-metric-border);
  background: var(--picker-surface-tint);
  color: var(--picker-text);
  font-size: 0.76rem;
  font-weight: var(--picker-font-weight-heavy);
}

.status.online,
.badge-success {
  background: var(--picker-success-bg);
  border-color: var(--picker-success-border-soft);
  color: var(--picker-success);
}

.status.offline,
.badge-warning {
  background: var(--picker-warning-bg);
  border-color: var(--picker-warning-border-soft);
  color: var(--picker-warning);
}

.toolbar-card,
.hero-card,
.app-card,
.empty-card,
.diagnostics {
  background: var(--picker-surface);
  border: 1px solid var(--picker-border);
  border-radius: var(--picker-radius-medium);
  box-shadow: var(--picker-shadow-soft);
}

.hero-card {
  padding: var(--picker-card-padding);
  background: var(--picker-hero-bg);
}

.toolbar-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--picker-space-2);
  margin-bottom: var(--picker-space-3);
  padding: var(--picker-space-3);
}

.tab-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
  margin: 0 0 var(--picker-space-3);
  padding: 0.3rem;
  border: 1px solid var(--picker-border);
  border-radius: var(--picker-radius-medium);
  background: var(--picker-surface);
  box-shadow: var(--picker-shadow-soft);
}

.tab-button,
.location-button {
  min-height: 52px;
  border: 1px solid var(--picker-primary-border-soft);
  border-radius: 14px;
  background: var(--picker-surface);
  color: var(--picker-primary-hover);
  font-weight: var(--picker-font-weight-heavy);
  cursor: pointer;
}

.tab-button.active,
.location-button.active {
  background: linear-gradient(160deg, var(--picker-primary) 0%, var(--picker-primary-hover) 100%);
  border-color: var(--picker-primary-hover);
  color: #ffffff;
}

.select-item-section {
  display: grid;
  gap: var(--picker-space-2);
  margin: 0 0 var(--picker-space-3);
}

.location-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--picker-space-3);
  padding: var(--picker-card-padding);
  border: 1px solid var(--picker-border);
  border-radius: var(--picker-radius-medium);
  background: var(--picker-hero-bg);
  box-shadow: var(--picker-shadow-soft);
}

.location-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--picker-space-2);
}

.toolbar-card label {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
}

.toolbar-card input,
.addWeightInput {
  width: 100%;
  min-height: var(--picker-control-height);
  border: 1px solid var(--picker-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  padding: 0.65rem 0.78rem;
  font-size: 16px;
  font-weight: 750;
  outline: none;
}

.toolbar-card input:focus,
.addWeightInput:focus {
  border-color: var(--picker-primary);
  box-shadow: 0 0 0 3px rgba(241, 95, 87, 0.14);
}

.primary-button,
.addWeightButton,
#retryBtn,
#copyDeviceBtn,
#exportBtn {
  min-height: var(--picker-button-height);
  border: 1px solid var(--picker-primary);
  border-radius: 14px;
  background: linear-gradient(160deg, var(--picker-primary) 0%, var(--picker-primary-hover) 100%);
  color: #ffffff;
  padding: 0.72rem 0.9rem;
  font-weight: var(--picker-font-weight-heavy);
  line-height: 1.12;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
}

.history-page {
  display: grid;
  gap: var(--picker-space-3);
}

.history-overview-hero,
.history-filter-panel {
  padding: var(--picker-card-padding);
  border: 1px solid var(--picker-border);
  border-radius: var(--picker-radius-large);
  background: var(--picker-surface);
  box-shadow: var(--picker-shadow-soft);
}

.history-overview-hero {
  display: grid;
  gap: var(--picker-space-3);
}

.history-overview-kicker,
.history-overview-label {
  color: var(--picker-muted);
  font-size: 0.72rem;
  font-weight: var(--picker-font-weight-heavy);
  letter-spacing: 0;
  text-transform: uppercase;
}

.history-overview-summary-title,
.history-command-title {
  color: var(--picker-ink);
  font-size: 1.08rem;
  font-weight: var(--picker-font-weight-heavy);
  line-height: 1.15;
}

.history-overview-copy,
.history-command-copy,
.history-filter-info {
  color: var(--picker-muted);
  font-size: 0.86rem;
  font-weight: var(--picker-font-weight-bold);
  line-height: 1.25;
}

.history-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--picker-space-2);
}

.history-overview-tile {
  padding: 0.78rem;
  border: 1px solid var(--picker-primary-border-soft);
  border-radius: var(--picker-radius-medium);
  background: #fffdfd;
}

.history-overview-value {
  margin-top: 0.25rem;
  color: var(--picker-ink);
  font-size: 1.2rem;
  font-weight: var(--picker-font-weight-heavy);
}

.history-filter-panel {
  display: grid;
  gap: var(--picker-space-2);
}

.history-command-card {
  padding-bottom: 0.25rem;
}

.history-command-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--picker-space-2);
}

.history-mode-pill {
  flex: 0 0 auto;
  padding: 0.25rem 0.55rem;
  border: 1px solid #d8dee8;
  border-radius: var(--picker-radius-pill);
  background: #f4f7fb;
  color: #5c6676;
  font-size: 0.72rem;
  font-weight: var(--picker-font-weight-heavy);
}

.history-search-label {
  color: var(--picker-muted);
  font-size: 0.78rem;
  font-weight: var(--picker-font-weight-heavy);
}

.history-search-input {
  width: 100%;
  min-height: 2.8rem;
  border: 1px solid var(--picker-primary-border-soft);
  border-radius: var(--picker-radius-medium);
  background: #fffdfd;
  color: var(--picker-ink);
  padding: 0.72rem 0.85rem;
  font: inherit;
  font-weight: var(--picker-font-weight-bold);
}

.history-status-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--picker-space-2);
}

.history-filter-button,
.history-refresh-button,
.history-update-all-button,
.history-fill-sage-button {
  min-height: 2.75rem;
  border: 1px solid var(--picker-primary-border-soft);
  border-radius: var(--picker-radius-medium);
  background: #fffdfd;
  color: var(--picker-primary);
  padding: 0.65rem 0.7rem;
  font-weight: var(--picker-font-weight-heavy);
}

.history-filter-button.active,
.history-update-all-button {
  border-color: var(--picker-primary);
  background: var(--picker-primary);
  color: #ffffff;
}

.history-update-all-button:disabled,
.history-fill-sage-button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.history-list {
  display: grid;
  gap: var(--picker-space-3);
}

.history-card {
  position: relative;
  display: grid;
  gap: var(--picker-space-2);
  padding: var(--picker-card-padding);
  border: 2px solid #202020;
  border-radius: var(--picker-radius-medium);
  background: #fffdf2;
  box-shadow: none;
  overflow: hidden;
}

.history-card-tone-marker {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.35rem;
  background: #f7b84b;
}

.history-card-tone-success {
  background: #35a36b;
}

.history-card-tone-danger {
  background: #d94d45;
}

.history-card-header,
.history-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--picker-space-2);
}

.history-card-title-row {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.history-customer,
.history-description {
  color: var(--picker-ink);
  font-size: 0.98rem;
  font-weight: var(--picker-font-weight-heavy);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.history-invoice-number,
.history-stock-code,
.history-invoice-meta,
.history-item-meta {
  color: #5f6876;
  font-size: 0.78rem;
  font-weight: var(--picker-font-weight-bold);
  line-height: 1.25;
}

.history-status-badge {
  display: inline-flex;
  min-height: 1.8rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--picker-radius-pill);
  padding: 0.25rem 0.6rem;
  background: #fff0d8;
  color: #b46405;
  font-size: 0.72rem;
  font-weight: var(--picker-font-weight-heavy);
  white-space: nowrap;
}

.history-status-success,
.history-status-synced {
  background: #dcf8e8;
  color: #207648;
}

.history-status-danger {
  background: #ffe0de;
  color: #b22f29;
}

.history-status-warning,
.history-status-pending {
  background: #fff0d8;
  color: #b46405;
}

.history-fill-sage-button {
  width: 100%;
  border-color: #72c68f;
  background: #38a765;
  color: #ffffff;
}

.history-item-list {
  display: grid;
  gap: var(--picker-space-2);
}

.history-item-row {
  display: grid;
  gap: 0.45rem;
  padding: 0.78rem;
  border: 1px solid var(--picker-primary-border-soft);
  border-radius: var(--picker-radius-medium);
  background: #fffdfd;
}

.history-item-summary {
  color: var(--picker-ink);
  font-size: 0.82rem;
  font-weight: var(--picker-font-weight-bold);
  line-height: 1.25;
}

.history-final-weight {
  justify-self: start;
  border: 1px solid var(--picker-primary-border-soft);
  border-radius: var(--picker-radius-medium);
  background: #fff8f6;
  color: var(--picker-primary);
  padding: 0.45rem 0.7rem;
  font-size: 0.86rem;
  font-weight: var(--picker-font-weight-heavy);
}

.history-empty-state {
  border: 1px solid var(--picker-border);
  border-radius: var(--picker-radius-large);
  background: var(--picker-surface);
}

:root {
  --history-page-background: #d8e9f7;
  --history-panel-background: #eaf4fc;
  --history-panel-background-strong: #dbeefa;
  --history-banner-background: #d3e8f7;
  --history-banner-border: #9fc5e3;
  --history-card-background: #eef7fd;
  --history-card-border: #7fb1d6;
  --history-item-background: #f8fcff;
  --history-tab-active: #4f6f8f;
  --history-tab-inactive: #e4f0f9;
  --history-match-background: #d9f1e8;
  --history-match-border: #6fbd86;
  --history-text: #18324a;
  --history-muted: #516b82;
}

.history-blue-page {
  margin-left: -0.7rem;
  margin-right: -0.7rem;
  padding: 0.8rem 0.7rem;
  background: var(--history-page-background);
  border-radius: 0;
}

body.history-active .app-shell {
  background: var(--history-page-background);
}

body.history-active .main-logo {
  color: #2d6f9f;
}

body.history-active .main-header-card,
body.history-active .tab-nav,
body.history-active .summary {
  border-color: #a9cee7;
  background: var(--history-panel-background);
  box-shadow: 0 12px 28px rgba(38, 87, 124, 0.10);
}

body.history-active .header-pill,
body.history-active .header-control-input,
body.history-active .status,
body.history-active .header-refresh-pill {
  border-color: #b7d5ea;
  background: #f4f9fd;
}

body.history-active .mobile-header-kicker,
body.history-active .header-pill span,
body.history-active .header-refresh-pill span,
body.history-active .version-info,
body.history-active .summary {
  color: var(--history-muted);
}

body.history-active .mobile-header-title,
body.history-active .header-pill strong,
body.history-active .header-control-input {
  color: var(--history-text);
}

body.history-active .mode-banner,
body.history-active .summary {
  display: none;
}

body.history-active .tab-button {
  border-color: #a9cee7;
  background: #f4f9fd;
  color: #2f5f86;
}

body.history-active .tab-button.active {
  border-color: #3f6f98;
  background: linear-gradient(160deg, #5e8db4 0%, #3f6f98 100%);
  color: #ffffff;
}

.history-sync-banner,
.history-waiting-banner {
  padding: 0.78rem 0.9rem;
  border: 1px solid var(--history-banner-border);
  border-radius: var(--picker-radius-medium);
  background: var(--history-banner-background);
  color: var(--history-text);
  font-size: 0.86rem;
  font-weight: var(--picker-font-weight-bold);
  line-height: 1.25;
}

.refresh-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.65rem 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid #b7d5ea;
  border-radius: var(--picker-radius-medium);
  background: #f4f9fd;
  color: #18324a;
  font-size: 0.86rem;
  font-weight: var(--picker-font-weight-bold);
}

.refresh-notice.hidden {
  display: none;
}

.refresh-notice button {
  min-height: 2.15rem;
  padding: 0 0.8rem;
  border: 1px solid #7fb1d6;
  border-radius: var(--picker-radius-small);
  background: #ffffff;
  color: #18324a;
  font-weight: var(--picker-font-weight-heavy);
}

.history-tab-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0.35rem;
  border: 1px solid #cfdeeb;
  border-radius: var(--picker-radius-medium);
  background: var(--history-panel-background);
}

.history-tab-mirror {
  min-height: 2.85rem;
  border: 1px solid #c9d7e5;
  border-radius: var(--picker-radius-small);
  font-weight: var(--picker-font-weight-heavy);
}

.history-tab-active {
  background: var(--history-tab-active);
  color: #ffffff;
}

.history-tab-inactive {
  background: var(--history-tab-inactive);
  color: var(--history-text);
}

.history-bulk-sage-button,
.history-disabled-sage-button {
  width: 100%;
  min-height: 2.9rem;
  border: 1px solid #a9c9df;
  border-radius: var(--picker-radius-medium);
  background: #d4e5f2;
  color: #587188;
  font-weight: var(--picker-font-weight-heavy);
}

.history-invoice-card {
  position: relative;
  display: grid;
  gap: 0.8rem;
  padding: 0.92rem 0.92rem 0.92rem 1.08rem;
  border: 2px solid #79b7df;
  border-radius: 1rem;
  background: var(--history-card-background);
  box-shadow: 0 2px 8px rgba(45, 76, 107, 0.13);
  overflow: hidden;
}

.history-invoice-expanded {
  background: #eaf6ff;
}

.history-blue-page .history-overview-hero,
.history-blue-page .history-filter-panel,
.history-blue-page .history-empty-state,
.history-blue-page .empty-card {
  border-color: #a9cee7;
  background: var(--history-panel-background);
  box-shadow: 0 8px 20px rgba(38, 87, 124, 0.08);
}

.history-blue-page .history-overview-tile,
.history-blue-page .history-command-card,
.history-blue-page .history-search-input,
.history-blue-page .history-filter-button,
.history-blue-page .history-refresh-button,
.history-blue-page .history-update-all-button,
.history-blue-page .history-fill-sage-button {
  border-color: #b7d5ea;
  background: #f6fbff;
}

.history-blue-page .history-fill-sage-button {
  min-height: 3rem;
  color: #8aa4ba;
  font-size: 0.98rem;
  font-weight: var(--picker-font-weight-heavy);
}

.history-blue-page .history-overview-kicker,
.history-blue-page .history-overview-label,
.history-blue-page .history-search-label,
.history-blue-page .history-overview-copy,
.history-blue-page .history-command-copy,
.history-blue-page .history-filter-info,
.history-blue-page .section-kicker,
.history-blue-page .section-copy {
  color: var(--history-muted);
}

.history-blue-page .history-overview-summary-title,
.history-blue-page .history-command-title,
.history-blue-page .history-overview-value,
.history-blue-page .section-title-compact {
  color: var(--history-text);
}

.history-invoice-accent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.34rem;
  background: #79b7df;
}

.history-invoice-header,
.history-item-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: start;
  gap: 0.55rem;
}

.history-invoice-header {
  cursor: pointer;
}

.history-customer-title {
  color: var(--history-text);
  font-size: 0.98rem;
  font-weight: var(--picker-font-weight-heavy);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.history-invoice-meta {
  margin-top: 0.24rem;
  color: var(--history-muted);
  font-size: 0.78rem;
  font-weight: var(--picker-font-weight-bold);
  line-height: 1.25;
}

.history-sage-badge {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--history-match-border);
  border-radius: var(--picker-radius-pill);
  background: var(--history-match-background);
  color: #2e7b4b;
  padding: 0.25rem 0.55rem;
  font-size: 0.68rem;
  font-weight: var(--picker-font-weight-heavy);
  text-align: center;
  white-space: nowrap;
}

.history-status-warning,
.history-status-pending {
  border-color: #e8bd6a;
  background: #fff2d7;
  color: #9a650f;
}

.history-status-danger {
  border-color: #df8c86;
  background: #ffe4e2;
  color: #a7352e;
}

.history-expand-button {
  width: 2.1rem;
  min-height: 2.1rem;
  border: 1px solid #adcfe6;
  border-radius: var(--picker-radius-small);
  background: #f8fcff;
  color: var(--history-text);
  font-size: 1rem;
  font-weight: var(--picker-font-weight-heavy);
  line-height: 1;
}

.history-edit-button {
  width: 2.1rem;
  min-height: 2.1rem;
  border: 1px solid #adcfe6;
  border-radius: var(--picker-radius-small);
  background: #f8fcff;
  color: var(--history-text);
  font-size: 1rem;
  font-weight: var(--picker-font-weight-heavy);
  line-height: 1;
}

.history-edit-button.icon-pencil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}

.history-invoice-reset-button {
  display: inline-flex;
  width: 2.1rem;
  min-height: 2.1rem;
  align-items: center;
  justify-content: center;
  border: 1px solid #f1b3ad;
  border-radius: var(--picker-radius-small);
  background: #fff4f3;
  color: #b3261e;
  font-size: 0;
}

.history-expand-button:disabled {
  opacity: 0.45;
}

.history-items {
  display: grid;
  gap: 0.76rem;
}

.history-items[hidden],
.history-added-weights[hidden] {
  display: none !important;
}

.history-item-card {
  display: grid;
  gap: 0.62rem;
  padding: 0.82rem;
  border: 1px solid #a9cfe8;
  border-radius: 0.86rem;
  background: #f8fcff;
}

.history-description {
  color: var(--history-text);
  font-size: 0.9rem;
  font-weight: var(--picker-font-weight-heavy);
  line-height: 1.18;
}

.history-stock-code,
.history-item-summary {
  margin-top: 0.22rem;
  color: var(--history-muted);
  font-size: 0.76rem;
  font-weight: var(--picker-font-weight-bold);
  line-height: 1.25;
}

.history-final-quantity {
  display: inline-flex;
  justify-self: start;
  margin-top: 0.46rem;
  padding: 0.52rem 0.76rem;
  border: 1px solid #a9cfe8;
  border-radius: 0.55rem;
  background: var(--history-panel-background-strong);
  color: var(--history-text);
  font-size: 0.92rem;
  font-weight: var(--picker-font-weight-heavy);
}

.history-added-weights {
  display: grid;
  gap: 0.48rem;
  padding: 0.62rem;
  border: 1px solid #bcd9eb;
  border-radius: var(--picker-radius-small);
  background: var(--history-panel-background);
}

.history-added-weight-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.65rem;
  padding: 0.5rem;
  border: 1px solid #c2dceb;
  border-radius: var(--picker-radius-small);
  background: #ffffff;
}

.history-added-weight-main {
  min-width: 0;
}

.history-added-weight-sequence,
.history-added-weight-meta {
  color: var(--history-muted);
  font-size: 0.75rem;
  font-weight: var(--picker-font-weight-bold);
}

.history-added-weight-value {
  color: var(--history-text);
  font-size: 0.86rem;
  font-weight: var(--picker-font-weight-heavy);
  text-align: right;
}

.history-added-weight-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
}

.history-added-weight-action {
  width: 2.65rem;
  min-height: 2.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #adcfe6;
  border-radius: var(--picker-radius-small);
  background: #f8fcff;
  color: var(--history-text);
  font-size: 0;
  font-weight: var(--picker-font-weight-heavy);
  line-height: 1;
}

.history-added-weight-remove {
  border-color: rgba(185, 28, 28, 0.32);
  color: #b91c1c;
  background: #fff7f7;
}

.history-added-weight-total {
  border-color: var(--history-match-border);
  background: var(--history-match-background);
}

.icon-trash::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v5'/%3E%3Cpath d='M14 11v5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v5'/%3E%3Cpath d='M14 11v5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.danger-button {
  min-height: var(--picker-control-height);
  border: 1px solid rgba(185, 28, 28, 0.35);
  border-radius: var(--picker-radius-small);
  background: #b91c1c;
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: var(--picker-font-weight-heavy);
}

.added-weight-confirm-summary {
  display: grid;
  gap: 0.28rem;
  padding: 0.7rem;
  border: 1px solid #c2dceb;
  border-radius: var(--picker-radius-small);
  background: #ffffff;
}

.added-weight-confirm-summary span {
  color: var(--history-muted);
  font-size: 0.78rem;
  font-weight: var(--picker-font-weight-bold);
}

.added-weight-confirm-summary strong {
  color: var(--history-text);
  font-size: 1rem;
}

.primary-button:hover:not(:disabled),
.addWeightButton:hover:not(:disabled),
#downloadBtn:hover:not(:disabled),
#retryBtn:hover:not(:disabled),
#copyDeviceBtn:hover:not(:disabled),
#exportBtn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.primary-button:active:not(:disabled),
.addWeightButton:active:not(:disabled),
#downloadBtn:active:not(:disabled) {
  transform: translateY(1px) scale(0.99);
}

button:disabled,
.disabled {
  opacity: 0.58;
  cursor: not-allowed;
  box-shadow: none;
}

.mode-banner,
.summary,
.warnings {
  margin: 0 0 var(--picker-space-3);
  border-radius: var(--picker-radius-medium);
  padding: 0.72rem 0.86rem;
  font-size: 0.9rem;
  font-weight: var(--picker-font-weight-bold);
  line-height: 1.28;
}

.mode-banner {
  display: none;
}

.mode-banner.read-only,
.mode-banner.write-enabled {
  display: block;
}

.mode-banner.read-only {
  background: var(--picker-warning-bg);
  border: 1px solid var(--picker-warning-border-soft);
  color: var(--picker-warning);
}

.mode-banner.write-enabled {
  background: var(--picker-success-bg);
  border: 1px solid var(--picker-success-border-soft);
  color: var(--picker-success);
}

.summary {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(241, 214, 210, 0.62);
  color: var(--picker-text-muted);
}

.warnings {
  display: none;
  background: var(--picker-warning-bg);
  border: 1px solid var(--picker-warning-border-soft);
  color: var(--picker-warning);
}

.warnings:not(:empty) {
  display: block;
}

.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--picker-space-3);
}

.stock-item-list-card,
.product-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-height: 132px;
  overflow: hidden;
  padding: 1rem 3rem 1rem 1rem;
  background: var(--picker-surface);
  color: var(--picker-text);
  border: 1px solid var(--picker-border-strong);
  border-radius: var(--picker-radius-medium);
  box-shadow: var(--picker-shadow-soft);
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.stock-item-list-card::after,
.product-card::after {
  content: ">";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--picker-primary);
  font-size: 1.5rem;
  font-weight: var(--picker-font-weight-heavy);
}

.stock-item-list-card:hover,
.stock-item-list-card:focus,
.product-card:hover,
.product-card:focus {
  border-color: var(--picker-border-strong);
  box-shadow: 0 14px 30px rgba(241, 95, 87, 0.18);
  outline: none;
}

.product-card.opening,
.stock-item-list-card-opening {
  transform: scale(0.985);
  opacity: 0.72;
  pointer-events: none;
}

.product-card.opening::before {
  content: "Opening...";
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 3;
  padding: 0.22rem 0.52rem;
  border-radius: var(--picker-radius-pill);
  background: var(--picker-primary-soft);
  border: 1px solid var(--picker-primary-border-soft);
  color: var(--picker-primary-hover);
  font-size: 0.72rem;
  font-weight: var(--picker-font-weight-heavy);
}

.product-card-disabled,
.product-card:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  filter: grayscale(0.28);
  background: #edf1f5;
  border-color: #c9d3dd;
  color: #66717e;
  pointer-events: none;
}

.product-card-disabled::before {
  content: attr(data-presence-label);
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 3;
  max-width: min(70%, 18rem);
  padding: 0.24rem 0.56rem;
  border-radius: var(--picker-radius-pill);
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 0.72rem;
  font-weight: var(--picker-font-weight-heavy);
  line-height: 1.12;
}

.stock-item-list-content {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.stock-item-list-main,
.product-description {
  color: var(--picker-primary);
  font-size: 1.02rem;
  font-weight: var(--picker-font-weight-heavy);
  line-height: 1.14;
  overflow-wrap: anywhere;
}

.stock-item-list-code,
.product-code,
.product-location,
.product-state {
  margin-top: 0.28rem;
  color: var(--picker-text-muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.stock-item-list-meta,
.product-metrics,
.product-card-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  margin-top: 0.48rem;
}

.stock-item-list-meta span,
.product-metrics span,
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.18rem 0.5rem;
  border: 1px solid var(--picker-primary-border-soft);
  border-radius: var(--picker-radius-pill);
  background: #fffdfd;
  color: var(--picker-text);
  font-size: 0.74rem;
  font-weight: var(--picker-font-weight-bold);
}

.stock-item-list-meta strong,
.product-metrics strong {
  color: var(--picker-primary-hover);
  margin-right: 0.2rem;
}

.stock-item-list-lines,
.product-order-lines {
  display: grid;
  gap: 0.28rem;
  margin-top: 0.55rem;
  padding: 0.34rem 0.4rem;
  border: 1px solid var(--picker-primary-border-soft);
  border-radius: var(--picker-radius-small);
  background: linear-gradient(180deg, rgba(255, 244, 242, 0.92) 0%, rgba(255, 232, 228, 0.82) 100%);
}

.stock-item-list-line,
.product-order-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.34rem;
  border: 1px solid rgba(241, 95, 87, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  font-size: 0.84rem;
  line-height: 1.2;
}

.stock-item-list-customer,
.product-order-customer {
  min-width: 0;
  color: var(--picker-text);
  font-weight: var(--picker-font-weight-heavy);
  overflow-wrap: anywhere;
  white-space: normal;
}

.stock-item-list-detail,
.product-order-meta {
  display: inline-flex;
  gap: 0.42rem;
  justify-content: flex-end;
  color: var(--picker-text);
  font-weight: 800;
  white-space: nowrap;
}

.product-order-invoice,
.product-order-quantity {
  font-weight: var(--picker-font-weight-heavy);
}

.product-image {
  position: absolute;
  right: 2.8rem;
  top: 0.55rem;
  z-index: 0;
  width: min(28vw, 6.6rem);
  height: 4.8rem;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.product-image.loaded {
  opacity: 0.92;
}

.product-image.loaded + .product-image-fade {
  display: block;
}

.product-image-fade {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 246, 244, 0.95) 50%, rgba(255, 255, 255, 0.22) 74%);
  pointer-events: none;
}

.product-card > :not(.product-image):not(.product-image-fade) {
  position: relative;
  z-index: 1;
}

.detail-toolbar {
  margin-bottom: var(--picker-space-3);
}

.detail-header {
  margin: 0 0 var(--picker-space-3);
}

.header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--picker-space-3);
}

.hero-meta-grid,
.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--picker-space-2);
  margin-top: var(--picker-space-3);
}

.metric-tile {
  min-width: 0;
  min-height: 58px;
  padding: 0.55rem 0.62rem;
  border: 1px solid var(--picker-metric-border);
  border-radius: 14px;
  background: var(--picker-surface-tint);
}

.metric-value {
  margin-top: 0.16rem;
  color: var(--picker-text);
  font-size: 1rem;
  font-weight: var(--picker-font-weight-heavy);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.progress-track {
  height: 0.5rem;
  margin-top: var(--picker-space-3);
  overflow: hidden;
  border-radius: var(--picker-radius-pill);
  background: rgba(241, 214, 210, 0.62);
}

.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--picker-primary);
}

.status-line {
  margin-top: var(--picker-space-2);
  color: var(--picker-text-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.detail-lines {
  display: grid;
  gap: var(--picker-space-3);
}

.detail-header {
  display: grid;
  gap: var(--picker-space-3);
  margin-bottom: var(--picker-space-3);
}

.pick-detail-heading {
  display: grid;
  gap: 0.18rem;
  padding: 0.2rem 0 0;
}

.pick-detail-heading h2 {
  margin: 0;
  color: var(--picker-primary);
  font-size: 1.25rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.05;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.28rem;
}

.pick-detail-heading p {
  margin: 0.42rem 0 0;
  color: var(--picker-text);
  font-size: 0.98rem;
  font-weight: 850;
}

.pick-product-image-card {
  display: grid;
  gap: 0.55rem;
  padding: var(--picker-card-padding);
  border: 1px solid var(--picker-border);
  border-radius: var(--picker-radius-large);
  background: var(--picker-surface);
  box-shadow: var(--picker-shadow-soft);
}

.pick-product-image-label {
  color: var(--picker-primary);
  font-size: var(--picker-font-size-kicker);
  font-weight: var(--picker-font-weight-heavy);
  letter-spacing: 0.13em;
  line-height: 1.05;
}

.pick-product-image-title {
  color: var(--picker-text);
  font-size: 1.02rem;
  font-weight: 950;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.pick-product-image-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 280px;
  overflow: hidden;
  border: 1px solid var(--picker-primary-border-soft);
  border-radius: var(--picker-radius-medium);
  background: linear-gradient(180deg, rgba(255, 244, 242, 0.82) 0%, rgba(255, 253, 253, 0.96) 100%);
}

.pick-product-image {
  display: block;
  width: min(82%, 22rem);
  max-height: 310px;
  object-fit: contain;
  opacity: 0;
  transition: opacity 160ms ease;
}

.pick-product-image.loaded {
  opacity: 1;
}

.pick-product-image-fallback {
  color: var(--picker-text-muted);
  font-weight: 850;
}

.stock-invoice-card,
.detail-line {
  padding: var(--picker-card-padding);
  border: 4px solid var(--picker-border-strong);
  border-radius: var(--picker-radius-medium);
  background: rgba(255, 251, 235, 0.72);
}

.detail-line.line-completed {
  background: rgba(240, 253, 244, 0.72);
}

.pick-invoice-card {
  display: grid;
  gap: var(--picker-space-3);
}

.pick-invoice-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--picker-space-2);
  align-items: start;
}

.pick-invoice-main {
  display: grid;
  min-width: 0;
  gap: 0.22rem;
}

.line-main {
  display: grid;
  gap: 0.18rem;
}

.customer,
.pick-customer-name {
  color: var(--picker-text);
  font-size: 1rem;
  font-weight: var(--picker-font-weight-heavy);
  line-height: 1.14;
  margin: 0;
  overflow-wrap: anywhere;
}

.invoice,
.qty,
.line-status,
.local-actions {
  color: var(--picker-text-muted);
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.28;
}

.pick-invoice-reference {
  color: var(--picker-text-muted);
  font-size: var(--picker-font-size-kicker);
  font-weight: var(--picker-font-weight-heavy);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.pick-invoice-summary {
  color: var(--picker-text-muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.pick-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.9rem;
  padding: 0.28rem 0.62rem;
  border: 1px solid var(--picker-warning-border-soft);
  border-radius: var(--picker-radius-pill);
  background: var(--picker-warning-bg);
  color: var(--picker-warning);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.pick-status-completed {
  border-color: var(--picker-success-border-soft);
  background: var(--picker-success-bg);
  color: var(--picker-success);
}

.add-weight-form,
.pick-weight-panel {
  display: grid;
  gap: var(--picker-space-2);
  margin-top: var(--picker-space-3);
  padding: 0.8rem 0.85rem;
  border: 1px solid rgba(241, 95, 87, 0.18);
  border-radius: var(--picker-radius-medium);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 244, 242, 0.98) 100%);
}

.add-weight-description-label,
.pick-weight-product-name {
  color: var(--picker-text);
  font-size: 0.92rem;
  font-weight: 950;
  line-height: 1.25;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.pick-weight-input-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8.8rem, auto);
  gap: var(--picker-space-2);
  align-items: stretch;
}

.weight-status {
  min-height: 1.45rem;
  color: var(--picker-text-muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.readonly-help {
  display: none;
  padding: 0.62rem 0.72rem;
  border: 1px solid var(--picker-warning-border-soft);
  border-radius: var(--picker-radius-small);
  background: var(--picker-warning-bg);
  color: var(--picker-warning);
  font-size: 0.84rem;
  font-weight: 850;
}

.pick-weight-input,
.addWeightInput {
  width: 100%;
  min-height: 3.25rem;
  border: 1px solid var(--picker-border);
  border-radius: 14px;
  background: #ffffff;
  color: var(--picker-text-muted);
  padding: 0.55rem 0.7rem;
  font-size: 1.26rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  outline: none;
}

.addWeightInput {
  padding-right: 7.2rem;
}

.amigo-add-weight-live-total {
  position: absolute;
  right: calc(8.8rem + var(--picker-space-2) + 0.8rem);
  top: 50%;
  transform: translateY(-50%);
  min-width: 5.8rem;
  padding: 0.28rem 0.48rem;
  border: 1px solid var(--picker-primary-border-soft);
  border-radius: var(--picker-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--picker-primary-hover);
  font-size: 0.86rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.pick-weight-input::-webkit-outer-spin-button,
.pick-weight-input::-webkit-inner-spin-button,
.addWeightInput::-webkit-outer-spin-button,
.addWeightInput::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.pick-weight-input,
.addWeightInput {
  appearance: textfield;
}

.pick-clear-total-button {
  min-height: 3.25rem;
  border: 1px solid var(--picker-primary-border-soft);
  border-radius: 14px;
  background: #fffdfd;
  color: var(--picker-primary-hover);
  padding: 0.55rem 0.72rem;
  font-weight: 900;
  cursor: pointer;
}

.pick-add-weight-button {
  width: 100%;
  min-height: 3.25rem;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 14px;
  background: #fffdfd;
  color: var(--picker-text);
  font-weight: 900;
}

.add-weight-form.read-only .readonly-help,
.add-weight-form.local-test .readonly-help {
  display: block;
}

.add-weight-form.read-only .addWeightButton {
  background: #fffdfd;
  border-color: rgba(148, 163, 184, 0.34);
  color: var(--picker-text-muted);
}

.add-weight-form.local-test .addWeightButton {
  background: #eef6fd;
  border-color: #9fc5e3;
  color: #18324a;
}

.pick-invoice-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--picker-space-2);
}

.pick-metric-tile {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.7rem 0.72rem;
  border: 1px solid var(--picker-primary-border-soft);
  border-radius: var(--picker-radius-small);
  background: rgba(255, 244, 242, 0.72);
}

.pick-metric-label {
  color: var(--picker-text-muted);
  font-size: var(--picker-font-size-kicker);
  font-weight: var(--picker-font-weight-heavy);
  letter-spacing: 0.11em;
}

.pick-metric-value {
  color: var(--picker-text);
  font-size: 1.02rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.pick-slack-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.58rem;
  width: 100%;
  min-height: 3.15rem;
  border: 1px solid #d7c7de;
  border-radius: var(--picker-radius-small);
  background: #ffffff;
  color: #4a154b;
  font-size: 0.96rem;
  font-weight: 900;
}

.pick-slack-button:hover:not(:disabled),
.pick-slack-button:active:not(:disabled) {
  border-color: #4a154b;
  background: #fbf7fc;
}

.pick-slack-icon {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.42rem;
  background: #4a154b;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 950;
}

.slack-message-dialog {
  display: grid;
  gap: 0.85rem;
}

.slack-message-input {
  width: 100%;
  min-height: 8rem;
  resize: vertical;
}

.pick-invoice-divider {
  height: 4px;
  margin: 0.78rem 0;
  border-radius: var(--picker-radius-pill);
  background: var(--picker-border-strong);
}

.pick-complete-product-section {
  display: grid;
  gap: 0.55rem;
}

.pick-complete-product-button {
  min-height: 3.5rem;
  width: 100%;
  border: 1px solid var(--picker-primary);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--picker-primary) 0%, var(--picker-primary-hover) 100%);
  color: #ffffff;
  padding: 0.82rem 0.9rem;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.14;
}

.sage-work-list {
  display: flex;
  gap: var(--picker-space-2);
  max-width: 100%;
  overflow-x: auto;
  padding: 0.1rem 0 0.45rem;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.sage-work-card {
  flex: 0 0 min(24rem, calc(100% - 1rem));
  min-width: 0;
  border-width: 2px;
  scroll-snap-align: start;
}

.sage-work-card.sage-work-pending {
  border-color: #e2ae25;
  background: #fff8d9;
}

.sage-work-card.sage-work-running {
  border-color: #31a56a;
  background: #e8f8ee;
}

.sage-work-card.sage-work-failed,
.sage-work-card.sage-work-retrying {
  border-color: #df5149;
  background: #ffebe9;
}

.sage-work-card.sage-work-pending .worker-health-title strong {
  color: #8a5b00;
}

.sage-work-card.sage-work-running .worker-health-title strong {
  color: #187340;
}

.sage-work-card.sage-work-failed .worker-health-title strong,
.sage-work-card.sage-work-retrying .worker-health-title strong,
.sage-work-card.sage-work-failed .sage-work-error,
.sage-work-card.sage-work-retrying .sage-work-error {
  color: #a72d28;
}

.sage-work-card .sage-work-product {
  color: var(--picker-text);
  overflow-wrap: anywhere;
}

.sage-work-card .sage-work-error {
  color: #b46405;
}

.pick-complete-product-button:disabled {
  opacity: 0.72;
}

.pick-complete-product-help {
  color: var(--picker-text-muted);
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.28;
}

.header-picker-button {
  border: 1px solid var(--picker-border);
  text-align: left;
  cursor: pointer;
}

.header-picker-button input {
  pointer-events: none;
}

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

.pwa-modal.hidden {
  display: none;
}

.pwa-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 25, 35, 0.48);
}

.pwa-modal-panel {
  position: relative;
  z-index: 1;
  width: min(44rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  border: 1px solid var(--picker-primary-border-soft);
  border-radius: var(--picker-radius-medium);
  background: #fff8f7;
  padding: 1rem;
  box-shadow: 0 1.4rem 3rem rgba(20, 27, 36, 0.22);
}

.pwa-modal-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--picker-primary-border-soft);
  border-radius: var(--picker-radius-pill);
  background: #ffffff;
  color: var(--picker-text);
  font-weight: 950;
}

.complete-item-dialog,
.sage-worker-dialog {
  display: grid;
  gap: var(--picker-space-3);
}

.stock-complete-summary,
.worker-health-list {
  display: grid;
  gap: var(--picker-space-2);
}

.stock-complete-row,
.worker-health-card {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem;
  border: 1px solid var(--picker-primary-border-soft);
  border-radius: var(--picker-radius-small);
  background: #fffdfd;
}

.stock-complete-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.stock-complete-row span,
.worker-health-card p,
.worker-health-card div {
  color: var(--picker-text-muted);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.25;
}

.stock-complete-row strong,
.stock-complete-row b,
.worker-health-card h3,
.worker-health-title strong {
  color: var(--picker-text);
  font-weight: 950;
}

.stock-complete-filled {
  border-color: #72c68f;
  background: #f2fff7;
}

.stock-complete-skipped {
  border-color: #f0c3bd;
  background: #fff8f7;
}

.complete-item-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--picker-space-2);
}

.worker-health-title {
  display: flex;
  justify-content: space-between;
  gap: var(--picker-space-2);
}

.worker-health-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--picker-space-2);
  margin-top: 0.35rem;
}

.worker-health-action span {
  flex: 1;
}

.worker-health-action button {
  min-height: 2.5rem;
  padding: 0.55rem 0.85rem;
}

.worker-health-healthy .worker-health-title strong {
  color: #207648;
}

.worker-health-stale .worker-health-title strong,
.worker-health-warning .worker-health-title strong {
  color: #b46405;
}

.worker-health-error .worker-health-title strong,
.worker-health-failed .worker-health-title strong {
  color: #b22f29;
}

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

.worker-health-count-grid span {
  display: flex;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--picker-primary-border-soft);
  border-radius: var(--picker-radius-small);
  background: #fff8f6;
}

.local-actions {
  margin-top: var(--picker-space-2);
  display: grid;
  gap: 0.38rem;
}

.added-weight-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.65rem;
}

.added-weight-summary-text {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
  padding: 0.5rem 0.62rem;
  border: 1px solid rgba(241, 95, 87, 0.22);
  border-radius: var(--picker-radius-small);
  background: rgba(255, 255, 255, 0.74);
}

.added-weight-summary-title,
.local-actions-empty {
  color: var(--picker-text-muted);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
}

.local-actions-empty {
  padding: 0.15rem 0;
}

.added-weight-edit-button,
.added-weight-editor-done {
  min-width: 2.75rem;
  min-height: 2.65rem;
  border: 1px solid rgba(241, 95, 87, 0.42);
  border-radius: var(--picker-radius-small);
  background: #ffffff;
  color: var(--picker-primary);
  font-weight: 950;
  line-height: 1;
}

.added-weight-edit-button {
  position: relative;
  width: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}

.icon-pencil {
  position: relative;
}

.icon-pencil::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.icon-pencil::after {
  content: none;
}

.history-edit-form {
  display: grid;
  gap: var(--picker-space-3);
}

.history-edit-title {
  color: var(--picker-text);
  font-size: 1rem;
  font-weight: var(--picker-font-weight-heavy);
  line-height: 1.22;
}

.history-edit-label {
  display: grid;
  gap: 0.35rem;
  color: var(--picker-text-muted);
  font-size: 0.82rem;
  font-weight: var(--picker-font-weight-heavy);
}

.history-edit-input {
  width: 100%;
  min-height: var(--picker-control-height);
  border: 1px solid var(--picker-border);
  border-radius: 14px;
  background: #ffffff;
  color: var(--picker-text);
  padding: 0.65rem 0.78rem;
  font-size: 16px;
  font-weight: 850;
  outline: none;
}

.history-edit-help {
  min-height: 1.25rem;
  color: var(--picker-text-muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.history-edit-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--picker-space-2);
}

.added-weight-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: stretch;
}

.added-weight-editor-input {
  width: 100%;
  min-height: 2.65rem;
  min-width: 0;
  border: 1px solid rgba(241, 95, 87, 0.42);
  border-radius: var(--picker-radius-small);
  background: #ffffff;
  color: var(--picker-text);
  padding: 0.55rem 0.68rem;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.15;
}

.added-weight-editor-done {
  padding: 0 0.75rem;
  font-size: 0.84rem;
}

.empty-card,
.skeleton-card {
  min-height: 132px;
  padding: var(--picker-card-padding);
  border: 1px solid var(--picker-border);
  border-radius: var(--picker-radius-medium);
  background: var(--picker-card-button-bg);
  box-shadow: var(--picker-shadow-soft);
}

.skeleton-line {
  height: 0.85rem;
  margin: 0.45rem 0;
  border-radius: var(--picker-radius-pill);
  background: linear-gradient(90deg, rgba(241, 214, 210, 0.55), rgba(255, 255, 255, 0.8), rgba(241, 214, 210, 0.55));
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-line.short { width: 45%; }
.skeleton-line.medium { width: 70%; }

@keyframes skeleton-shimmer {
  0% { background-position: 0 0; }
  100% { background-position: -220% 0; }
}

.diagnostics {
  padding: var(--picker-card-padding);
}

.diagnostics dl {
  display: grid;
  grid-template-columns: minmax(8rem, 0.45fr) minmax(0, 1fr);
  gap: 0.45rem 0.65rem;
}

.diagnostics dt {
  color: var(--picker-text-muted);
  font-weight: var(--picker-font-weight-heavy);
}

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

pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--picker-surface-tint);
  padding: 0.75rem;
  border: 1px solid var(--picker-border);
  border-radius: var(--picker-radius-small);
}

@media (min-width: 760px) {
  .app-shell {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

}

@media (max-width: 640px) {
  .app-shell {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }

  .mobile-header-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .mobile-header-title {
    font-size: 1.32rem;
  }

  .add-weight-form,
  .hero-meta-grid,
  .metric-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .header-pill {
    min-width: 7.2rem;
  }

  .header-input-chip {
    width: 10.2rem;
  }

  .header-date-chip {
    width: 11rem;
  }

  .stock-item-list-line,
  .product-order-line {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .stock-item-list-detail,
  .product-order-meta {
    justify-content: flex-start;
    white-space: normal;
  }

  .pick-invoice-header,
  .pick-weight-input-row,
  .pick-invoice-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .amigo-add-weight-live-total {
    right: 0.8rem;
    top: 1.62rem;
  }

  .history-status-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .history-card-header,
  .history-item-head,
  .history-command-top,
  .history-invoice-header,
  .history-item-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .history-status-badge {
    justify-self: start;
    white-space: normal;
    text-align: center;
  }

  .history-sage-badge,
  .history-expand-button {
    justify-self: start;
  }

  .history-added-weight-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .history-added-weight-value {
    text-align: left;
  }

  .product-card {
    min-height: 132px;
    padding-right: 3.15rem;
  }

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

@media (max-width: 360px) {
  .product-card {
    padding: 0.82rem 2.65rem 0.82rem 0.82rem;
  }

  .stock-item-list-meta,
  .product-metrics {
    gap: 0.28rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}