Empty State No Files

<div class="nuda-empty" role="status">
  <div class="nuda-empty__art" aria-hidden="true">
    <svg viewBox="0 0 64 64" fill="none">
      <rect x="12" y="18" width="32" height="40" rx="3"
            fill="#111114" stroke="rgba(255,255,255,.1)" stroke-width="1.5" />
      <rect x="20" y="10" width="32" height="40" rx="3"
            fill="#0c0c10" stroke="rgba(255,255,255,.15)" stroke-width="1.5" />
      <path d="M28 24h16M28 30h16M28 36h10"
            stroke="rgba(255,255,255,.2)" stroke-width="1.5"
            stroke-linecap="round" />
      <circle cx="48" cy="46" r="8" fill="#0c0c10"
              stroke="#e4ff54" stroke-width="1.5" />
      <path d="M48 42v8M44 46h8"
            stroke="#e4ff54" stroke-width="1.5" stroke-linecap="round" />
    </svg>
  </div>
  <p class="nuda-empty__title">No files yet</p>
  <p class="nuda-empty__hint">Drop files here or browse to start uploading</p>
</div>

/* Empty State — No Files
   Friendly placeholder shown before any uploads exist. */

.nuda-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.5rem 1.25rem;
  background: #0c0c10;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  min-width: 280px;
}

.nuda-empty__art {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
  animation: nuda-empty-float 3s ease-in-out infinite;
}

.nuda-empty__art svg {
  width: 100%;
  height: 100%;
}

.nuda-empty__title {
  margin: 0;
  font-size: 0.9rem;
  color: #fafafa;
  font-weight: 600;
}

.nuda-empty__hint {
  margin: 0;
  font-size: 0.78rem;
  color: #63636e;
  text-align: center;
}

@keyframes nuda-empty-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-empty__art { animation: none; }
}