/* ═══ Global wireframe utility classes ═══ */

.auth-brand-panel {
  flex:0 0 42%;
  min-width:420px;
  max-width:42%;
  height:100%;
  background: var(--brand-gradient);
  padding: var(--space-3xl);
  color:white;
  overflow:hidden;
}

.auth-form-panel {
  flex:1;
  min-width:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding: var(--space-3xl);
}

.auth-shell {
  height:100%;
  display:flex;
  overflow:hidden;
  background: var(--bg-card);
  font-family: var(--font-family);
  color: var(--text-primary);
}

.avatar-56 {
  width:56px;
  height:56px;
  border-radius: var(--radius-lg);
  background: var(--accent-color);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color:white;
  flex-shrink:0;
}

.bottom-tabs {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  border-top:1px solid var(--border-hairline);
  background: var(--bg-card);
  display:flex;
  padding: var(--space-xs) 0 24px;
}

.brand-label {
  display:block;
  font-size:13px;
  font-weight:700;
  color: var(--accent-color);
  letter-spacing: 0.5px;
}

.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-base);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-sm);
}

.card-md {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-md);
}

.content-fill {
  height:100%;
  overflow:hidden;
}

.dot-deposited {
  width:10px;
  height:10px;
  border-radius:50%;
  background: var(--status-deposited);
  flex-shrink:0;
}

.dot-progress {
  width:10px;
  height:10px;
  border-radius:50%;
  background: var(--status-in-progress);
  flex-shrink:0;
}

.dot-ready {
  width:10px;
  height:10px;
  border-radius:50%;
  background: var(--status-ready);
  flex-shrink:0;
}

.dropzone {
  height:128px;
  border:2px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-app);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: var(--space-xs);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  cursor:pointer;
}

.filter-pill {
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  padding: var(--space-xs) var(--space-base);
  border:1px solid var(--gray-200);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background: var(--bg-card);
  color: var(--text-secondary);
}

.flex-1 {
  flex:1;
}

.flex-between {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.flex-between-baseline {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}

.flex-between-baseline-mb {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom: var(--space-xs);
}

.flex-between-mb {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 10px;
}

.flex-between-md {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-md);
}

.flex-between-mt {
  display:flex;
  justify-content:space-between;
  margin-top: var(--space-xxs);
}

.flex-between-sm {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-sm);
}

.flex-center-sm {
  display:flex;
  align-items:center;
  gap: var(--space-sm);
}

.flex-center-sm-mb {
  display:flex;
  align-items:center;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

.flex-col-2 {
  display:flex;
  flex-direction:column;
  gap:2px;
}

.flex-col-base {
  display:flex;
  flex-direction:column;
  gap: var(--space-base);
}

.flex-col-sm {
  display:flex;
  flex-direction:column;
  gap: var(--space-sm);
}

.flex-col-xs-py {
  display:flex;
  flex-direction:column;
  gap: var(--space-xs);
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}

.flex-gap-4 {
  display:flex;
  gap:4px;
}

.flex-gap-sm {
  display:flex;
  gap: var(--space-sm);
}

.flex-scroll-xs {
  display:flex;
  gap: var(--space-xs);
  overflow-x:auto;
  padding:2px 0;
}

.form-narrow {
  width:min(100%, 440px);
  margin: 0 auto;
}

.heading-hint {
  margin:0;
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.heading-hint-italic {
  margin:0;
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  font-style:italic;
}

.heading-lg {
  margin:0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.heading-sm {
  margin:0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.heading-subtitle {
  margin:0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-align:center;
  max-width:320px;
}

.heading-xl {
  margin:0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.heading-xl-center {
  margin:0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  text-align:center;
}

.hero-subtitle {
  margin:0 0 var(--space-2xl);
  color: var(--text-secondary);
}

.hero-title {
  margin:0 0 var(--space-base);
  font-size: var(--font-size-3xl);
  font-weight:800;
  line-height: var(--line-height-tight);
  white-space:pre-line;
}

.icon-12-red {
  width:12px;
  height:12px;
  filter: invert(29%) sepia(96%) saturate(5765%) hue-rotate(349deg) brightness(97%) contrast(94%);
}

.icon-16 {
  width:16px;
  height:16px;
  opacity:.7;
}

.icon-18 {
  width:18px;
  height:18px;
  opacity:.6;
}

.icon-22 {
  width:22px;
  height:22px;
}

.icon-22-mb {
  width:22px;
  height:22px;
  margin-bottom:2px;
}

.icon-24-dim {
  width:24px;
  height:24px;
  opacity:.5;
}

.icon-40 {
  width:40px;
  height:40px;
}

.icon-circle-lg {
  width:64px;
  height:64px;
  border-radius: var(--radius-xl);
  background: var(--accent-light);
  color: var(--accent-color);
  display:flex;
  align-items:center;
  justify-content:center;
}

.kpi-card {
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.kpi-grid-3 {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.kpi-grid-5 {
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-base);
  margin: var(--space-xl) 0;
}

.kpi-value {
  margin-top:4px;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}

.link-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.mb-lg {
  margin-bottom: var(--space-lg);
}

.mobile-content {
  box-sizing:border-box;
  padding: var(--space-base) var(--space-md) var(--space-xl);
  display:flex;
  flex-direction:column;
  gap: var(--space-lg);
}

.mobile-scroll-content {
  height:calc(100% - 73px);
  overflow-y:auto;
  padding: var(--space-base) var(--space-md) 92px;
  display:flex;
  flex-direction:column;
  gap: var(--space-lg);
}

.order-card {
  width:100%;
  border:none;
  text-align:left;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-base) var(--space-md);
  display:flex;
  flex-direction:column;
  gap: var(--space-xs);
}

.page-desktop {
  height:100%;
  background: var(--bg-app);
  font-family: var(--font-family);
  color: var(--text-primary);
  overflow-y:auto;
  padding: var(--space-md);
}

.page-desktop-flex {
  height:100%;
  background: var(--bg-app);
  font-family: var(--font-family);
  color: var(--text-primary);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}

.page-desktop-flex-lg {
  height:100%;
  background: var(--bg-app);
  font-family: var(--font-family);
  color: var(--text-primary);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap: var(--space-lg);
  padding-top: var(--space-md);
}

.page-desktop-gapped {
  height:100%;
  background: var(--bg-app);
  font-family: var(--font-family);
  color: var(--text-primary);
  overflow-y:auto;
  padding: var(--space-md);
  display:flex;
  flex-direction:column;
  gap: var(--space-xl);
}

.page-mobile {
  height:100%;
  box-sizing:border-box;
  position:relative;
  background: var(--bg-app);
}

.page-scroll {
  height:100%;
  overflow:auto;
  background: var(--bg-app);
}

.panel-hint {
  margin:0;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-hairline);
}

.panel-hint-xs {
  margin:0;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-hairline);
}

.panel-row {
  display:flex;
  align-items:center;
  gap: var(--space-sm);
  padding: var(--space-base) var(--space-md);
  border-bottom: 1px solid var(--border-hairline);
}

.panel-row-between {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: var(--space-base) var(--space-md);
  border-bottom: 1px solid var(--border-hairline);
}

.panel-row-between-sm {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-hairline);
}

.panel-row-sm {
  display:flex;
  align-items:center;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-hairline);
}

.panel-row-xs {
  display:flex;
  align-items:center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: var(--space-sm);
}

.pb-sm {
  padding-bottom: var(--space-sm);
}

.progress-active {
  height:4px;
  flex:1;
  border-radius:2px;
  background: var(--accent-color);
}

.progress-deposited {
  flex:1;
  height:6px;
  border-radius:3px;
  background: var(--status-deposited);
}

.progress-empty {
  flex:1;
  height:6px;
  border-radius:3px;
  background: var(--gray-200);
}

.progress-in-progress {
  flex:1;
  height:6px;
  border-radius:3px;
  background: var(--status-in-progress);
}

.progress-ready {
  flex:1;
  height:6px;
  border-radius:3px;
  background: var(--status-ready);
}

.px-gutter {
  padding: 0 var(--page-gutter);
}

.scanner-card {
  width:100%;
  max-width:480px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: var(--space-base);
  padding: var(--space-3xl) var(--space-xl);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.scanner-card-mobile {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: var(--space-base);
  padding: var(--space-3xl) var(--space-lg);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.section-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  text-transform:uppercase;
  letter-spacing:0.06em;
}

.section-label-sm {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight: var(--font-weight-medium);
}

.section-title {
  display:block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform:uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}

.section-title-inline {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform:uppercase;
  letter-spacing: 0.5px;
}

.sidebar-item {
  display:flex;
  align-items:center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-base);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}

.skeleton-kpi {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: var(--space-xs);
  padding: var(--space-base) var(--space-xs);
  background: var(--gray-50);
  border-radius: var(--radius-lg);
}

.stepper-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background: var(--text-secondary);
  opacity:1;
}

.tab-content {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:4px;
}

.tab-item {
  flex:1;
  text-align:center;
  opacity:.4;
  text-decoration:none;
}

.tab-item-active {
  flex:1;
  text-align:center;
  opacity:1;
  text-decoration:none;
}

.tab-item-btn {
  flex:1;
  text-align:center;
  opacity:.4;
  border:none;
  background:transparent;
}

.tab-label {
  display:block;
  font-size:10px;
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.tab-label-active {
  display:block;
  font-size:10px;
  font-weight: var(--font-weight-bold);
  color: var(--accent-color);
}

.text-10-ready {
  font-size:10px;
  color: var(--status-ready);
  font-weight:600;
}

.text-10-tertiary {
  font-size:10px;
  color: var(--text-tertiary);
}

.text-13-tertiary {
  font-size:13px;
  color: var(--text-tertiary);
}

.text-13-tertiary-mt {
  font-size:13px;
  color: var(--text-tertiary);
  margin-top:2px;
}

.text-base-700-mb {
  font-size: var(--font-size-base);
  font-weight:700;
  color: var(--text-primary);
  margin-bottom: var(--space-xxs);
}

.text-base-bold {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.text-base-brand {
  font-size: var(--font-size-base);
  font-weight: 800;
  color: var(--accent-color);
  letter-spacing: -0.3px;
}

.text-base-semibold {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.text-medium-primary {
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.text-sm-600 {
  font-size: var(--font-size-sm);
  font-weight:600;
}

.text-sm-600-deposited {
  font-size: var(--font-size-sm);
  font-weight:600;
  color: var(--status-deposited);
}

.text-sm-600-progress {
  font-size: var(--font-size-sm);
  font-weight:600;
  color: var(--status-in-progress);
}

.text-sm-600-ready {
  font-size: var(--font-size-sm);
  font-weight:600;
  color: var(--status-ready);
}

.text-sm-bold-accent {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--accent-color);
}

.text-sm-medium {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.text-sm-secondary {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.text-sm-secondary-fixed {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  min-width:80px;
  flex-shrink:0;
}

.text-sm-secondary-mb {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.text-sm-secondary-mb2 {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.text-sm-secondary-shrink {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  flex-shrink:0;
}

.text-sm-semibold {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.text-sm-semibold-right {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  text-align:right;
}

.text-sm-semibold-tabular {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-variant-numeric:tabular-nums;
}

.text-sm-tertiary {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.text-xl-800 {
  font-size: var(--font-size-xl);
  font-weight:800;
}

.text-xs-700-ready-tabular {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--status-ready);
  font-variant-numeric: tabular-nums;
}

.text-xs-accent-link {
  font-size: var(--font-size-xs);
  color: var(--accent-color);
  text-decoration:none;
  word-break:break-all;
}

.text-xs-tertiary {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.text-xs-tertiary-end {
  margin-left:auto;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.text-xs-tertiary-mt {
  display:block;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top:2px;
}

.text-xs-tertiary-tabular {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.time-input {
  width:100px;
  height:36px;
  padding:0 var(--space-sm);
  border:1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background: var(--bg-input, var(--bg-app));
  font-variant-numeric:tabular-nums;
  font-family:inherit;
}

.timeline-line {
  width:2px;
  flex:1;
  background: var(--gray-200);
  margin-top:4px;
  min-height:20px;
}

.tracking-header {
  background: var(--bg-card);
  padding: var(--space-base) var(--page-gutter);
  text-align:center;
  border-bottom: 1px solid var(--border-color);
}

.tracking-header-inline {
  background: var(--bg-card);
  padding: var(--space-base) var(--space-xl);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--space-xs);
  border-bottom: 1px solid var(--border-color);
}