.video-upload-notice {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  position: relative;
  max-height: 0;
  margin: 0;
  padding: 0 10px;
  overflow: hidden;
  opacity: 0;
  border-left: 4px solid #c8954d;
  background: #f0ddb9;
  color: #24343c;
  font: 700 10px/1.2 "Arial Narrow", Arial, sans-serif;
  letter-spacing: .08em;
  transition: max-height .3s ease, padding .3s ease, margin .3s ease, opacity .3s ease;
}
.video-upload-notice.is-visible { max-height: 64px; margin: 6px 0 4px; padding: 8px 10px 11px; opacity: 1; }
.video-upload-notice strong { color: #9a6b33; }
.video-upload-notice span:last-of-type { margin-left: auto; text-align: right; }
.video-upload-symbol { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid #9a6b33; border-radius: 50%; font-size: 13px; line-height: 1; }
.video-upload-track { position: absolute; right: 10px; bottom: 5px; left: 10px; height: 2px; background: #c8954d44; }
.video-upload-track::after { content: ""; display: block; width: 0; height: 100%; background: #b77d39; }
.video-upload-notice.is-uploading .video-upload-track::after { animation: video-upload-progress 2s linear forwards; }
@keyframes video-upload-progress { to { width: 100%; } }
.video-upload-step-affected { padding-left: 7px; box-shadow: inset 2px 0 #c8954d; background: #fbf1df; }
.video-upload-step-updated { padding: 5px 7px; box-shadow: inset 2px 0 #c8954d; background: #f9edda; }
.video-upload-step-updated del { display: block; color: #8a9793; font-size: 11px; font-weight: 400; }
.video-upload-step-updated ins { display: block; color: #0d554b; font-size: 13px; font-weight: 600; text-decoration: none; animation: video-upload-write .9s ease-out both; }
@keyframes video-upload-write { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.sop-build-stock-video.video-upload-source-active { outline: 2px solid #d3a052; outline-offset: -2px; animation: video-upload-source-pulse 1.5s ease-in-out infinite; }
@keyframes video-upload-source-pulse { 50% { box-shadow: inset 0 0 0 3px #d3a052; } }
.sop-build-status.video-upload-review { color: #9a6b33; }
@media (max-width: 620px) { .video-upload-notice { flex-wrap: wrap; gap: 5px; } .video-upload-notice span:last-of-type { margin-left: 0; text-align: left; } }
@media (prefers-reduced-motion: reduce) { .video-upload-notice { transition: none; } .video-upload-notice.is-uploading .video-upload-track::after, .video-upload-step-updated ins, .sop-build-stock-video.video-upload-source-active { animation: none; } .video-upload-track::after { width: 100%; } }