:root {
  --page-shell-max-width: 1120px;
  --page-background: #f8fafc;
  --surface: #ffffff;
  --border: #e2e8f0;
  --text-muted: #64748b;
  --process-primary: #2563eb;
  --process-primary-action: #2563eb;
  --process-accent: #60a5fa;
  --process-dark: #1d4ed8;
  --process-text: #0f172a;
  --brand-button-primary: #26363d;
  --remediation-action: var(--brand-button-primary);
  --wizard-current-accent: var(--process-primary-action);
  --wizard-complete-accent: var(--success);
  --disabled-action-text: #475569;
  --disabled-action-background: #e5e7eb;
  --disabled-action-border: #d1d5db;
  --success: #087f70;
  --success-surface: #e8f7f4;
  --warning: #d6a02c;
  --warning-text: #75520b;
  --warning-surface: #fff8e7;
  --error: #c65b28;
  --error-surface: #fff2eb;
  --neutral: #64748b;
  --blocked: var(--error);
  --blocked-text: var(--blocked);
  --blocked-surface: var(--error-surface);
  --blocked-border: var(--blocked);
  --neutral-action: var(--neutral);
  --destructive-action: var(--error);
  --shadow: 0 12px 32px rgba(20, 31, 38, 0.08);
  --radius: 14px;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  font-size: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  color: var(--brand-text);
  background:
    radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--brand-primary) 7%, transparent) 0, transparent 30rem),
    linear-gradient(180deg, color-mix(in srgb, var(--brand-accent) 4%, var(--page-background)) 0, var(--page-background) 24rem);
  line-height: 1.55;
}

a {
  color: var(--process-primary-action);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:where(a, button, input):focus-visible {
  outline: 3px solid var(--process-primary);
  outline-offset: 3px;
}

button,
input {
  font: inherit;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.9rem;
  color: #fff;
  background: var(--brand-dark);
  border-radius: 8px;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.page-shell {
  position: relative;
  z-index: 1;
  width: min(var(--page-shell-max-width), calc(100% - 2rem));
  margin-inline: auto;
}

.site-header {
  position: relative;
  color: var(--brand-text);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 18px rgb(20 31 38 / 6%);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--brand-primary) 0 64%, var(--brand-accent) 64% 100%);
}

.header-bar {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

.brand-symbol {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--brand-primary) 24%, transparent);
  display: block;
}

.brand-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-name small {
  color: var(--brand-primary-action);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.brand-name strong {
  overflow: hidden;
  color: var(--brand-dark);
  font-size: 1.12rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}

.account-actions form {
  margin: 0;
}

.account-name {
  max-width: 18rem;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-navigation {
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.navigation-links {
  min-height: 48px;
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.navigation-links a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--brand-text);
  border-bottom: 3px solid transparent;
  font-size: 0.92rem;
  font-weight: 650;
  text-decoration: none;
}

.navigation-links a:hover {
  color: var(--brand-primary-action);
  border-bottom-color: var(--brand-accent);
}

.navigation-links a.is-active {
  color: var(--brand-dark);
  background: color-mix(in srgb, var(--brand-accent) 9%, transparent);
  border-bottom-color: var(--brand-accent);
}

.brand-stage-frame {
  position: relative;
  --brand-stage-half-width: min(500px, calc(50% - 1rem));
  padding-block: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand-hero-edge-left) 65%, white) 0%,
    var(--brand-hero-edge-left) var(--brand-stage-left-blend-start, calc(50% - var(--brand-stage-half-width))),
    var(--brand-hero-edge-left) 42%,
    var(--brand-hero-edge-right) 58%,
    var(--brand-primary) calc(50% + var(--brand-stage-half-width)),
    var(--brand-primary) 100%
  );
}

.brand-stage {
  position: relative;
  z-index: 1;
  overflow: hidden;
  container-type: inline-size;
  width: min(var(--page-shell-max-width), calc(100% - 2rem));
  height: auto;
  margin-inline: auto;
  color: #fff;
  background: var(--brand-dark);
  border-right: 3px solid #fff;
  border-radius: 0 16px 16px 0;
  mask-image: linear-gradient(90deg, transparent, #000 16px);
}

.brand-stage-media {
  position: relative;
}

body[data-brand="CityMail"] .brand-stage-frame {
  --brand-stage-left-blend-start: calc(50% - min(560px, calc(50% - 1rem)));
  --brand-stage-left-overlay: var(--brand-hero-edge-left);
}

body[data-brand="RegioMail"] .brand-stage-frame {
  --brand-hero-edge-left: var(--brand-primary);
  --brand-stage-left-overlay: var(--brand-primary);
}

.brand-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--brand-stage-left-overlay, transparent), transparent 35%);
}

.brand-stage-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}

.brand-stage-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  container-type: inline-size;
  padding-block: 1rem;
  color: #fff;
  display: flex;
  align-items: center;
}

.brand-stage-copy {
  position: relative;
  max-width: 28.75rem;
  display: grid;
  gap: 0.5rem;
  text-shadow: 0 1px 3px rgb(0 0 0 / 35%);
}

.brand-stage-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.brand-stage-copy strong {
  max-width: 28.75rem;
  font-size: clamp(1.875rem, calc(1.72rem + 0.24cqi), 2rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.brand-stage-copy p {
  max-width: 28.75rem;
  margin: 0.25rem 0 0;
  font-size: clamp(0.875rem, calc(0.81rem + 0.1cqi), 0.9375rem);
  font-weight: 400;
  line-height: 1.45;
}

.brand-stage-frame + .page-content {
  padding-top: 22px;
}

.page-content {
  --brand-primary: var(--brand-dark);
  --brand-primary-action: var(--process-primary-action);
  --brand-accent: var(--brand-dark);
  --brand-text: var(--process-text);
  flex: 1;
  padding-block: clamp(2.25rem, 5vw, 4rem);
  color: var(--process-text);
}

body[data-brand="CityMail"] .page-content {
  --brand-primary: #a10f1a;
  --brand-primary-action: #a10f1a;
  --brand-accent: #a10f1a;
  --brand-dark: #a10f1a;
  --brand-button-primary: #a10f1a;
  --process-primary: #a10f1a;
  --process-primary-action: #a10f1a;
  --process-accent: #c94a55;
  --process-dark: #7f0c15;
  --process-text: #1f2937;
  --border: #e5e7eb;
  --text-muted: #6b7280;
  --success: #16803d;
  --success-surface: #f0fdf4;
  --warning: #b7791f;
  --warning-text: #7a4e14;
  --warning-surface: #fff8e8;
  --blocked: #2563eb;
  --blocked-text: #1d4ed8;
  --blocked-surface: #dbeafe;
  --blocked-border: #93c5fd;
  --neutral-action: #475569;
  --destructive-action: #475569;
  --error: #1d4ed8;
  --error-surface: #dbeafe;
}

body[data-brand="RegioMail"] .page-content {
  --brand-primary: #3b4faa;
  --brand-primary-action: #3b4faa;
  --brand-accent: #e00685;
  --brand-dark: #080e41;
  --brand-button-primary: #3b4faa;
  --remediation-action: #8c0465;
  --wizard-current-accent: #e00685;
  --wizard-complete-accent: #e00685;
  --process-primary: #3b4faa;
  --process-primary-action: #3b4faa;
  --process-accent: #e00685;
  --process-dark: #080e41;
  --process-text: #334147;
  --warning: #e00685;
  --warning-text: #8c0465;
  --warning-surface: color-mix(in srgb, #e00685 9%, #fff);
  --blocked: #b42318;
  --blocked-text: #b42318;
  --blocked-surface: #fef2f2;
  --blocked-border: color-mix(in srgb, #b42318 38%, var(--border));
  --error: #b42318;
  --error-surface: #fef2f2;
}

body[data-brand="PostserviceSuedost"] .page-content {
  --brand-primary: #008c4a;
  --brand-primary-action: #008c4a;
  --brand-accent: #008c4a;
  --brand-dark: #00552e;
  --brand-button-primary: #006b39;
  --process-primary: #008c4a;
  --process-primary-action: #008c4a;
  --process-accent: #35a871;
  --process-dark: #006b39;
  --process-text: #1f2937;
  --border: #d9e2dd;
  --text-muted: #667085;
  --success: #157347;
  --success-surface: #effaf3;
  --warning: #d99b0b;
  --warning-text: #9a6700;
  --warning-surface: #fff7e8;
  --error: #b42318;
  --error-surface: #fef2f2;
}

body[data-brand="ChiemgauPost"] .page-content {
  --brand-primary: #9b091c;
  --brand-primary-action: #9b091c;
  --brand-accent: #b20d27;
  --brand-button-primary: #9b091c;
  --process-primary: #9b091c;
  --process-primary-action: #9b091c;
  --process-accent: #64748b;
  --process-dark: #700a17;
  --text-muted: #64748b;
  --border: #d9dee5;
  --surface: #fff;
  --neutral-action: #64748b;
  --destructive-action: #64748b;
  --success: #16803d;
  --success-surface: #f0fdf4;
  --warning: #2563eb;
  --warning-text: #1d4ed8;
  --warning-surface: #dbeafe;
  --blocked: #2563eb;
  --blocked-text: #1d4ed8;
  --blocked-surface: #dbeafe;
  --blocked-border: #93c5fd;
  --error: #1d4ed8;
  --error-surface: #dbeafe;
}

body[data-brand="ChiemgauPost"] .page-content .button-primary:hover {
  background: var(--process-dark);
  border-color: var(--process-dark);
}

body[data-brand="ChiemgauPost"] .page-content .button-secondary {
  color: var(--neutral-action);
  border-color: var(--border);
}

body[data-brand="ChiemgauPost"] .page-content .button-secondary:hover {
  border-color: var(--neutral-action);
}

body[data-brand="ChiemgauPost"] .page-content .button-link,
body[data-brand="ChiemgauPost"] .page-content .icon-button {
  color: var(--neutral-action);
}

body[data-brand="ChiemgauPost"] .page-content .button-link:hover,
body[data-brand="ChiemgauPost"] .page-content .icon-button:hover {
  color: var(--process-dark);
}

body[data-brand="ChiemgauPost"] .page-content .upload-area,
body[data-brand="ChiemgauPost"] .page-content .eyebrow {
  --brand-primary: var(--brand-dark);
  --brand-accent: var(--brand-dark);
}

body[data-brand="ChiemgauPost"] .page-content .upload-area:focus-within {
  outline-color: var(--process-primary);
}

body[data-brand="ChiemgauPost"] .page-content [data-approved-count-label] {
  color: var(--success);
}

body[data-brand="ChiemgauPost"] .page-content [data-review-count-label],
body[data-brand="ChiemgauPost"] .page-content .bulk-tabs .tab-status-count {
  color: var(--blocked-text);
}

body[data-brand="ChiemgauPost"] .page-content .document-review-result.is-blocked,
body[data-brand="ChiemgauPost"] .page-content .document-review-result.is-warning {
  box-shadow: inset 0 0 0 1px var(--blocked-border);
}

.site-footer {
  padding-block: 1.5rem;
  color: var(--text-muted);
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.footer-content a {
  color: inherit;
}

.page-heading {
  max-width: 720px;
  margin-bottom: 2rem;
}

.eyebrow {
  margin: 0 0 0.45rem;
  padding-left: 0.55rem;
  color: var(--brand-dark);
  border-left: 4px solid var(--brand-accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1,
h2 {
  color: var(--brand-dark);
  line-height: 1.18;
}

h1 {
  margin-bottom: 0.75rem;
  font-size: clamp(2rem, 4vw, 3.15rem);
  letter-spacing: -0.035em;
}

h2 {
  margin-bottom: 1.5rem;
  font-size: 1.45rem;
}

.page-heading > p:last-child,
.auth-introduction > p:last-child,
.placeholder-page > p {
  color: var(--text-muted);
  font-size: 1.08rem;
}

.primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.action-card {
  min-height: 205px;
  padding: clamp(1.4rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 1.25rem;
  color: var(--brand-text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand-primary);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(20, 31, 38, 0.04);
  text-decoration: none;
}

.action-card:hover {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 3%, var(--surface));
  box-shadow: var(--shadow);
  text-decoration: none;
}

.action-card:nth-child(2):hover {
  border-color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 4%, var(--surface));
}

.action-card:nth-child(2) {
  border-top-color: var(--brand-accent);
}

.action-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--brand-dark);
  background: color-mix(in srgb, var(--brand-primary) 10%, white);
  border-radius: 12px;
}

.action-icon svg {
  width: 28px;
  fill: currentColor;
}

.action-card:nth-child(2) .action-icon {
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 10%, white);
}

.action-card:nth-child(2) .action-arrow {
  color: var(--brand-accent);
}

.action-copy {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.action-copy strong {
  color: var(--brand-dark);
  font-size: 1.45rem;
}

.action-copy span {
  color: var(--text-muted);
}

.action-arrow {
  color: var(--brand-dark);
  font-size: 1.5rem;
  font-weight: 700;
}

.information-note,
.status-notice,
.development-note {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem;
  border-radius: 10px;
}

.information-note {
  max-width: 780px;
  margin-top: 1.5rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--brand-accent) 5%, white);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 18%, var(--border));
}

.information-note > span,
.status-notice > span:first-child {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--brand-primary-action);
  border-radius: 50%;
  font-size: 0.82rem;
  font-weight: 800;
}

.information-note p {
  margin: 0;
}

.information-note strong {
  color: var(--brand-text);
}

.button {
  min-height: 42px;
  padding: 0.65rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--brand-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
}

.button:hover {
  text-decoration: none;
}

.button-primary {
  color: #fff;
  background: var(--brand-button-primary);
  border-color: var(--brand-button-primary);
}

.button-primary:hover {
  background: color-mix(in srgb, var(--brand-button-primary) 82%, #000);
  border-color: color-mix(in srgb, var(--brand-button-primary) 82%, #000);
}

.button-secondary {
  color: var(--process-primary-action);
  background: var(--surface);
  border-color: var(--process-primary-action);
}

.button-secondary:hover,
.button-quiet:hover {
  background: color-mix(in srgb, var(--process-primary) 7%, white);
}

.button-compact {
  min-height: 38px;
  padding: 0.55rem 0.85rem;
}

.button-full {
  width: 100%;
}

.placeholder-page,
.legal-page {
  max-width: 720px;
}

.legal-page h2 {
  margin: 2rem 0 0.55rem;
  font-size: 1.15rem;
}

.legal-page p {
  line-height: 1.65;
}

.legal-address {
  white-space: pre-line;
}

.faq-heading {
  max-width: 880px;
}

.faq-topic-nav {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
}

.faq-topic-nav a {
  padding: .55rem .8rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--border));
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-dark);
  font-size: .86rem;
  font-weight: 750;
  text-decoration: none;
}

.faq-topic-nav a:hover,
.faq-topic-nav a:focus-visible {
  border-color: var(--brand-primary-action);
  color: var(--brand-primary-action);
}

.faq-introduction {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
  margin-bottom: 2.5rem;
}

.faq-introduction > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  gap: .25rem .65rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-primary-action);
  border-radius: .75rem;
  background: var(--surface);
}

.faq-introduction strong {
  align-self: center;
  color: var(--brand-dark);
}

.faq-introduction p {
  grid-column: 1 / -1;
  margin: .35rem 0 0;
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.5;
}

.faq-step-number {
  display: inline-grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary-action) 10%, #fff);
  color: var(--brand-primary-action);
  font-weight: 850;
}

.faq-section {
  margin: 0 0 2rem;
  scroll-margin-top: 1rem;
}

.faq-section > header {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-bottom: .85rem;
}

.faq-section > header > span {
  color: var(--brand-primary-action);
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.faq-section h2 {
  margin: 0;
  color: var(--brand-dark);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
}

.faq-section header p {
  margin: .2rem 0 0;
  color: var(--text-muted);
}

.faq-list {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: var(--surface);
}

.faq-item + .faq-item {
  border-top: 1px solid var(--border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  color: var(--brand-dark);
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  display: inline-grid;
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary-action) 9%, #fff);
  color: var(--brand-primary-action);
  font-size: 1.1rem;
  line-height: 1;
}

.faq-item[open] summary {
  background: color-mix(in srgb, var(--brand-primary-action) 4%, #fff);
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item summary:hover,
.faq-item summary:focus-visible {
  color: var(--brand-primary-action);
}

.faq-answer {
  padding: .1rem 1.15rem 1.15rem;
  color: var(--brand-text);
  line-height: 1.65;
}

.faq-answer p,
.faq-answer ul,
.faq-answer ol {
  margin: .75rem 0 0;
}

.faq-answer li + li {
  margin-top: .35rem;
}

.faq-code {
  max-width: 100%;
  margin: .85rem 0;
  overflow-x: auto;
  padding: .8rem .9rem;
  border: 1px solid var(--border);
  border-radius: .55rem;
  background: #f5f7f9;
  color: var(--brand-dark);
  font-size: .88rem;
  line-height: 1.6;
  white-space: pre;
}

.faq-support-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding: 1.25rem;
  border-left: 4px solid var(--brand-primary-action);
  border-radius: .65rem;
  background: color-mix(in srgb, var(--brand-primary-action) 5%, #fff);
}

.faq-support-note strong {
  color: var(--brand-dark);
  font-size: 1.05rem;
}

.faq-support-note p {
  margin: .25rem 0 0;
  color: var(--text-muted);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .faq-introduction {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .faq-topic-nav {
    gap: .4rem;
  }

  .faq-topic-nav a {
    font-size: .8rem;
  }

  .faq-introduction {
    grid-template-columns: 1fr;
  }

  .faq-item summary,
  .faq-answer {
    padding-inline: .9rem;
  }

  .faq-support-note {
    align-items: stretch;
    flex-direction: column;
  }

  .faq-support-note .button {
    width: 100%;
  }
}

.compact-heading {
  margin-bottom: 1.5rem;
}

.step-indicator {
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
}

.step-indicator li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.step-indicator .step-number,
.step-indicator li a > span {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--brand-text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
}

.step-indicator li.is-current {
  color: var(--wizard-current-accent);
}

.step-indicator li.is-current > .step-number {
  color: #fff;
  background: var(--wizard-current-accent);
  border-color: var(--wizard-current-accent);
}

.order-section {
  max-width: 760px;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.wizard-actions,
.dialog-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.order-review-summary {
  display: grid;
  gap: 1.5rem;
}

.order-review-header {
  max-width: 42rem;
}

.order-review-header h2,
.order-review-header p,
.order-review-products h3,
.order-review-products p,
.order-review-notice h3,
.order-review-notice p,
.order-review-inline-notice h3,
.order-review-inline-notice p {
  margin: 0;
}

.order-review-header h2 {
  margin-top: 0.3rem;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}

.order-review-header p {
  margin-top: 0.45rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.order-review-eyebrow {
  color: var(--brand-primary-action);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.order-review-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.order-review-metric {
  min-width: 0;
  padding: 1.15rem 1.25rem;
  background: color-mix(in srgb, var(--brand-primary) 4%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, var(--border));
  border-top: 3px solid var(--brand-primary-action);
  border-radius: 0.75rem;
}

.order-review-metric.is-unavailable {
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  border-top-color: var(--warning);
}

.order-review-metric-label,
.order-review-metric small {
  display: block;
}

.order-review-metric-label {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.order-review-metric strong {
  display: block;
  margin: 0.25rem 0 0.15rem;
  color: var(--brand-dark);
  font-size: clamp(1.55rem, 4vw, 2.15rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.order-review-metric small {
  color: var(--text-muted);
}

.order-review-logo-cost {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--brand-primary) 4%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--border));
  border-radius: 0.65rem;
}

.order-review-logo-icon {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  color: var(--brand-primary-action);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border));
  border-radius: 50%;
}

.order-review-logo-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.order-review-logo-description,
.order-review-logo-price {
  min-width: 0;
}

.order-review-logo-label,
.order-review-logo-description strong,
.order-review-logo-description small,
.order-review-logo-price > strong,
.order-review-logo-price > span,
.order-review-logo-price > small {
  display: block;
}

.order-review-logo-label {
  margin-bottom: 0.1rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.order-review-logo-description strong {
  color: var(--brand-dark);
}

.order-review-logo-description small,
.order-review-logo-price > small {
  margin-top: 0.15rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.order-review-logo-price {
  text-align: right;
}

.order-review-logo-price > strong {
  color: var(--brand-primary-action);
  font-size: 1.05rem;
}

.order-review-logo-price > strong small {
  display: inline;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.order-review-logo-price > span {
  margin-top: 0.2rem;
  font-size: 0.86rem;
}

.order-review-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 0.65rem;
}

.order-review-notice.is-success {
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 34%, var(--border));
  border-left-color: var(--success);
}

.order-review-notice.is-error {
  background: color-mix(in srgb, var(--error) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--error) 30%, var(--border));
  border-left-color: var(--error);
}

.order-review-notice-icon {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  color: var(--success);
  background: var(--surface);
  border-radius: 50%;
}

.order-review-notice.is-error .order-review-notice-icon {
  color: var(--error);
}

.order-review-notice-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.order-review-notice h3 {
  font-size: 1rem;
}

.order-review-notice p {
  margin-top: 0.25rem;
  color: var(--brand-text);
  line-height: 1.5;
}

.order-review-example {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  padding: 0.75rem 1rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--border) 30%, var(--surface));
  border-radius: 0.55rem;
}

.order-review-example span {
  font-size: 0.8rem;
  font-weight: 700;
}

.order-review-example p {
  margin: 0;
  font-size: 0.9rem;
}

.order-review-products,
.order-review-adjustments,
.order-review-issues {
  padding-top: 0.15rem;
}

.order-review-products > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.order-review-products h3,
.order-review-inline-notice h3 {
  font-size: 1.05rem;
}

.order-review-products p {
  margin-top: 0.2rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.order-review-detail-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  overflow: hidden;
}

.order-review-detail-list li + li {
  border-top: 1px solid var(--border);
}

.order-review-price-table-wrap {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
}

.order-review-price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}

.order-review-price-table th,
.order-review-price-table td {
  padding: 0.85rem 1rem;
  text-align: right;
  vertical-align: middle;
}

.order-review-price-table th {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface));
  font-size: 0.78rem;
  font-weight: 750;
}

.order-review-price-table th:first-child,
.order-review-price-table td:first-child {
  text-align: left;
}

.order-review-price-table tbody tr + tr td {
  border-top: 1px solid var(--border);
}

.order-review-price-table td {
  color: var(--brand-text);
  font-variant-numeric: tabular-nums;
}

.order-review-price-table td:first-child strong,
.order-review-price-table td:last-child strong {
  color: var(--brand-primary-action);
}

.order-review-product-region {
  display: block;
  width: fit-content;
  margin-top: 0.25rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--border));
  border-radius: 999px;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface));
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
}

.order-review-inline-notice {
  margin-bottom: 0.75rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--warning);
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
}

.order-review-inline-notice.is-error {
  border-left-color: var(--error);
  background: color-mix(in srgb, var(--error) 6%, var(--surface));
}

.order-review-inline-notice.is-info {
  border-left-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 6%, var(--surface));
}

.order-review-inline-notice p {
  margin-top: 0.25rem;
  color: var(--brand-text);
  line-height: 1.5;
}

.order-review-detail-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
}

.order-review-detail-list li > span {
  min-width: 0;
}

.order-review-detail-list small {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.order-review-more {
  margin: 0.65rem 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.wizard-actions-review {
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.wizard-actions-review .button-link {
  margin-left: 0.15rem;
}

.button-link {
  color: var(--process-dark);
  background: transparent;
  border-color: transparent;
}

body[data-brand="CityMail"] .page-content .button-secondary {
  color: #1f2937;
  background: #fff;
  border-color: #d1d5db;
}

body[data-brand="CityMail"] .page-content .button-secondary:hover {
  background: #fafafb;
  border-color: #9ca3af;
}

body[data-brand="CityMail"] .page-content .upload-area .button-secondary {
  color: #fff;
  background: #a10f1a;
  border-color: #a10f1a;
}

body[data-brand="CityMail"] .page-content .upload-area .button-secondary:hover {
  background: #7f0c15;
  border-color: #7f0c15;
}

body[data-brand="CityMail"] .page-content .button-link,
body[data-brand="CityMail"] .page-content .letter-results-toggle,
body[data-brand="CityMail"] .page-content .source-documents-toggle {
  color: #374151;
}

body[data-brand="CityMail"] .page-content .icon-button:not(.is-destructive) {
  color: #4b5563;
}

body[data-brand="CityMail"] .page-content .icon-button.is-destructive,
body[data-brand="CityMail"] .page-content .bulk-secondary-action,
body[data-brand="CityMail"] .page-content .workflow-secondary-action .button-link {
  color: var(--neutral-action);
}

body[data-brand="CityMail"] .page-content .bulk-secondary-action:hover,
body[data-brand="CityMail"] .page-content .workflow-secondary-action .button-link:hover {
  color: #334155;
}

body[data-brand="CityMail"] .page-content [data-approved-count-label] {
  color: var(--success);
}

body[data-brand="CityMail"] .page-content [data-review-count-label] {
  color: var(--warning-text);
}

body[data-brand="CityMail"] .page-content .document-review-guidance.has-blocked [data-review-count-label],
body[data-brand="CityMail"] .page-content .bulk-tabs .tab-status-count {
  color: var(--blocked-text);
}

body[data-brand="CityMail"] .page-content .upload-file-row.is-error,
body[data-brand="CityMail"] .page-content .boundary-review-row.is-blocking {
  border-color: var(--blocked-border);
}

body[data-brand="CityMail"] .page-content [data-destructive-action] {
  color: #fff;
  background: var(--destructive-action);
  border-color: var(--destructive-action);
}

body[data-brand="CityMail"] .page-content [data-destructive-action]:hover {
  background: #334155;
  border-color: #334155;
}

body[data-brand="PostserviceSuedost"] .page-content .button-secondary {
  color: #1f2937;
  background: #fff;
  border-color: #d9e2dd;
}

body[data-brand="PostserviceSuedost"] .page-content .button-secondary:hover {
  background: #fafbfa;
  border-color: #a9b9b0;
}

body[data-brand="PostserviceSuedost"] .page-content .upload-area .button-secondary {
  color: #fff;
  background: #008c4a;
  border-color: #008c4a;
}

body[data-brand="PostserviceSuedost"] .page-content .upload-area .button-secondary:hover {
  background: #006b39;
  border-color: #006b39;
}

body[data-brand="PostserviceSuedost"] .page-content .button-link,
body[data-brand="PostserviceSuedost"] .page-content .letter-results-toggle,
body[data-brand="PostserviceSuedost"] .page-content .source-documents-toggle {
  color: #34443b;
}

body[data-brand="PostserviceSuedost"] .page-content .icon-button:not(.is-destructive) {
  color: #4b5f54;
}

.button-danger {
  color: var(--destructive-action);
  background: var(--surface);
  border-color: var(--destructive-action);
}

.button-danger:hover {
  color: #fff;
  background: var(--destructive-action);
}

.delete-draft-form {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.unsaved-dialog {
  width: min(32rem, calc(100% - 2rem));
  padding: 1.5rem;
  color: var(--brand-text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.unsaved-dialog::backdrop {
  background: rgb(8 14 25 / 45%);
}

.unsaved-dialog h2 {
  margin-top: 0;
}

.unsaved-dialog p {
  color: var(--text-muted);
}

.release-confirmation-dialog {
  width: min(38rem, calc(100% - 2rem));
}

.release-confirmation-dialog > p:not(.eyebrow) {
  font-size: 1.02rem;
  line-height: 1.65;
}

.release-confirmation-checks {
  display: grid;
  gap: .75rem;
  margin: 1.25rem 0;
}

.release-confirmation-checks .checkbox-field {
  align-items: flex-start;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: .7rem;
  background: color-mix(in srgb, var(--brand-primary) 3%, var(--surface));
  line-height: 1.45;
}

.release-confirmation-checks input {
  margin-top: .2rem;
  flex: 0 0 auto;
}

.release-confirmation-note {
  font-size: .9rem;
}

.processing-status-card {
  max-width: 48rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.25rem;
  padding: clamp(1.35rem, 3vw, 2.25rem);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-primary);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: 0 .5rem 1.8rem rgb(20 35 45 / 7%);
}

.processing-status-card h2 {
  margin: .15rem 0 .5rem;
}

.processing-status-card p {
  margin-bottom: 0;
}

.processing-status-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 9%, white);
}

.processing-status-icon svg {
  width: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.processing-background-note,
.processing-order-facts {
  grid-column: 1 / -1;
}

.processing-background-note {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: .75rem;
  padding: 1rem;
  border-radius: .75rem;
  background: color-mix(in srgb, var(--brand-primary) 3%, var(--surface));
  color: var(--text-muted);
  line-height: 1.5;
}

.processing-background-note svg {
  width: 1.5rem;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--brand-primary);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.processing-background-note strong {
  color: var(--text);
}

.processing-order-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: .25rem 0 0;
}

.processing-order-facts div {
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: .7rem;
}

.processing-order-facts dt {
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 700;
}

.processing-order-facts dd {
  margin: .25rem 0 0;
  font-weight: 750;
}

.processing-status-actions {
  justify-content: flex-start;
}

@media (max-width: 640px) {
  .processing-status-card {
    grid-template-columns: 1fr;
  }

  .processing-status-icon {
    width: 2.65rem;
    height: 2.65rem;
  }

  .processing-background-note,
  .processing-order-facts {
    grid-column: auto;
  }

  .processing-order-facts {
    grid-template-columns: 1fr;
  }

}

.dialog-actions {
  align-items: stretch;
  flex-direction: column;
}

.blocked-removal-actions {
  display: grid;
  grid-template-columns: max-content max-content;
}

.blocked-removal-actions form {
  margin: 0;
  display: flex;
}

.blocked-removal-actions form .button {
  height: 100%;
}

.blocked-removal-actions [data-cancel-blocked-removal] {
  grid-column: 1 / -1;
}

@media (max-width: 520px) {
  .blocked-removal-actions {
    grid-template-columns: 1fr;
  }

  .blocked-removal-actions form .button {
    width: 100%;
  }

  .blocked-removal-actions [data-cancel-blocked-removal] {
    grid-column: auto;
  }
}

.order-list {
  max-width: 880px;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
  list-style: none;
}

.order-list-item {
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--brand-text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
}

.order-list-item:hover {
  border-color: var(--brand-primary);
  text-decoration: none;
}

.order-list-item > span:first-child {
  display: grid;
  gap: 0.2rem;
}

.order-list-item small {
  color: var(--text-muted);
}

.order-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--brand-dark);
  font-weight: 700;
}

.order-status > span {
  color: var(--brand-accent);
}

.empty-state {
  max-width: 720px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.page-action {
  margin-top: 1.5rem;
}

.placeholder-page .status-notice {
  margin-block: 1.75rem;
  color: var(--brand-text);
  background: var(--surface);
  border: 1px solid var(--border);
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  align-items: center;
  gap: clamp(2.5rem, 8vw, 7rem);
}

.auth-introduction {
  max-width: 540px;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.form-field {
  margin-bottom: 1.15rem;
}

.form-field label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--brand-dark);
  font-weight: 700;
}

.form-field input,
.form-field select {
  width: 100%;
  min-height: 46px;
  padding: 0.68rem 0.8rem;
  color: var(--brand-text);
  background: #fff;
  border: 1px solid #aeb9c1;
  border-radius: 8px;
}

.form-field input:focus,
.form-field select:focus {
  border-color: var(--brand-dark);
}

.history-heading {
  max-width: 850px;
}

.history-summary {
  max-width: 980px;
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem;
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  color: var(--brand-text);
  background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--border));
  border-radius: 12px;
}

.history-summary > div {
  display: grid;
  gap: 0.1rem;
}

.history-summary > div span,
.history-card p,
.history-facts dt {
  color: var(--text-muted);
}

.history-summary strong {
  color: var(--brand-dark);
  font-size: 1.65rem;
}

.history-summary p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.history-summary p > span,
.history-privacy > span:first-child {
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  color: var(--success);
  background: var(--surface);
  border-radius: 50%;
  font-weight: 800;
}

.history-list {
  max-width: 980px;
  display: grid;
  gap: 1rem;
}

.history-card {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-primary);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.history-card > header {
  padding: 1.15rem 1.25rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
}

.history-card h2 {
  margin: 0.15rem 0 0.2rem;
  color: var(--brand-dark);
  font-size: 1.2rem;
}

.history-card p {
  margin: 0;
}

.history-type {
  color: var(--brand-primary);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.history-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 9%, var(--surface));
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 750;
  white-space: nowrap;
}

.history-facts {
  margin: 0;
  padding: 1.15rem 1.25rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.history-facts > div {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.history-facts dt {
  font-size: 0.8rem;
  font-weight: 650;
}

.history-facts dd {
  margin: 0;
  color: var(--brand-text);
  font-size: 1.05rem;
  font-weight: 800;
}

.history-settings {
  padding: 0 1.25rem 1.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.history-settings span {
  padding: 0.35rem 0.6rem;
  color: var(--brand-text);
  background: color-mix(in srgb, var(--neutral) 7%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
}

.history-privacy {
  padding: 0.8rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
  border-top: 1px solid color-mix(in srgb, var(--success) 18%, var(--border));
  font-size: 0.86rem;
  font-weight: 650;
}

.history-privacy.is-pending {
  color: var(--warning-text);
  background: color-mix(in srgb, var(--warning) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 25%, var(--border));
}

.history-privacy.is-pending > span:first-child {
  color: var(--warning-text);
}

.history-pagination {
  max-width: 980px;
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.history-pagination > span {
  color: var(--text-muted);
  font-weight: 650;
}

@media (max-width: 720px) {
  .history-summary,
  .history-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .history-card > header {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .history-summary,
  .history-facts {
    grid-template-columns: 1fr;
  }

  .history-pagination {
    align-items: stretch;
    flex-direction: column;
    text-align: center;
  }
}

.print-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  align-items: start;
  gap: 1.5rem;
}

.print-profile-editor,
.print-profile-list {
  max-width: none;
}

.profile-form-actions,
.profile-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.profile-cards {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.profile-card strong,
.profile-card span {
  display: block;
}

.profile-card span {
  margin-top: 0.25rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.profile-card-actions form {
  margin: 0;
}

.order-print-settings {
  max-width: 720px;
  display: grid;
  gap: 1.25rem;
}

.print-selection-summary { padding: 1rem 1.1rem; border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, var(--border)); border-left: 4px solid var(--brand-primary); border-radius: 10px; background: color-mix(in srgb, var(--brand-primary) 4%, var(--surface)); }
.print-selection-summary > strong { display: block; margin-bottom: .65rem; color: var(--brand-dark); font-size: 1.08rem; }
.print-specs { display: flex; flex-wrap: wrap; gap: .45rem; }
.print-specs span { padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: .85rem; }
.print-manual-options { margin: 0; padding: 1.1rem; border: 1px solid var(--border); border-radius: 10px; }
.print-manual-options legend { padding: 0 .4rem; color: var(--brand-dark); font-weight: 700; }
.print-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.save-print-profile { margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.save-print-profile summary { width: fit-content; color: var(--brand-primary); font-weight: 650; cursor: pointer; }
.save-print-profile-fields { display: grid; gap: .75rem; margin-top: .9rem; }
.envelope-logo-settings { padding: 1.1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.envelope-logo-settings h3, .envelope-logo-settings p { margin-top: 0; }
.envelope-logo-settings .checkbox-field { margin-bottom: .8rem; font-weight: 650; }
.profile-default-badge { display: inline-block !important; margin: 0 0 0 .4rem !important; padding: .18rem .45rem; border-radius: 999px; color: var(--success) !important; background: color-mix(in srgb, var(--success) 10%, var(--surface)); font-size: .72rem !important; vertical-align: middle; }
.selected-logo { margin: .5rem 0; color: var(--text-muted); font-size: .88rem; }

.form-field small {
  display: block;
  margin-top: 0.4rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.checkbox-field {
  margin: 0 0 1.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
}

.checkbox-field input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--brand-accent);
}

.field-error {
  display: block;
  margin-top: 0.35rem;
  color: var(--error);
  font-size: 0.86rem;
  font-weight: 650;
}

.field-validation-valid,
.validation-summary-valid {
  display: none;
}

.validation-summary {
  margin-bottom: 1.25rem;
  padding: 0.8rem 1rem;
  color: var(--error);
  background: var(--error-surface);
  border: 1px solid color-mix(in srgb, var(--error) 34%, var(--border));
  border-radius: 8px;
}

.validation-summary ul {
  margin: 0;
  padding-left: 1.2rem;
}

.auth-alternative {
  margin: 1.25rem 0 0;
  color: var(--text-muted);
  text-align: center;
}

.auth-message {
  text-align: center;
}

.success-icon,
.warning-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 800;
}

.success-icon {
  background: var(--success);
}

.warning-icon {
  background: var(--warning);
  color: var(--process-text);
}

.development-note {
  margin-block: 1.2rem;
  flex-direction: column;
  gap: 0.2rem;
  color: var(--warning-text);
  background: var(--warning-surface);
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
  text-align: left;
}

.registration-consent {
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-primary) 4%, white);
}

.registration-consent .checkbox-field {
  margin-bottom: 0.25rem;
  align-items: flex-start;
}

.registration-consent small {
  display: block;
  margin: 0.35rem 0 0 1.6rem;
  color: var(--text-muted);
}

.auth-shell-wide {
  grid-template-columns: minmax(240px, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.customer-form-card {
  max-width: 760px;
}

.customer-profile {
  max-width: 820px;
}

.form-section {
  min-width: 0;
  margin: 0 0 1.4rem;
  padding: 0;
  border: 0;
}

.form-section legend {
  width: 100%;
  margin-bottom: 1rem;
  padding-bottom: 0.55rem;
  color: var(--brand-dark);
  border-bottom: 1px solid var(--border);
  font-size: 1.05rem;
  font-weight: 750;
}

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

.form-field-wide {
  grid-column: 1 / -1;
}

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

.address-street,
.address-city {
  grid-column: span 3;
}

.address-house,
.address-postal {
  grid-column: span 1;
}

.billing-address-control:has(input[type="checkbox"]:checked) .billing-address-fields {
  display: none;
}

.customer-number-field {
  max-width: 18rem;
}

.customer-number-field input[readonly] {
  color: var(--text-muted);
  background: var(--page-background);
  cursor: default;
}

.step-indicator li.is-complete,
.step-indicator li.is-complete a {
  color: var(--wizard-complete-accent);
}

.step-indicator li.is-complete a > span {
  color: #fff;
  background: var(--wizard-complete-accent);
  border-color: var(--wizard-complete-accent);
  font-size: 0;
}

.step-indicator li.is-complete a > span::before { content: "✓"; font-size: 0.9rem; }
.step-indicator li.is-error { color: var(--error); }
.step-indicator li.is-error > .step-number { color: #fff; background: var(--error); border-color: var(--error); }
.step-indicator li a { display: flex; align-items: center; gap: .55rem; color: var(--process-primary-action); text-decoration: none; }
.step-indicator li a:hover { text-decoration: underline; }
.step-indicator li a > span { border-color: var(--process-primary-action); color: var(--process-primary-action); }

.wizard-processing {
  width: min(92vw, 34rem);
  max-width: none;
  padding: 0;
  color: var(--brand-text);
  background: transparent;
  border: 0;
  overflow: visible;
}

.wizard-processing:not([open]) { display: none; }

.wizard-processing::backdrop {
  background: rgb(20 31 38 / 42%);
  backdrop-filter: blur(3px);
}

.wizard-processing-panel {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 24px 70px rgb(8 14 25 / 28%);
}

.wizard-processing strong { display: block; }
.wizard-processing [data-wizard-processing-message] { color: var(--text-muted); }
.wizard-processing-content { min-width: 0; flex: 1; }
.wizard-processing-steps {
  display: grid;
  gap: 0.35rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}
.wizard-processing-steps[hidden] { display: none; }
.wizard-processing-steps li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
}
.wizard-processing-steps li[data-state="complete"] { color: var(--success); }
.wizard-processing-steps li[data-state="current"] { color: var(--brand-text); font-weight: 700; }
.wizard-processing-step-icon {
  width: 1.1rem;
  height: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.wizard-processing-steps li[data-state="current"] .wizard-processing-step-icon {
  border: 2px solid var(--border);
  border-top-color: var(--process-primary);
  border-radius: 50%;
  animation: wizard-spin 0.8s linear infinite;
}
.wizard-processing-hint {
  display: block;
  margin-top: 0.7rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.wizard-processing-hint[hidden] { display: none; }
.wizard-processing-spinner {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  border: 2px solid var(--border);
  border-top-color: var(--process-primary);
  border-radius: 50%;
  animation: wizard-spin 0.8s linear infinite;
}

@keyframes wizard-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wizard-processing-spinner,
  .wizard-processing-steps li[data-state="current"] .wizard-processing-step-icon { animation: none; border-top-width: 4px; }
}

.order-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

.order-list-row form {
  margin: 0;
}

.upload-token-form {
  display: none;
}

.upload-areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.upload-area {
  min-height: 205px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.7rem;
  color: var(--brand-text);
  background: color-mix(in srgb, var(--brand-primary) 4%, var(--surface));
  border: 2px dashed color-mix(in srgb, var(--brand-primary) 45%, var(--border));
  border-radius: 12px;
  cursor: pointer;
}

.upload-area:hover,
.upload-area.is-dragging {
  border-color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 7%, var(--surface));
}

.upload-area:focus-within {
  outline: 3px solid color-mix(in srgb, var(--brand-accent) 45%, transparent);
  outline-offset: 3px;
}

.upload-area-title {
  color: var(--brand-dark);
  font-size: 1.15rem;
  font-weight: 800;
}

.upload-area input[type="file"] {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.upload-progress {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.upload-progress progress,
.upload-file-row progress {
  accent-color: var(--brand-accent);
}

.upload-progress progress {
  width: min(15rem, 55%);
}

.upload-file-list {
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  list-style: none;
}

.source-documents { margin-top: 1rem; }
.source-documents[hidden], .source-documents [hidden] { display: none; }
.source-documents .upload-file-list {
  margin-top: 0.3rem;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.source-documents .upload-file-row {
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: 0;
}
.source-documents .upload-file-row.is-success { box-shadow: none; }
.source-documents .upload-file-row + .upload-file-row { border-top: 1px solid var(--border); }
.source-documents .upload-file-identity strong { font-size: 0.9rem; }

.upload-file-row {
  padding: 0.7rem 0.8rem;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.upload-file-row.is-error {
  border-color: color-mix(in srgb, var(--blocked) 45%, var(--border));
}

.upload-file-row.is-warning {
  border-color: color-mix(in srgb, var(--warning) 38%, var(--border));
  box-shadow: inset 3px 0 0 var(--warning);
}

.upload-file-row.is-success {
  border-color: color-mix(in srgb, var(--success) 34%, var(--border));
  box-shadow: inset 3px 0 0 var(--success);
}

.upload-document-header {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem 1rem;
}

.upload-file-identity {
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

.upload-file-identity strong,
.upload-file-identity span {
  overflow-wrap: anywhere;
}

.upload-file-identity span {
  color: var(--text-muted);
  font-size: 0.86rem;
}

.upload-file-row > progress {
  width: 100%;
  height: 0.35rem;
  margin-top: 0.45rem;
}

.upload-file-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem;
}

.upload-file-actions form {
  margin: 0;
}

.upload-file-status.file-valid,
.upload-file-status.file-warning {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  font-weight: 700;
}

.upload-file-status.file-valid {
  color: var(--success);
  padding: 0.25rem 0.5rem;
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  border-radius: 999px;
}

.upload-file-status.file-warning {
  color: var(--warning-text);
  padding: 0.25rem 0.5rem;
  background: color-mix(in srgb, var(--warning) 9%, var(--surface));
  border-radius: 999px;
}

.document-review-guidance {
  margin-top: 1rem;
  padding: 0.8rem 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  background: color-mix(in srgb, var(--text-muted) 5%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 8px;
}

.document-review-guidance > div,
.document-review-guidance > p {
  margin: 0;
  display: grid;
  gap: 0.25rem;
}

.document-review-guidance > p {
  flex: 0 0 auto;
  text-align: right;
}

.document-review-result {
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.8rem;
  font-weight: 700;
  border-radius: 8px;
}

.document-review-result.is-success {
  color: var(--success);
  background: var(--success-surface);
}

.document-review-result.is-warning {
  color: var(--warning-text);
  background: var(--warning-surface);
}

.document-review-result.is-blocked {
  color: var(--blocked-text);
  background: var(--blocked-surface);
}

.workflow-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  border: 1px solid transparent;
}

.workflow-notice.is-success {
  border-color: color-mix(in srgb, var(--success) 25%, var(--border));
}

.workflow-notice.is-warning {
  border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
}

.workflow-secondary-action {
  margin: 0.5rem 0 0;
}

.upload-file-message,
.boundary-review-message {
  margin: 0.55rem 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.icon-button {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.4rem;
  display: inline-grid;
  place-items: center;
  color: var(--brand-primary-action);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
}

.icon-button:hover {
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface));
  border-color: var(--border);
}

.icon-button.is-destructive {
  color: var(--destructive-action);
}

body[data-brand] .page-content .wizard-remove-blocked {
  color: #fff;
  background: var(--remediation-action);
  border-color: var(--remediation-action);
}

body[data-brand] .page-content .wizard-remove-blocked:hover {
  color: #fff;
  background: color-mix(in srgb, var(--remediation-action) 82%, #000);
  border-color: color-mix(in srgb, var(--remediation-action) 82%, #000);
}

[data-blocked-actions][hidden] {
  display: none;
}

body[data-brand] .page-content .button:disabled,
body[data-brand] .page-content .button[aria-disabled="true"] {
  color: var(--disabled-action-text);
  background: var(--disabled-action-background);
  border-color: var(--disabled-action-border);
  cursor: not-allowed;
  opacity: 1;
}

.wizard-remove-blocked svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-button svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.detected-shipments {
  grid-column: 1 / -1;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}

.detected-shipments summary {
  width: fit-content;
  color: var(--brand-primary-action);
  font-weight: 700;
  cursor: pointer;
}

.detected-shipments ol {
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  list-style: none;
}

.detected-shipments li {
  padding: 0.45rem 0.55rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--brand-primary) 3%, var(--surface));
  border-radius: 8px;
}

.detected-shipments li.is-problematic {
  box-shadow: inset 3px 0 0 var(--blocked);
  background: color-mix(in srgb, var(--blocked) 5%, var(--surface));
}

.detected-shipments li.requires-review {
  box-shadow: inset 3px 0 0 var(--warning);
  background: color-mix(in srgb, var(--warning) 5%, var(--surface));
}

.detected-shipments li.is-approved {
  box-shadow: inset 3px 0 0 var(--success);
  background: color-mix(in srgb, var(--success) 4%, var(--surface));
}

.detected-shipment-main {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.35rem 1rem;
  overflow: hidden;
}

.detected-shipment-number {
  flex: 0 0 1.7rem;
  min-width: 1.7rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.detected-shipment-main > span:not(.detected-shipment-address) {
  flex: 0 0 auto;
  color: var(--text-muted);
}

.detected-shipment-address {
  min-width: 0;
  color: var(--brand-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detected-shipment-warning,
.document-preview-warning {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--blocked-text);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.detected-shipment-approved {
  color: var(--success) !important;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.detected-shipment-actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.detected-shipment-actions form {
  margin: 0;
}

.blocked-shipment-actions {
  margin-block: 1rem;
}

.blocked-shipment-actions[hidden] {
  display: none;
}

.detected-shipments .boundary-review-message {
  grid-column: 1 / -1;
  margin: 0;
}

.boundary-review {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.boundary-review-summary {
  margin-bottom: 0.6rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--warning-text);
}

.boundary-review-summary.is-complete,
.boundary-decision-status {
  color: var(--success);
}

.boundary-review-summary span {
  font-size: 0.85rem;
}

.boundary-review ol {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  list-style: none;
}

.boundary-review-row {
  padding: 0.55rem 0.65rem;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
  align-items: center;
  gap: 0.6rem 1rem;
  background: color-mix(in srgb, var(--warning) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--border));
  border-radius: 8px;
}

.boundary-review-message {
  grid-column: 1 / -1;
  margin-top: 0;
}

.boundary-review-row.is-resolved {
  background: color-mix(in srgb, var(--success) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 28%, var(--border));
}

.boundary-review-row.is-blocking {
  background: color-mix(in srgb, var(--blocked) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--blocked) 30%, var(--border));
}

.boundary-review-description {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.boundary-review-description > span:not(.boundary-decision-status) {
  color: var(--text-muted);
}

.boundary-decision-status,
.boundary-blocked-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.boundary-blocked-status {
  color: var(--blocked-text);
}

.boundary-review-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
}

.boundary-review-actions form {
  margin: 0;
}

.boundary-choice.is-selected {
  color: #fff;
  background: var(--brand-primary-action);
  border-color: var(--brand-primary-action);
}

.empty-upload-message {
  margin: 1rem 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.document-preview-dialog {
  width: min(96vw, 96rem);
  height: min(94dvh, 70rem);
  max-width: none;
  max-height: none;
  padding: 0;
  color: var(--brand-text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgb(8 14 25 / 28%);
  overflow: hidden;
}

.document-preview-dialog::backdrop {
  background: rgb(8 14 25 / 58%);
}

body:has(.document-preview-dialog[open]) {
  overflow: hidden;
}

.document-preview-panel {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.document-preview-header,
.document-preview-toolbar {
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.document-preview-header {
  justify-content: space-between;
}

.document-preview-header h2 {
  margin: 0;
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}

.document-preview-close {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  padding: 0;
  color: var(--brand-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.document-preview-close:hover {
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface));
}

.document-preview-toolbar {
  justify-content: center;
  flex-wrap: wrap;
}

.document-preview-toolbar p {
  min-width: 7rem;
  margin: 0;
  text-align: center;
  font-weight: 700;
}

[data-preview-previous][hidden],
[data-preview-next][hidden] {
  display: none;
}

.document-preview-warning[hidden] {
  display: none;
}

.document-preview-viewport {
  min-width: 0;
  min-height: 0;
  padding: 1rem;
  overflow: auto;
  text-align: center;
  background: color-mix(in srgb, var(--page-background) 72%, var(--border));
}

.document-preview-message {
  margin: 2rem auto;
  color: var(--text-muted);
}

.document-preview-page {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  line-height: 0;
  box-shadow: 0 8px 28px rgb(8 14 25 / 18%);
}

.document-preview-page img {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
}

.document-analysis-zone {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--brand-accent) 82%, #fff);
  background: color-mix(in srgb, var(--brand-primary) 9%, transparent);
  pointer-events: none;
}

.document-analysis-zone[hidden] {
  display: none;
}

.document-analysis-zone.is-highlighted {
  border-width: 3px;
  background: color-mix(in srgb, var(--brand-accent) 17%, transparent);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 75%);
}

.document-analysis-label {
  position: absolute;
  top: 0;
  padding: 0.25rem 0.4rem;
  color: #fff;
  background: color-mix(in srgb, var(--brand-dark) 88%, #000);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.document-analysis-label {
  left: 0;
  transform: translateY(-100%);
}

[data-zone-kind="production-code"] .document-analysis-label {
  right: 0;
  max-width: 100%;
  padding: 0.15rem 0.2rem;
  overflow: hidden;
  transform: none;
  text-overflow: ellipsis;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 767px) {
  .brand-stage {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 190px;
    background-image: var(--brand-hero-image);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-inline: auto;
  }

  .brand-stage-frame + .page-content {
    padding-top: 20px;
  }

  .brand-stage-media {
    display: none;
  }

  .brand-stage-inner {
    position: relative;
    inset: auto;
    min-height: 190px;
    padding-block: 1.5rem;
  }

  .brand-stage-copy,
  .brand-stage-copy strong,
  .brand-stage-copy p {
    max-width: 21rem;
  }

  .brand-stage-copy strong {
    font-size: clamp(1.5rem, calc(1.25rem + 1cqi), 1.875rem);
  }

  .brand-stage-copy p {
    font-size: max(0.875rem, 14px);
  }
}

@media (max-width: 760px) {

  .header-bar {
    min-height: 70px;
  }

  .brand-symbol {
    width: 40px;
    height: 40px;
  }

  .brand-name small,
  .account-name {
    display: none;
  }

  .account-actions {
    gap: 0.2rem;
  }

  .account-actions .button {
    padding-inline: 0.65rem;
  }

  .navigation-links {
    gap: 1.15rem;
  }

  .page-content {
    padding-block: 2.5rem;
  }

  .primary-actions,
  .auth-shell,
  .upload-areas,
  .print-profile-layout,
  .form-grid,
  .address-grid,
  .order-review-metrics {
    grid-template-columns: 1fr;
  }

  .order-review-price-table-wrap {
    border: 0;
    overflow: visible;
  }

  .order-review-price-table,
  .order-review-price-table tbody,
  .order-review-price-table tr,
  .order-review-price-table td {
    display: block;
    width: 100%;
  }

  .order-review-price-table thead {
    display: none;
  }

  .order-review-price-table tbody {
    display: grid;
    gap: 0.75rem;
  }

  .order-review-price-table tr {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
  }

  .order-review-price-table th,
  .order-review-price-table td,
  .order-review-price-table td:first-child {
    display: grid;
    grid-template-columns: minmax(8.5rem, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.55rem 0;
    text-align: right;
  }

  .order-review-price-table td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: left;
  }

  .order-review-price-table td + td {
    border-top: 1px solid var(--border);
  }

  .order-review-detail-list li {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .order-review-logo-cost {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .order-review-logo-price {
    grid-column: 2;
    text-align: left;
  }

  .form-field-wide {
    grid-column: auto;
  }

  .address-street,
  .address-house,
  .address-postal,
  .address-city {
    grid-column: auto;
  }

  .print-option-grid {
    grid-template-columns: 1fr;
  }

  .profile-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .step-indicator {
    grid-template-columns: 1fr 1fr;
  }

  .action-card {
    min-height: 0;
  }

  .auth-introduction {
    display: none;
  }

  .document-preview-dialog {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .document-preview-header,
  .document-preview-toolbar {
    padding-inline: 0.7rem;
  }

  .document-preview-viewport {
    padding: 0.6rem;
  }

  .upload-document-header,
  .boundary-review-summary,
  .boundary-review-row {
    align-items: flex-start;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .document-review-guidance {
    flex-direction: column;
  }

  .document-review-guidance > p {
    text-align: left;
  }

  .boundary-review-actions {
    justify-content: flex-start;
  }

  .upload-file-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 440px) {
  .page-shell {
    width: min(100% - 1.25rem, 1120px);
  }

  .brand-name strong {
    max-width: 8rem;
  }

  .brand-name {
    display: none;
  }

  .action-card {
    grid-template-columns: auto 1fr;
  }

  .action-arrow {
    display: none;
  }

  .footer-content {
    flex-direction: column;
  }

  .step-indicator {
    grid-template-columns: 1fr;
  }

  .order-list-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .order-list-row {
    grid-template-columns: 1fr;
  }

  .detected-shipments li {
    grid-template-columns: 1fr auto;
  }

  .detected-shipment-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }

  .detected-shipment-address {
    max-width: 100%;
    white-space: normal;
  }
}

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

.bulk-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bulk-field { display: grid; gap: .4rem; margin-bottom: 1rem; min-width: 0; }
.bulk-field-wide { grid-column: 1 / -1; }
.bulk-field input { width: 100%; min-width: 0; padding: .65rem; border: 1px solid var(--border); border-radius: .35rem; font: inherit; background: var(--surface); color: var(--brand-text); }
.bulk-field small { color: var(--text-muted); overflow-wrap: anywhere; }
.bulk-sender { border: 1px solid var(--border); padding: 1rem; margin: 1rem 0; border-radius: .5rem; }
.bulk-sender h4 { margin: 0 0 .65rem; font-size: 1rem; }
.bulk-sender-notice { display: grid; gap: .3rem; padding: .85rem 1rem; border-left: 3px solid var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface)); }
.bulk-sender-notice.is-success { border-left-color: var(--success); background: color-mix(in srgb, var(--success) 6%, var(--surface)); }
.bulk-sender-notice small, .bulk-sender-option small { display: block; color: var(--text-muted); font-weight: 400; }
.bulk-sender-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: .85rem 0 1rem; }
.bulk-sender-option { display: flex; align-items: flex-start; gap: .65rem; padding: .85rem; border: 1px solid var(--border); border-radius: .5rem; cursor: pointer; }
.bulk-sender-option:has(input:checked) { border-color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface)); }
.bulk-sender-option input { margin-top: .2rem; }
.bulk-manual-sender[hidden] { display: none; }
@media (max-width: 640px) { .bulk-input-grid { grid-template-columns: 1fr; } .bulk-field-wide { grid-column: auto; } }
@media (max-width: 640px) { .bulk-sender-options { grid-template-columns: 1fr; } }

.bulk-group-list { display: grid; gap: 1rem; }
.bulk-group { padding: 1.25rem; }
.bulk-group h3 { margin: 0; font-size: 1.15rem; }
.bulk-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.bulk-header-actions .bulk-remove-group { min-width: 2.75rem; min-height: 2.75rem; border-color: color-mix(in srgb, var(--destructive-action) 28%, var(--border)); background: color-mix(in srgb, var(--destructive-action) 5%, var(--surface)); }
.bulk-header-actions .bulk-remove-group:hover { color: #fff; border-color: var(--destructive-action); background: var(--destructive-action); }
.bulk-upload-introduction { margin-bottom: 1rem; padding: 1rem 1.1rem; border-left: 3px solid var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 4%, var(--surface)); }
.bulk-upload-introduction ol { margin: .55rem 0; padding-left: 1.35rem; }
.bulk-upload-introduction p { margin: .55rem 0 0; color: var(--text-muted); }
.bulk-upload-card { height: 100%; min-height: 320px; justify-content: flex-start; }
.bulk-upload-card.is-valid { color: var(--brand-text); background: color-mix(in srgb, var(--success) 8%, var(--surface)); border-color: var(--success); border-style: solid; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 18%, transparent); }
.bulk-upload-card.has-warning { background: color-mix(in srgb, var(--warning) 7%, var(--surface)); border-color: var(--warning); }
.bulk-upload-card.is-pending { background: color-mix(in srgb, var(--brand-primary) 7%, var(--surface)); border-color: var(--brand-primary); }
.bulk-upload-step { color: var(--text-muted); font-size: .82rem; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; }
.bulk-upload-requirements { color: var(--text-muted); line-height: 1.45; }
.bulk-upload-action { margin-top: auto; }
.bulk-upload-result { width: 100%; display: flex; align-items: flex-start; gap: .55rem; padding-top: .75rem; border-top: 1px solid var(--border); color: var(--text-muted); }
.bulk-upload-result > span { min-width: 0; display: grid; gap: .15rem; }
.bulk-upload-result strong, .bulk-upload-result small { overflow-wrap: anywhere; }
.bulk-upload-card.is-valid .bulk-upload-result { color: var(--success); border-top-color: color-mix(in srgb, var(--success) 28%, var(--border)); }
.bulk-upload-card.has-warning .bulk-upload-result { color: var(--warning-text); border-top-color: color-mix(in srgb, var(--warning) 28%, var(--border)); }
.bulk-upload-card.is-pending .bulk-upload-result { color: var(--brand-primary); }
.bulk-upload-card.is-pending .bulk-status-icon { visibility: hidden; }
.bulk-upload-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bulk-upload-help-grid .bulk-format-help { margin-top: .75rem; }
.bulk-group [data-bulk-group-form][hidden], .bulk-group-summary[hidden], .bulk-add-group[hidden] { display: none; }
.bulk-status-icon { width: 1rem; height: 1rem; flex-shrink: 0; vertical-align: middle; }
.bulk-format-help { margin-top: 1rem; color: var(--text-muted); overflow-wrap: anywhere; }
.bulk-upload-error:not([hidden]) { padding: .75rem 1rem; border-left: 3px solid var(--error); background: color-mix(in srgb, var(--error) 6%, var(--surface)); overflow-wrap: anywhere; }
.bulk-field input[aria-invalid="true"] { border-color: var(--error); }
.bulk-add-group { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; padding: 1rem; border: 1px dashed var(--border); border-radius: .75rem; color: var(--brand-primary); text-decoration: none; }
.bulk-add-group svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; }
.bulk-recipient-list { list-style: none; padding: 0; }
.bulk-recipient-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto auto; align-items: center; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.bulk-recipient-row small { display: block; color: var(--text-muted); }
.bulk-recipient-row .validation-message { grid-column: 1 / -1; margin: 0; }
.bulk-editor-heading, .bulk-sender-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.bulk-editor-heading p, .bulk-sender-summary p { margin: 0; }
.bulk-edit-button { white-space: nowrap; }
.bulk-edit-button svg { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bulk-remove-errors svg { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bulk-problem-report { margin-bottom: 1rem; }
.bulk-details { margin-top: .75rem; }
.bulk-details-toggle { display: flex; align-items: center; gap: .5rem; width: fit-content; min-height: 2.75rem; list-style: none; cursor: pointer; color: var(--brand-primary); font-weight: 600; }
.bulk-details-toggle::-webkit-details-marker { display: none; }
.bulk-details-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }
.bulk-details[open] > summary svg { transform: rotate(90deg); }
.bulk-tabs { display: flex; flex-wrap: wrap; gap: .25rem 1rem; border-bottom: 1px solid var(--border); margin-top: .5rem; }
.bulk-tabs [role="tab"] { display: flex; align-items: center; min-height: 2.75rem; padding: .5rem .25rem; text-decoration: none; color: var(--text-muted); border-bottom: .15rem solid transparent; font-weight: 600; }
.bulk-tabs [aria-selected="true"] { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.letter-results { margin-top: 1.25rem; }
.letter-results-summary { margin: 0; color: var(--text-muted); }
.letter-results-toggle, .source-documents-toggle { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .35rem 0; border: 0; background: transparent; color: var(--brand-primary-action); font: inherit; font-weight: 700; cursor: pointer; }
.letter-results-toggle svg, .source-documents-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .15s ease; }
.letter-results-toggle[aria-expanded="true"] svg, .source-documents-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.letter-results [hidden] { display: none; }
.letter-results-list { list-style: none; padding: 0; margin: 0; }
.letter-result-row { display: grid; grid-template-columns: 2.5rem minmax(0, 2fr) minmax(0, 1fr) auto minmax(6rem, 1fr) auto; gap: .75rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.letter-result-row > * { min-width: 0; }
.letter-result-number { color: var(--brand-dark); font-weight: 700; }
.letter-result-recipient small, .letter-result-status small { display: block; color: var(--text-muted); }
.letter-result-recipient > span { display: block; }
.letter-result-city, .letter-result-pages { color: var(--text-muted); }
.letter-result-boundary { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.letter-result-boundary .button { min-height: 2.5rem; }
.letter-page-links { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.letter-page-numbers { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; }
.letter-page-numbers > a, .letter-page-current, .letter-page-ellipsis { min-width: 2.5rem; min-height: 2.5rem; display: inline-grid; place-items: center; padding: .25rem; border-radius: .4rem; }
.letter-page-numbers > a { color: var(--brand-primary-action); text-decoration: none; }
.letter-page-numbers > a:hover { background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface)); }
.letter-page-current { background: var(--brand-primary-action); color: #fff; font-weight: 700; }
.letter-page-ellipsis { color: var(--text-muted); }
.letter-page-mobile { display: none; }
.bulk-pagination[data-letter-pagination], .bulk-pagination[data-letter-pagination] form { align-items: center; }
.bulk-pagination[data-letter-pagination] form { display: flex; flex-wrap: wrap; gap: .4rem; }
.bulk-pagination[data-letter-pagination] input[type="number"] { width: 4.5rem; min-height: 2.75rem; }
@media (prefers-reduced-motion: reduce) { .letter-results-toggle svg, .source-documents-toggle svg { transition: none; } }
@media (max-width: 700px) { .letter-page-numbers { display: none; } .letter-page-mobile { display: inline; font-weight: 600; } }
@media (max-width: 700px) { .letter-result-row { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .35rem .75rem; } .letter-result-recipient { grid-column: 2; } .letter-result-city, .letter-result-pages, .letter-result-status, .letter-result-boundary { grid-column: 2 / -1; } .letter-result-city:empty { display: none; } .letter-result-row .bulk-row-actions { grid-column: 3; grid-row: 1 / 4; } }
.bulk-row-actions { display: flex; justify-content: flex-end; align-items: center; }
.bulk-row-actions .icon-button { min-width: 2.75rem; min-height: 2.75rem; }
.bulk-recipient-row.is-problem { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; }
.bulk-detail-footer, .bulk-pagination { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.bulk-secondary-action { color: var(--brand-primary); font-size: .9rem; text-underline-offset: .2rem; }
.composition-help { color: var(--text-muted); font-size: .9rem; }
.composition-list { list-style: none; padding: 0; margin: 1rem 0; }
.composition-row { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.composition-grip { color: var(--text-muted); cursor: grab; font-size: 1.5rem; padding: .5rem; }
.composition-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.composition-name small { display: block; color: var(--text-muted); }
.composition-actions, .composition-actions form { display: flex; align-items: center; flex-wrap: wrap; }
.composition-actions .icon-button { min-width: 2.75rem; min-height: 2.75rem; }
.composition-actions button:disabled { opacity: .35; cursor: default; }
.composition-upload { min-height: 0; padding: 1rem; }
.composition-example { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; border-top: 1px solid var(--border); margin-top: 1.5rem; padding-top: 1rem; }
.composition-example h3 { margin: 0; }
[data-shipment-composition][aria-busy="true"] .composition-actions { pointer-events: none; opacity: .65; }
@media (max-width: 640px) { .composition-row { flex-wrap: wrap; } .composition-actions { margin-left: auto; } .composition-name { flex-basis: calc(100% - 4rem); } }
@media (max-width: 640px) { .bulk-group .upload-areas, .bulk-upload-help-grid { grid-template-columns: 1fr; } .bulk-upload-card { min-height: 290px; } .bulk-recipient-row, .bulk-recipient-row.is-problem { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; } .bulk-recipient-row > span:first-child, .bulk-recipient-row .bulk-entry-reason { grid-column: 1 / -1; } .bulk-row-actions { grid-column: 2; } }