@layer components {

.mail-batch-summary,
.mail-batch-documents,
.mail-batch-index,
.mail-document-viewer {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mail-batch-summary {
  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border-subtle));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-warning) 18%, transparent) 0%, transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)) 0%, color-mix(in srgb, var(--color-surface-raised) 92%, var(--color-warning) 8%) 100%);
  box-shadow: var(--shadow-sm);
}

.mail-batch-documents {
  border: 1px solid color-mix(in srgb, var(--color-primary) 12%, var(--color-border-subtle));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, transparent 24%),
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--color-warning) 10%, transparent) 0%, transparent 28%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-surface-raised) 94%, var(--color-primary) 6%) 0%, var(--color-surface) 100%);
}

.mail-batch-summary__header,
.mail-batch-summary__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.mail-batch-summary__hero,
.mail-batch-summary__compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.mail-batch-summary__compact {
  min-height: 0;
}

.mail-batch-summary__detail {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border-subtle));
  box-shadow: var(--shadow-sm);
}

.mail-batch-summary__label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.mail-batch-summary__value {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
}

.mail-batch-summary__meta,
.mail-document-list__meta,
.mail-batch-index__meta,
.mail-document-viewer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.mail-batch-summary__status,
.mail-document-list__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0 var(--space-3);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
  font-weight: 600;
}

.mail-batch-summary__chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0 var(--space-3);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 90%, transparent);
  background: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
}

.mail-batch-summary__status--submitted,
.mail-document-list__status--pending {
  background: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface));
  color: var(--color-warning-strong);
}

.mail-document-list__status--failed {
  background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
  color: var(--color-error);
}

.mail-upload {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.mail-batch-draft {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mail-batch-draft__back {
  align-self: flex-start;
}

.mail-batch-draft__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mail-batch-draft__eyebrow {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mail-batch-draft__title {
  margin: 0;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.05;
}

.mail-wizard {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(var(--space-3), 3vw, var(--space-4));
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-surface-raised) 98%, transparent);
}

.mail-wizard-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mail-wizard-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}

.mail-wizard-steps__item {
  display: flex;
}

.mail-wizard-steps__segment {
  width: 100%;
  min-height: 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-border-subtle) 84%, transparent);
}

.mail-wizard-steps__item--complete .mail-wizard-steps__segment {
  background: color-mix(in srgb, var(--color-text) 18%, var(--color-surface));
}

.mail-wizard-steps__item--current .mail-wizard-steps__segment {
  background: var(--color-text);
}

.mail-wizard-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(var(--space-4), 4vw, var(--space-6));
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.mail-wizard-step__eyebrow {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mail-wizard-step__title {
  margin: 0;
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.1;
}

.mail-wizard-step__layout {
  display: block;
}

.mail-wizard-step__main,
.mail-wizard-step__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mail-wizard-step__lead,
.mail-wizard-step__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.mail-wizard-education {
  display: grid;
  gap: var(--space-3);
}

.mail-wizard-education-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
}

.mail-wizard-education-card__eyebrow {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
}

.mail-wizard-education-card__body {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.mail-wizard-step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

.mail-wizard-checklist {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
}

.mail-wizard-checklist li {
  position: relative;
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 1.5rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
}

.mail-wizard-checklist li::before {
  content: "";
  position: absolute;
  left: var(--space-3);
  top: 1.15rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 18%, var(--color-surface));
}

.mail-network-test {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-surface-raised) 96%, transparent);
}

.mail-network-test__eyebrow,
.mail-network-test__title,
.mail-network-test__body,
.mail-network-test__metric,
.mail-network-test__wifi-title,
.mail-network-test__wifi-line {
  margin: 0;
}

.mail-network-test__eyebrow {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mail-network-test__title {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  line-height: 1.1;
}

.mail-network-test__body {
  color: var(--color-text-muted);
}

.mail-network-test__meter {
  width: 100%;
  height: 0.9rem;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-border-subtle) 82%, transparent);
}

.mail-network-test__meter-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--color-text);
  transition: width var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out);
}

.mail-network-test__metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.mail-network-test__metric strong {
  color: var(--color-text);
  font-size: var(--text-base);
}

.mail-network-test__wifi {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.mail-network-test__wifi-title {
  font-size: var(--text-sm);
  font-weight: 700;
}

.mail-network-test__wifi-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.mail-network-test[data-state="pending"] {
  color: var(--color-text);
}

.mail-network-test[data-state="passed"] {
  border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border-subtle));
  background: linear-gradient(180deg, var(--color-success-bg) 0%, var(--color-surface) 100%);
  color: var(--color-success);
}

.mail-network-test[data-state="passed"] .mail-network-test__meter-bar {
  background: var(--color-success);
}

.mail-network-test[data-state="weak"] {
  border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border-subtle));
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-warning) 12%, var(--color-surface)) 0%, var(--color-surface) 100%);
  color: var(--color-warning-strong);
}

.mail-network-test[data-state="weak"] .mail-network-test__meter-bar {
  background: var(--color-warning);
}

.mail-network-test[data-state="poor"] {
  border-color: color-mix(in srgb, var(--color-error) 40%, var(--color-border-subtle));
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-error) 10%, var(--color-surface)) 0%, var(--color-surface) 100%);
  color: var(--color-error);
}

.mail-network-test[data-state="poor"] .mail-network-test__meter-bar {
  background: var(--color-error);
}

.mail-network-test[data-state="passed"] .mail-network-test__body,
.mail-network-test[data-state="passed"] .mail-network-test__metric,
.mail-network-test[data-state="weak"] .mail-network-test__body,
.mail-network-test[data-state="weak"] .mail-network-test__metric,
.mail-network-test[data-state="poor"] .mail-network-test__body,
.mail-network-test[data-state="poor"] .mail-network-test__metric {
  color: color-mix(in srgb, currentColor 72%, var(--color-text));
}

.mail-network-test[data-state="passed"] .mail-network-test__metric strong,
.mail-network-test[data-state="weak"] .mail-network-test__metric strong,
.mail-network-test[data-state="poor"] .mail-network-test__metric strong {
  color: currentColor;
}

.mail-wizard-summary {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface-raised));
}

.mail-wizard-summary p {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border: 1px solid var(--color-border-subtle);
}

.mail-upload__education {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mail-upload__education-title {
  margin: 0;
}

.mail-upload__education-list {
  margin: 0;
  padding-inline-start: 1.2rem;
  color: var(--color-text);
}

.mail-upload__education-list li + li {
  margin-top: var(--space-1);
}

.mail-upload__choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.mail-upload__choice-grid--single {
  grid-template-columns: 1fr;
}

.mail-upload__camera-button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 12rem;
  padding: clamp(var(--space-4), 4vw, var(--space-6));
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border-subtle));
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 92%, white 8%) 0%, color-mix(in srgb, var(--color-primary) 84%, black 6%) 100%);
  color: white;
  text-align: left;
  box-shadow: var(--shadow-md);
}

.mail-upload__camera-button[hidden],
.mail-upload__camera-mode-actions[hidden],
.mail-upload__live-camera[hidden] {
  display: none;
}

.mail-upload__camera-button-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, white 16%, transparent);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}

.mail-upload__camera-button-body {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}

.mail-upload__camera-button-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
}

.mail-upload__camera-button-copy {
  font-size: var(--text-base);
  color: color-mix(in srgb, white 90%, transparent);
}

.mail-upload__choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  text-align: left;
  min-height: 9rem;
}

.mail-upload__choice-title {
  font-size: var(--text-lg);
  font-weight: 700;
}

.mail-upload__choice-copy {
  color: inherit;
  opacity: 0.92;
}

.mail-upload__choice-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 85%, transparent);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.mail-upload__camera-button .mail-upload__choice-badge {
  flex: 0 0 auto;
  align-self: flex-start;
  background: white;
  color: var(--color-primary);
}

.mail-upload__camera-mode-actions {
  display: flex;
  justify-content: flex-end;
}

.mail-upload__live-camera {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding:
    max(env(safe-area-inset-top), var(--space-4))
    max(env(safe-area-inset-right), var(--space-4))
    max(env(safe-area-inset-bottom), var(--space-5))
    max(env(safe-area-inset-left), var(--space-4));
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--color-primary) 26%, transparent) 0%, transparent 42%),
    #000;
}

.mail-upload__live-camera::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: rgba(255, 255, 255, 0.94);
}

.mail-upload__live-camera--shutter::after {
  animation: mail-live-camera-shutter 180ms var(--ease-out);
}

.mail-upload__live-camera-count {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(4, 8, 20, 0.88);
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  text-align: center;
}

@keyframes mail-live-camera-shutter {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0.96;
  }

  100% {
    opacity: 0;
  }
}

.mail-upload__live-camera-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.mail-upload__live-camera-guides {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.mail-upload__live-camera-frame {
  position: relative;
  width: min(82vw, 28rem);
  aspect-ratio: 3 / 4;
  border-radius: calc(var(--radius-xl) * 1.2);
  border: 1px solid color-mix(in srgb, white 22%, transparent);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.08) 100%);
  box-shadow:
    0 0 0 999vmax rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.mail-upload__live-camera-corner {
  position: absolute;
  width: 2.75rem;
  height: 2.75rem;
  border-color: rgba(255, 255, 255, 0.88);
  border-style: solid;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
}

.mail-upload__live-camera-corner--top-left {
  top: var(--space-3);
  left: var(--space-3);
  border-width: 0.28rem 0 0 0.28rem;
  border-radius: var(--radius-lg) 0 0 0;
}

.mail-upload__live-camera-corner--top-right {
  top: var(--space-3);
  right: var(--space-3);
  border-width: 0.28rem 0.28rem 0 0;
  border-radius: 0 var(--radius-lg) 0 0;
}

.mail-upload__live-camera-corner--bottom-left {
  bottom: var(--space-3);
  left: var(--space-3);
  border-width: 0 0 0.28rem 0.28rem;
  border-radius: 0 0 0 var(--radius-lg);
}

.mail-upload__live-camera-corner--bottom-right {
  right: var(--space-3);
  bottom: var(--space-3);
  border-width: 0 0.28rem 0.28rem 0;
  border-radius: 0 0 var(--radius-lg) 0;
}

.mail-upload__live-camera-top,
.mail-upload__live-camera-bottom {
  position: relative;
  z-index: 2;
}

.mail-upload__live-camera-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.mail-upload__live-camera-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  padding-bottom: max(env(safe-area-inset-bottom), var(--space-3));
}

.mail-upload__live-camera-capture {
  margin-bottom: var(--space-16);
  appearance: none;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 5.75rem;
  height: 5.75rem;
  min-width: 5.75rem;
  min-height: 5.75rem;
  max-width: 5.75rem;
  max-height: 5.75rem;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--duration-fast) var(--ease-default);
}

.mail-upload__live-camera-capture:hover,
.mail-upload__live-camera-capture:focus-visible {
  transform: scale(1.03);
}

.mail-upload__live-camera-capture:active {
  transform: scale(0.97);
}

.mail-upload__live-camera-capture:disabled {
  cursor: progress;
  opacity: 0.72;
  transform: none;
}

.mail-upload__live-camera-capture-ring {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 0.26rem solid rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.36),
    inset 0 0 0 0.12rem rgba(255, 255, 255, 0.12);
}

.mail-upload__live-camera-capture-core {
  display: block;
  width: calc(100% - 0.9rem);
  height: calc(100% - 0.9rem);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(235, 235, 235, 0.92) 100%);
}

.mail-upload__camera-mode-done {
  min-height: 3.5rem;
  padding-inline: var(--space-4);
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(8, 15, 35, 0.82);
  color: white;
}

.mail-upload__camera-mode-done:hover,
.mail-upload__camera-mode-done:focus-visible,
.mail-upload__camera-mode-done:active {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(8, 15, 35, 0.9);
  color: white;
}

.mail-upload__status--camera {
  margin: 0;
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.98);
  font-size: var(--text-sm);
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.mail-upload__progress--camera {
  accent-color: white;
  width: min(15rem, 100%);
}

.mail-camera-mode-active,
.mail-camera-mode-active body {
  overflow: hidden;
}

.mail-upload__choice--recommended {
  box-shadow: var(--shadow-md);
}

.mail-upload__frame {
  position: relative;
  min-height: 9rem;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-border-subtle);
  overflow: hidden;
}

.mail-upload__frame--prep {
  min-height: 14rem;
}

.mail-upload__frame-sheet,
.mail-upload__frame-envelope {
  position: absolute;
  border-radius: var(--radius-md);
  border: 2px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

.mail-upload__frame-sheet {
  inset: 1rem 1.5rem 1rem 1rem;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
}

.mail-upload__frame-sheet--second {
  inset: 2rem 2.3rem 2.8rem 2.4rem;
  opacity: 0.7;
}

.mail-upload__frame-envelope {
  top: 1.5rem;
  right: 1rem;
  width: 32%;
  height: 28%;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
}

.mail-upload__hint,
.mail-upload__status,
.mail-batch-summary__notice,
.mail-batch-documents__hint {
  margin: 0;
  color: var(--color-text-muted);
}

.mail-upload__status {
  white-space: pre-line;
}

.mail-upload__progress {
  width: 100%;
  height: 0.8rem;
}

.mail-batch-documents__header,
.mail-document-viewer__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
}

.mail-batch-summary__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.mail-batch-summary__download {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 24%, transparent);
}

.mail-batch-index__list,
.mail-batch-list,
.mail-document-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mail-document-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-2);
}

.mail-batch-index__item,
.mail-batch-list__item,
.mail-document-list__item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
}

.mail-document-grid__item {
  position: relative;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  cursor: grab;
}

.mail-document-list__item--dragging {
  opacity: 0.86;
  transform: rotate(-1deg) scale(0.98);
}

.mail-document-list__item--dragging .mail-document-grid__thumb {
  box-shadow: 0 18px 36px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.mail-document-list__item--drop-before {
  box-shadow: inset 0 3px 0 0 var(--color-primary);
}

.mail-document-list__item--drop-after {
  box-shadow: inset 0 -3px 0 0 var(--color-primary);
}

.mail-document-list__handle {
  flex: 0 0 auto;
  width: 2rem;
  min-height: 3rem;
  border: none;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: grab;
}

.mail-document-grid__handle {
  width: 100%;
  min-height: 0;
}

.mail-document-list__handle:active {
  cursor: grabbing;
}

.mail-document-list__handle:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.mail-document-list__handle-grip {
  display: block;
  width: 0.5rem;
  height: 1.4rem;
  margin: 0 auto;
  border-inline: 2px dotted currentColor;
}

.mail-document-list__thumb {
  flex: 0 0 5.5rem;
  width: 5.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
}

.mail-document-grid__preview {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.mail-document-grid__preview:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: 0;
}

.mail-document-grid__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border-subtle));
  box-shadow: var(--shadow-md);
  background: color-mix(in srgb, var(--color-surface) 90%, var(--color-primary) 10%);
  transition: transform var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
}

.mail-document-grid__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mail-document-grid__preview:hover .mail-document-grid__thumb,
.mail-document-grid__preview:focus-visible .mail-document-grid__thumb {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.mail-document-list__thumb img,
.mail-document-viewer__image img {
  display: block;
  width: 100%;
  height: auto;
}

.mail-document-list__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mail-document-list__title,
.mail-document-viewer__title {
  margin: 0;
  overflow-wrap: anywhere;
}

.mail-document-list__actions,
.mail-batch-index__actions,
.mail-batch-list__view {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.mail-document-viewer__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
}

.mail-batch-viewer-modal[open] {
  padding: clamp(var(--space-2), 2vw, var(--space-5));
  background: color-mix(in srgb, black 28%, transparent);
}

.mail-batch-viewer {
  position: relative;
  width: min(100%, 78rem);
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-3);
}

.mail-batch-viewer__topbar {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.mail-batch-viewer__topbar-spacer {
  width: 100%;
  min-height: 1.25rem;
}

.mail-batch-viewer__stage {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mail-batch-viewer__controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.mail-batch-viewer__controls-left,
.mail-batch-viewer__controls-center,
.mail-batch-viewer__controls-right {
  display: flex;
  align-items: center;
  width: 100%;
}

.mail-batch-viewer__controls-left {
  justify-content: stretch;
}

.mail-batch-viewer__controls-center {
  justify-content: stretch;
}

.mail-batch-viewer__controls-right {
  justify-content: stretch;
}

.mail-batch-viewer__actions {
  display: flex;
  margin: 0;
}

.mail-batch-viewer__count {
  margin: 0;
  color: white;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.mail-batch-viewer__image-wrap {
  width: 100%;
  height: min(90dvh, calc(100dvh - 5rem));
  display: grid;
  place-items: center;
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, black 18%, transparent);
  touch-action: none;
}

.mail-batch-viewer__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-lg);
  transform-origin: center center;
  transition: transform var(--duration-fast) var(--ease-default);
}

.mail-batch-viewer__download,
.mail-batch-viewer__close {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: 999px;
  color: white;
  box-shadow: var(--shadow-md);
}

.mail-batch-viewer__delete {
  min-height: 2.75rem;
  background: color-mix(in srgb, var(--color-error) 72%, black 28%);
  color: white;
  border-color: color-mix(in srgb, var(--color-error) 40%, transparent);
}

.mail-batch-viewer__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  width: 100%;
  background: color-mix(in srgb, var(--color-primary) 70%, black 30%);
  border-color: color-mix(in srgb, var(--color-primary) 42%, transparent);
  white-space: nowrap;
}

.mail-batch-viewer__download span[aria-hidden="true"] {
  line-height: 1;
}

.mail-batch-viewer__close {
  width: 100%;
  background: color-mix(in srgb, white 12%, black 88%);
  border-color: color-mix(in srgb, white 16%, transparent);
}

.mail-batch-viewer__delete {
  width: 100%;
  border-radius: 999px;
}

.mail-batch-viewer__download:hover,
.mail-batch-viewer__delete:hover,
.mail-batch-viewer__close:hover {
  filter: brightness(1.05);
}

.mail-batch-viewer__download:focus-visible,
.mail-batch-viewer__delete:focus-visible,
.mail-batch-viewer__close:focus-visible {
  outline: 2px solid white;
  outline-offset: 3px;
}

@media (max-width: 40rem), (pointer: coarse) {
  .mail-wizard-steps {
    gap: var(--space-1);
  }

  .mail-wizard-step__layout,
  .mail-wizard-summary {
    grid-template-columns: 1fr;
  }

  .mail-wizard {
    padding: var(--space-3);
  }

  .mail-wizard-step {
    padding: var(--space-4);
  }

  .mail-batch-draft__title {
    font-size: clamp(1.65rem, 8vw, 2rem);
  }

  .mail-upload__choice-grid,
  .mail-batch-summary__actions,
  .mail-batch-documents__header,
  .mail-document-viewer__header,
  .mail-batch-index__item,
  .mail-batch-list__item,
  .mail-document-list__item {
    flex-direction: column;
    align-items: stretch;
  }

  .mail-upload__choice-grid {
    grid-template-columns: 1fr;
  }

  .mail-upload__camera-button {
    flex-direction: column;
    align-items: flex-start;
    min-height: 10rem;
  }

  .mail-upload__live-camera-top {
    flex-direction: column;
    align-items: stretch;
  }

  .mail-upload__live-camera-bottom {
    padding-bottom: max(env(safe-area-inset-bottom), var(--space-2));
  }

  .mail-upload__camera-mode-done {
    width: 100%;
  }

  .mail-upload__live-camera-frame {
    width: min(88vw, 22rem);
  }

  .mail-batch-summary__hero,
  .mail-batch-summary__compact,
  .mail-batch-summary__main {
    flex-direction: column;
    align-items: flex-start;
  }

  .mail-batch-summary__actions {
    width: 100%;
    margin-left: 0;
  }

  .mail-batch-summary__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .mail-batch-summary__meta {
    gap: var(--space-2);
  }

  .mail-batch-summary__chip,
  .mail-batch-summary__status {
    width: auto;
    max-width: 100%;
    justify-content: center;
  }

  .mail-wizard-step__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .mail-document-list__thumb {
    width: 100%;
    flex-basis: auto;
  }

  .mail-document-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .mail-document-list__handle {
    width: 100%;
    min-height: 2.75rem;
  }

  .mail-document-grid__handle {
    width: 100%;
  }

  .mail-batch-viewer {
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .mail-batch-viewer__stage {
    order: 1;
  }

  .mail-batch-viewer__image-wrap {
    height: min(78dvh, calc(100dvh - 11rem));
  }

  .mail-document-list__actions .btn,
  .mail-batch-index__actions .btn,
  .mail-upload .btn {
    width: 100%;
    justify-content: center;
  }
}

}