/* A shared visual reference, not an automatically assigned sample number. */
.sample-sequence-banner {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 15px;
  border: 2px solid #c59017;
  border-radius: 12px;
  background: linear-gradient(125deg,#fffae4,#f7de7c);
  box-shadow: inset 0 1px 0 #fff9d2,0 4px 12px #956b1429;
  color: #483006;
  line-height: 1.55;
}
.sample-sequence-banner > strong { font-size: 13px; }
.sample-sequence-last {
  direction: ltr;
  text-align: center;
  background: #ffe78c !important;
  border: 2px solid #ac7212 !important;
  color: #352500 !important;
  font: 900 18px/1.4 Tahoma,Arial,sans-serif !important;
  min-height: 52px;
  box-shadow: 0 0 0 2px #fff5bc inset;
  cursor: default;
}
.sample-sequence-banner > small { color: #573b09; font-size: 12px; font-weight: 800; }
.sample-sequence-banner[data-sequence-error="true"] { background: #fff0ef; border-color: #bd3842; color: #8b1920; }
.sample-sequence-banner[data-sequence-error="true"] .sample-sequence-last { background: #ffdad7 !important; border-color: #bd3842 !important; }
@media (max-width: 720px) { .sample-sequence-banner { grid-column: 1/-1; } }