body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: #1f2933;
  background: #f5f7fa;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}
h1 { font-size: 1.3rem; border-bottom: 1px solid #d2d6dc; padding: 1rem 0 0.6rem; }
h2 { font-size: 1.2rem; }
a { color: #0b61a4; }
.muted, .meta { color: #6b7280; font-size: 0.875rem; }
table.cities { width: 100%; border-collapse: collapse; background: #fff; }
.cities th, .cities td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid #e5e7eb; }
.badge {
  display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 500; background: #e5e7eb; color: #374151;
}
.badge[data-status^="waiting for shipment"] { background: #e0e7ff; color: #3730a3; }
.badge[data-status^="waiting for feedback"] { background: #fef3c7; color: #92400e; }
.badge[data-status^="waiting for prod"] { background: #fee2e2; color: #991b1b; }
.badge[data-status^="validated"] { background: #d1fae5; color: #065f46; }
.timeline {
  max-height: 60vh; overflow-y: auto; background: #fff; padding: 0.5rem;
  border: 1px solid #d2d6dc; border-radius: 4px;
}
.entry { padding: 0.4rem 0.7rem; margin: 0.4rem 0; border-left: 4px solid #9ca3af; }
.entry.customer { border-left-color: #0b9d6a; background: #f0fdf7; }
.entry.staff, .entry.system { border-left-color: #0b61a4; background: #f0f7fd; }
.entry .label { font-weight: 600; }
.entry .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.entry.compact { border-left-color: #d2d6dc; background: none; color: #6b7280; font-size: 0.875rem; padding: 0.15rem 0.7rem; }
form { margin: 1rem 0; display: grid; gap: 0.6rem; }
label { display: grid; gap: 0.25rem; font-size: 0.9rem; }
textarea, input[type="text"], select { font: inherit; padding: 0.4rem; border: 1px solid #9ca3af; border-radius: 4px; }
button {
  font: inherit; padding: 0.45rem 1rem; border: 0; border-radius: 4px;
  background: #0b61a4; color: #fff; cursor: pointer; justify-self: start;
}
.error { background: #fee2e2; border: 1px solid #fca5a5; color: #7f1d1d; padding: 0.8rem 1rem; border-radius: 4px; margin: 1rem 0; }
.timeline img.attachment { max-width: 240px; max-height: 180px; display: block; margin: 0.3rem 0; cursor: zoom-in; border: 1px solid #d2d6dc; background: #fff; }
.drop { display: grid; gap: 0.5rem; justify-items: start; border: 1px dashed #9ca3af; border-radius: 4px; padding: 0.6rem; }
form.dragging .drop { border-color: #0b61a4; background: #f0f7fd; }
button.secondary { background: #fff; color: #0b61a4; border: 1px solid #0b61a4; }
ul.pending { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
ul.pending li { position: relative; }
ul.pending img { width: 80px; height: 80px; object-fit: cover; border: 1px solid #d2d6dc; border-radius: 4px; display: block; }
ul.pending button { position: absolute; top: 2px; right: 2px; padding: 0 0.4rem; border-radius: 999px; background: #1f2933; }
.actions { display: flex; gap: 1rem; align-items: center; }
#composer-status { color: #7f1d1d; }
code { overflow-wrap: anywhere; }