.n-media {
  min-width: 0;
  margin: 12px 0;
  padding: 14px;
  border: 2px dashed #adb8ba;
  background: #f8fbf9;
  color: #39415a;
}
.n-media > strong { display: block; color: #1d2433; }
.n-media-help, .n-media-status { margin: 8px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.n-media-help { font-size: 13px; }
.n-media-status { font-size: 13px; color: #39415a; }
.n-media-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.n-media-button {
  min-height: 44px;
  max-width: 100%;
  padding: 9px 13px;
  border: 1px solid #647773;
  border-radius: 3px;
  background: #fff;
  color: #263b34;
  font: inherit;
  font-weight: 600;
  white-space: normal;
  cursor: pointer;
}
.n-media-button:hover { background: #e6f6ee; border-color: #006b35; }
.n-media:focus-visible, .n-media-button:focus-visible { outline: 3px solid #006b35; outline-offset: 3px; }
.n-media-preview { margin-top: 12px; max-width: 100%; }
.n-media-preview img { display: block; width: auto; max-width: 100%; max-height: 180px; object-fit: contain; }
.n-media-drag { border-style: solid; border-color: #006b35; background: #e6f6ee; }
.n-media-error { border-color: #ab2830; }
.n-media-error .n-media-status { color: #9a1721; }
.n-media[aria-busy="true"] { border-style: dotted; }
.n-media [hidden] { display: none !important; }
@media (max-width: 420px) {
  .n-media { padding: 11px; }
  .n-media-actions { gap: 7px; }
  .n-media-button { flex: 1 1 125px; padding: 9px; }
}