:root {
  --fa-icon-size: 20px;
  --fa-gap: 8px
}

.fa-solid {
  font-style: normal
}

/* ensure both specific file-* classes and generic .fa-file get the sizing/placement */
.fa-solid[class*="fa-file-"]::before,
.fa-solid.fa-file::before {
  content: '';
  display: inline-block;
  width: var(--fa-icon-size);
  height: var(--fa-icon-size);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: var(--fa-gap);
}

.fa-file-pdf::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect rx='6' width='48' height='48' fill='%23E33'/><text x='24' y='32' font-size='18' font-family='Arial,Helvetica,sans-serif' fill='%23fff' text-anchor='middle'>PDF</text></svg>");
}

.fa-file-word::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect rx='6' width='48' height='48' fill='%232B7AE4'/><text x='24' y='32' font-size='16' font-family='Arial,Helvetica,sans-serif' fill='%23fff' text-anchor='middle'>DOC</text></svg>");
}

.fa-file-excel::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect rx='6' width='48' height='48' fill='%231E9F3E'/><text x='24' y='32' font-size='14' font-family='Arial,Helvetica,sans-serif' fill='%23fff' text-anchor='middle'>XLS</text></svg>");
}

.fa-file-powerpoint::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect rx='6' width='48' height='48' fill='%23E67E22'/><text x='24' y='32' font-size='14' font-family='Arial,Helvetica,sans-serif' fill='%23fff' text-anchor='middle'>PPT</text></svg>");
}

.fa-file-image::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect rx='16' width='48' height='48' fill='%23556'/><g transform='translate(0,0)'><rect x='0' y='0' width='48' height='48' rx='3' fill='%23f5f6f7'/><path d='M6 34l9-8 12 16 10-12 10 10H6z' fill='%23B0B6Bc'/><circle cx='12' cy='14' r='5' fill='%239bb'/></g></svg>");
}

.fa-file-audio::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect rx='6' width='48' height='48' fill='%235AA0F3'/><rect x='12' y='12' width='20' height='20' rx='2' fill='%23fff'/><text x='24' y='46' font-size='16' font-family='Arial,Helvetica,sans-serif' fill='%23fff' text-anchor='middle'>音频</text><path d='M18 20l8 4-8 4V20z' fill='%232a2a2a'/></svg>");
}

.fa-file-video::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect rx='6' width='48' height='48' fill='%235AA0C3'/><rect x='12' y='12' width='20' height='20' rx='2' fill='%23fff'/><text x='24' y='46' font-size='16' font-family='Arial,Helvetica,sans-serif' fill='%23fff' text-anchor='middle'>视频</text><path d='M18 20l8 4-8 4V20z' fill='%232a2a2a'/></svg>");
}

.fa-file-lines::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect rx='6' width='48' height='48' fill='%239AA0AD'/><path d='M16 18h16M16 24h12M16 30h10' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/></svg>");
}

.fa-file-zipper::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect rx='6' width='48' height='48' fill='%238B6B3D'/><rect x='12' y='16' width='24' height='14' rx='2' fill='%23fff' opacity='0.12'/><path d='M18 20h12' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/></svg>");
}

.fa-file::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect rx='8' width='48' height='48' fill='%23A8A7A5'/><path d='M14 14h20v18H14z' fill='%23fff' opacity='0.06'/><text x='24' y='36' font-size='18' font-family='Arial,Helvetica,sans-serif' fill='%23fff' text-anchor='middle'>File</text></svg>");
}

/* Small utility to align icon-only anchors */
.file-icon {
  display: inline-flex;
  align-items: center
}