File Type Icons Grid

<div class="nuda-ftypes" role="list" aria-label="Supported file types">
  <div class="nuda-ftype nuda-ftype--pdf" role="listitem">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
         aria-hidden="true">
      <path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"
            stroke-linejoin="round" />
      <path d="M14 3v6h6" stroke-linejoin="round" />
    </svg>
    <span>PDF</span>
  </div>
  <div class="nuda-ftype nuda-ftype--doc" role="listitem">
    <!-- doc icon --><span>DOC</span>
  </div>
  <div class="nuda-ftype nuda-ftype--img" role="listitem">
    <!-- img icon --><span>IMG</span>
  </div>
  <div class="nuda-ftype nuda-ftype--vid" role="listitem">
    <!-- vid icon --><span>VID</span>
  </div>
  <div class="nuda-ftype nuda-ftype--zip" role="listitem">
    <!-- zip icon --><span>ZIP</span>
  </div>
</div>

/* File Type Icons Grid
   5-up grid of supported file types with color-coded icons. */

.nuda-ftypes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  padding: 0.75rem;
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.nuda-ftype {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.25rem;
  background: #111114;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: transform 0.2s;
}

.nuda-ftype:hover { transform: translateY(-2px); }
.nuda-ftype svg { width: 22px; height: 22px; }

.nuda-ftype--pdf { color: #ff5e7a; }
.nuda-ftype--doc { color: #62b6ff; }
.nuda-ftype--img { color: #6ee7b7; }
.nuda-ftype--vid { color: #e4ff54; }
.nuda-ftype--zip { color: #a0a0a8; }

@media (prefers-reduced-motion: reduce) {
  .nuda-ftype { transition: none; }
  .nuda-ftype:hover { transform: none; }
}