.file-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: var(--files-card-thumb-height);
  overflow: hidden;
  border-radius: var(--files-radius-sm);
  isolation: isolate;
}

.file-thumb--image,
.file-thumb--video {
  background: var(--files-surface);
}

.file-thumb--image img,
.file-thumb--video video {
  display: block;
  width: 100%;
  height: auto;
  min-height: var(--files-card-thumb-height);
  max-height: 360px;
  object-fit: cover;
}

.file-card[data-thumbnail-layout="fixed"] .file-thumb {
  height: var(--files-thumb-height, var(--files-card-thumb-height));
  min-height: var(--files-thumb-height, var(--files-card-thumb-height));
}

.file-card[data-thumbnail-layout="fixed"] .file-thumb > :only-child:not(.folder-shape),
.file-card[data-thumbnail-layout="fixed"] .file-thumb > .file-icon-frame {
  height: 100%;
  min-height: 100%;
}

.file-card[data-thumbnail-layout="fixed"] .file-thumb > .file-icon-frame {
  aspect-ratio: auto;
}

.file-card[data-thumbnail-layout="aspect"] .file-thumb {
  aspect-ratio: var(--files-thumb-aspect, 4 / 3);
  min-height: var(--files-card-thumb-height);
  max-height: 460px;
}

.file-card[data-thumbnail-layout="aspect"] .file-thumb > img,
.file-card[data-thumbnail-layout="aspect"] .file-thumb > video,
.file-card[data-thumbnail-layout="aspect"] .file-thumb > .file-icon-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  object-position: center center;
}

.file-card[data-thumbnail-layout="aspect"] .file-thumb.file-thumb--image {
  align-self: start;
  aspect-ratio: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  border-radius: 0;
}

.file-card[data-thumbnail-layout="aspect"] .file-thumb.file-thumb--image > img {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
}

.file-card[data-thumbnail-layout="aspect"] .file-thumb--video > .file-icon-frame {
  aspect-ratio: auto;
  display: grid;
  place-items: center;
}

.file-thumb--video-live video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  filter: saturate(0.95) contrast(1.04) brightness(0.82);
}

.file-thumb--video-live::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(5, 7, 13, 0.68));
  pointer-events: none;
}

.folder-shape {
  position: relative;
  display: block;
  width: min(132px, calc(100% - 18px));
  aspect-ratio: 132 / 86;
  height: auto;
  border-radius: 11px 12px 14px 14px;
  background: var(--files-folder);
}

.folder-shape::before {
  content: "";
  position: absolute;
  top: -17%;
  bottom: auto;
  z-index: 0;
  left: 0;
  width: 47%;
  height: 33%;
  border-radius: 10px 10px 0 0;
  background: var(--files-folder);
}

.folder-shape::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: inherit;
  border-radius: inherit;
  pointer-events: none;
}

.file-card:hover .folder-shape,
.file-card.is-selected .folder-shape {
  background: var(--files-folder-selected);
}

.file-card:hover .folder-shape::before,
.file-card.is-selected .folder-shape::before {
  background: var(--files-folder-selected);
}

.file-icon-frame {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: var(--files-radius-md);
  background: linear-gradient(145deg, rgba(143, 157, 255, 0.13), rgba(255, 255, 255, 0.02)), var(--files-card);
  border: 0;
  box-shadow: var(--files-shadow-card);
}

.file-icon-frame--large {
  width: 112px;
  height: 112px;
}

.file-icon-frame .fiv-sqo {
  position: relative;
  font-size: 2.8rem;
  opacity: 0.98;
  mix-blend-mode: multiply;
  filter: grayscale(0.58) saturate(0.9) sepia(0.16) hue-rotate(188deg) brightness(1.16) contrast(1.06) drop-shadow(0 0 10px rgba(143, 157, 255, 0.16));
}

.file-thumb > .file-icon-frame {
  width: 100%;
  min-height: var(--files-card-thumb-height);
  aspect-ratio: 4 / 3;
  border-radius: var(--files-radius-sm);
}

.file-thumb > .file-icon-frame .fiv-sqo {
  font-size: 5.7rem;
}

.file-icon-frame--large .fiv-sqo {
  font-size: 4rem;
}

.file-thumb--audio,
.file-thumb--pdf,
.file-thumb--text,
.file-thumb--default {
  gap: 12px;
  background: var(--files-surface);
}

.file-thumb--office-live,
.file-thumb--archive-live,
.file-thumb--book-live,
.file-thumb--model-live,
.file-thumb--font-live,
.file-thumb--design-live,
.file-thumb--psd-live {
  place-items: stretch;
  background: var(--files-bg);
}

.audio-wave {
  display: flex;
  align-items: end;
  gap: 4px;
  height: 28px;
}

.audio-wave i {
  display: block;
  width: 5px;
  height: var(--level, 50%);
  border-radius: 999px;
  background: var(--files-accent);
}

.audio-wave i:nth-child(1) { --level: 42%; }
.audio-wave i:nth-child(2) { --level: 82%; }
.audio-wave i:nth-child(3) { --level: 58%; }
.audio-wave i:nth-child(4) { --level: 100%; }
.audio-wave i:nth-child(5) { --level: 52%; }

.file-thumb--snippet {
  align-content: stretch;
  justify-items: stretch;
  gap: 0;
  min-height: 168px;
  padding: 14px;
  background: var(--files-bg);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.file-thumb--snippet-html,
.file-thumb--snippet-json,
.file-thumb--snippet-css,
.file-thumb--snippet-xml {
  min-height: 198px;
}

.file-thumb--snippet-html {
  min-height: 240px;
}

.file-thumb--snippet-md {
  min-height: 210px;
}

.file-thumb--snippet-txt,
.file-thumb--snippet-js,
.file-thumb--snippet-cs,
.file-thumb--snippet-cshtml,
.file-thumb--snippet-config,
.file-thumb--snippet-yml,
.file-thumb--snippet-yaml {
  min-height: 194px;
}

.file-thumb--snippet-csv,
.file-thumb--snippet-tsv,
.file-thumb--snippet-log {
  min-height: 154px;
}

.file-thumb--snippet-kml,
.file-thumb--snippet-gpx,
.file-thumb--snippet-geojson {
  min-height: 176px;
  background:
    radial-gradient(circle at 82% 18%, rgba(126, 227, 255, 0.16), transparent 28%),
    linear-gradient(135deg, rgba(143, 157, 255, 0.1), transparent 42%),
    var(--files-bg);
}

.file-thumb--snippet-srt,
.file-thumb--snippet-vtt {
  min-height: 124px;
}

.file-card[data-extension="md"] .file-thumb--text {
  min-height: 210px;
}

.file-card[data-extension="txt"] .file-thumb--text,
.file-card[data-extension="js"] .file-thumb--text,
.file-card[data-extension="cs"] .file-thumb--text,
.file-card[data-extension="cshtml"] .file-thumb--text,
.file-card[data-extension="config"] .file-thumb--text,
.file-card[data-extension="yml"] .file-thumb--text,
.file-card[data-extension="yaml"] .file-thumb--text {
  min-height: 194px;
}

.file-card[data-extension="json"] .file-thumb--text,
.file-card[data-extension="css"] .file-thumb--text,
.file-card[data-extension="xml"] .file-thumb--text,
.file-card[data-extension="geojson"] .file-thumb--map {
  min-height: 198px;
}

.file-card[data-extension="html"] .file-thumb--text,
.file-card[data-extension="htm"] .file-thumb--text {
  min-height: 240px;
}

.file-card[data-extension="csv"] .file-thumb--text,
.file-card[data-extension="tsv"] .file-thumb--text,
.file-card[data-extension="log"] .file-thumb--text {
  min-height: 154px;
}

.file-card[data-extension="kml"] .file-thumb--map,
.file-card[data-extension="gpx"] .file-thumb--map {
  min-height: 176px;
}

.file-card[data-extension="srt"] .file-thumb--subtitle,
.file-card[data-extension="vtt"] .file-thumb--subtitle {
  min-height: 124px;
}

.file-card[data-extension="pdf"] .file-thumb--pdf {
  min-height: 258px;
}

.file-card[data-extension="docx"] .file-thumb--office {
  min-height: 226px;
}

.file-card[data-extension="xlsx"] .file-thumb--office {
  min-height: 152px;
}

.file-card[data-extension="pptx"] .file-thumb--office {
  min-height: 168px;
}

.file-card[data-extension="epub"] .file-thumb--epub {
  min-height: 238px;
}

.file-card[data-module="Audio"] .file-thumb--audio {
  min-height: 88px;
}

.file-card[data-module="Archive"] .file-thumb--archive {
  min-height: 158px;
}

.file-card[data-module="Model3D"] .file-thumb--model3d {
  min-height: 188px;
}

.file-card[data-module="Font"] .file-thumb--font {
  min-height: 148px;
}

.file-card[data-module="Design"] .file-thumb--design {
  min-height: 176px;
}

.file-card[data-extension="psd"] .file-thumb--default,
.file-card[data-extension="psb"] .file-thumb--default {
  min-height: 132px;
}

.file-card[data-extension="md"] .file-thumb--text > .file-icon-frame {
  min-height: 210px;
  height: 210px;
  aspect-ratio: auto;
}

.file-card[data-extension="txt"] .file-thumb--text > .file-icon-frame,
.file-card[data-extension="js"] .file-thumb--text > .file-icon-frame,
.file-card[data-extension="cs"] .file-thumb--text > .file-icon-frame,
.file-card[data-extension="cshtml"] .file-thumb--text > .file-icon-frame,
.file-card[data-extension="config"] .file-thumb--text > .file-icon-frame,
.file-card[data-extension="yml"] .file-thumb--text > .file-icon-frame,
.file-card[data-extension="yaml"] .file-thumb--text > .file-icon-frame {
  min-height: 194px;
  height: 194px;
  aspect-ratio: auto;
}

.file-card[data-extension="json"] .file-thumb--text > .file-icon-frame,
.file-card[data-extension="css"] .file-thumb--text > .file-icon-frame,
.file-card[data-extension="xml"] .file-thumb--text > .file-icon-frame,
.file-card[data-extension="geojson"] .file-thumb--map > .file-icon-frame {
  min-height: 198px;
  height: 198px;
  aspect-ratio: auto;
}

.file-card[data-extension="html"] .file-thumb--text > .file-icon-frame,
.file-card[data-extension="htm"] .file-thumb--text > .file-icon-frame {
  min-height: 240px;
  height: 240px;
  aspect-ratio: auto;
}

.file-card[data-extension="csv"] .file-thumb--text > .file-icon-frame,
.file-card[data-extension="tsv"] .file-thumb--text > .file-icon-frame,
.file-card[data-extension="log"] .file-thumb--text > .file-icon-frame {
  min-height: 154px;
  height: 154px;
  aspect-ratio: auto;
}

.file-card[data-extension="kml"] .file-thumb--map > .file-icon-frame,
.file-card[data-extension="gpx"] .file-thumb--map > .file-icon-frame {
  min-height: 176px;
  height: 176px;
  aspect-ratio: auto;
}

.file-card[data-extension="srt"] .file-thumb--subtitle > .file-icon-frame,
.file-card[data-extension="vtt"] .file-thumb--subtitle > .file-icon-frame {
  min-height: 124px;
  height: 124px;
  aspect-ratio: auto;
}

.file-card[data-extension="pdf"] .file-thumb--pdf > .file-icon-frame {
  min-height: 258px;
  height: 258px;
  aspect-ratio: auto;
}

.file-card[data-extension="docx"] .file-thumb--office > .file-icon-frame {
  min-height: 226px;
  height: 226px;
  aspect-ratio: auto;
}

.file-card[data-extension="xlsx"] .file-thumb--office > .file-icon-frame {
  min-height: 152px;
  height: 152px;
  aspect-ratio: auto;
}

.file-card[data-extension="pptx"] .file-thumb--office > .file-icon-frame {
  min-height: 168px;
  height: 168px;
  aspect-ratio: auto;
}

.file-card[data-extension="epub"] .file-thumb--epub > .file-icon-frame {
  min-height: 238px;
  height: 238px;
  aspect-ratio: auto;
}

.file-card[data-module="Audio"] .file-thumb--audio {
  gap: 0;
}

.file-card[data-module="Audio"] .file-thumb--audio > .file-icon-frame {
  min-height: 88px;
  height: 88px;
  aspect-ratio: auto;
}

.file-card[data-module="Audio"] .file-thumb--audio > .file-icon-frame .fiv-sqo {
  font-size: 3.2rem;
}

.file-card[data-module="Audio"] .file-thumb--audio .audio-wave {
  display: none;
}

.file-card[data-extension="zip"] .file-thumb--archive > .file-icon-frame {
  min-height: 158px;
  height: 158px;
  aspect-ratio: auto;
}

.file-card[data-extension="7z"] .file-thumb--archive,
.file-card[data-extension="rar"] .file-thumb--archive {
  min-height: 150px;
}

.file-card[data-extension="7z"] .file-thumb--archive > .file-icon-frame,
.file-card[data-extension="rar"] .file-thumb--archive > .file-icon-frame {
  min-height: 150px;
  height: 150px;
  aspect-ratio: auto;
}

.file-card[data-module="Model3D"] .file-thumb--model3d > .file-icon-frame {
  min-height: 188px;
  height: 188px;
  aspect-ratio: auto;
}

.file-card[data-module="Font"] .file-thumb--font > .file-icon-frame {
  min-height: 148px;
  height: 148px;
  aspect-ratio: auto;
}

.file-card[data-module="Design"] .file-thumb--design > .file-icon-frame {
  min-height: 176px;
  height: 176px;
  aspect-ratio: auto;
}

.file-card[data-extension="psd"] .file-thumb--default > .file-icon-frame,
.file-card[data-extension="psb"] .file-thumb--default > .file-icon-frame {
  min-height: 132px;
  height: 132px;
  aspect-ratio: auto;
}

.file-thumb--html-preview,
.file-thumb--data-grid,
.file-thumb--json-preview,
.file-thumb--css-preview,
.file-thumb--log-preview,
.file-thumb--markdown-preview,
.file-thumb--code-preview,
.file-thumb--note-preview,
.file-thumb--map-preview,
.file-thumb--subtitle-preview {
  place-items: stretch;
  background: var(--files-bg);
}

.file-thumb--code-preview {
  background: var(--thumb-code-bg, var(--files-bg));
  user-select: none;
}

.file-thumb--code-preview * {
  pointer-events: none;
  user-select: none;
}

.thumb-html,
.thumb-data-grid,
.thumb-json,
.thumb-css,
.thumb-log,
.thumb-markdown,
.thumb-code,
.thumb-note,
.thumb-map-preview,
.thumb-subtitle-preview {
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  color: var(--files-text);
  background: var(--files-card);
  border-radius: var(--files-radius-sm);
}

.thumb-html {
  min-height: 240px;
  grid-template-rows: minmax(0, 1fr);
  background: var(--files-bg);
  user-select: none;
}

.thumb-html__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 9px 10px;
  background: var(--files-card);
}

.thumb-html__bar span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(237, 242, 255, 0.34);
}

.thumb-html__bar b {
  min-width: 0;
  margin-left: 4px;
  overflow: hidden;
  color: var(--files-text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumb-html__frame {
  width: 100%;
  height: 100%;
  min-height: 240px;
  border: 0;
  pointer-events: none;
  user-select: none;
}

.thumb-data-grid {
  min-height: 154px;
  gap: 10px;
  justify-items: stretch;
  padding: 14px;
  background: linear-gradient(145deg, rgba(60, 214, 167, 0.13), transparent 48%), var(--files-card);
}

.thumb-data-grid table {
  width: 100%;
  max-width: none;
  border-collapse: collapse;
  table-layout: fixed;
}

.thumb-data-grid th,
.thumb-data-grid td {
  overflow: hidden;
  padding: 5px 6px;
  color: var(--files-text-muted);
  border: 1px solid rgba(237, 242, 255, 0.1);
  font-size: 0.64rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumb-data-grid th {
  color: var(--files-text);
  background: rgba(60, 214, 167, 0.12);
}

.thumb-json {
  min-height: 198px;
  gap: 4px;
  padding: 11px 12px;
  background: linear-gradient(145deg, rgba(143, 157, 255, 0.16), transparent 45%), var(--files-card);
}

.file-thumb--geojson-preview .thumb-json {
  background:
    radial-gradient(circle at 82% 18%, rgba(126, 227, 255, 0.16), transparent 28%),
    linear-gradient(145deg, rgba(143, 157, 255, 0.16), transparent 45%),
    var(--files-card);
}

.thumb-json p,
.thumb-log p,
.thumb-markdown p,
.thumb-note p,
.thumb-map-preview p,
.thumb-subtitle-preview p {
  display: grid;
  grid-template-columns: minmax(34px, auto) minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  min-width: 0;
  color: var(--files-text-muted);
  font-size: 0.66rem;
  line-height: 1.12;
}

.thumb-json__row {
  padding: 2px 0;
  border-bottom: 1px solid rgba(237, 242, 255, 0.07);
}

.thumb-json__row:last-child {
  border-bottom: 0;
}

.thumb-json b,
.thumb-log b {
  overflow: hidden;
  color: var(--files-text);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumb-json b {
  color: var(--files-accent);
  font-family: var(--files-font-mono);
  font-size: 0.64rem;
}

.thumb-json i,
.thumb-log i {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumb-css {
  min-height: 198px;
  padding: 12px;
  background: linear-gradient(145deg, rgba(126, 227, 255, 0.12), transparent 46%), var(--files-bg);
  border: 1px solid rgba(126, 227, 255, 0.08);
}

.thumb-log {
  min-height: 154px;
  gap: 4px;
  padding: 11px 12px;
  background: linear-gradient(145deg, rgba(255, 111, 125, 0.1), transparent 44%), var(--files-card);
}

.thumb-log__line--error b { color: var(--files-danger); }
.thumb-log__line--warn b { color: var(--files-warning); }
.thumb-log__line--debug b { color: var(--files-text-muted); }
.thumb-log__line--info b { color: var(--files-success); }

.thumb-markdown {
  min-height: 100%;
  max-height: 276px;
  gap: 5px;
  padding: 13px 14px;
  background:
    radial-gradient(circle at 100% 0, rgba(126, 227, 255, 0.12), transparent 32%),
    linear-gradient(145deg, rgba(143, 157, 255, 0.14), transparent 42%),
    var(--files-card);
}

.thumb-markdown__accent {
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: var(--files-accent);
}

.thumb-markdown h3,
.thumb-document h3 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--files-text);
  font-size: 0.92rem;
  line-height: 1.08;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.thumb-markdown p,
.thumb-note p,
.thumb-subtitle-preview p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumb-markdown__rows {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.thumb-markdown .thumb-markdown__row {
  position: relative;
  margin: 0;
  padding-left: 0;
  color: var(--files-text-muted);
  font-size: 0.68rem;
  line-height: 1.16;
}

.thumb-markdown__row--bullet {
  padding-left: 12px !important;
}

.thumb-markdown__row--bullet::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.43em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--files-accent);
}

.thumb-markdown__row--heading {
  color: var(--files-text) !important;
  font-weight: 650;
}

.thumb-markdown__row--quote {
  padding-left: 9px !important;
  border-left: 2px solid rgba(143, 157, 255, 0.45);
}

.thumb-markdown__row--code {
  padding: 3px 6px !important;
  color: rgba(237, 242, 255, 0.78) !important;
  background: rgba(5, 7, 13, 0.42);
  border-radius: 6px;
  font-family: var(--files-font-mono);
  font-size: 0.62rem !important;
}

.thumb-code {
  min-height: 214px;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 0;
  color: var(--thumb-code-fg, var(--files-text));
  background: var(--thumb-code-bg, var(--files-bg));
  border: 1px solid rgba(143, 157, 255, 0.1);
  pointer-events: none;
  user-select: none;
}

.thumb-code__lines {
  display: grid;
  align-content: start;
  gap: 0;
  margin: 0;
  min-width: 0;
  padding: 8px 9px 7px;
  overflow: hidden;
  color: var(--thumb-code-fg, var(--files-text-muted));
  background:
    linear-gradient(90deg, var(--thumb-code-gutter, transparent) 0, var(--thumb-code-gutter, transparent) 4.35ch, transparent 4.35ch),
    var(--thumb-code-bg, var(--files-bg));
  font-family: var(--files-font-mono);
  font-size: clamp(0.46rem, 0.58vw, 0.56rem);
  line-height: 1.08;
  list-style: none;
}

.thumb-code__lines li {
  display: grid;
  grid-template-columns: 2.6ch minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
  text-align: left;
}

.thumb-code__lines b {
  justify-self: start;
  color: var(--thumb-code-line, rgba(237, 242, 255, 0.38));
  font-weight: 600;
  text-align: left;
}

.thumb-code__lines code {
  display: block;
  overflow: hidden;
  color: var(--thumb-code-fg, #eaf0ff);
  text-overflow: ellipsis;
  white-space: pre;
  text-align: left;
}

.thumb-code__status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 24px;
  padding: 0 10px;
  color: var(--thumb-code-status-fg, var(--thumb-code-fg, var(--files-text)));
  background: var(--thumb-code-status-bg, var(--thumb-code-gutter, var(--thumb-code-bg, var(--files-bg))));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--files-font-mono);
  font-size: clamp(0.58rem, 0.72vw, 0.68rem);
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

.thumb-note {
  --thumb-note-line: 23px;
  min-height: 194px;
  align-content: start;
  gap: 0;
  padding: 12px 13px 13px 15px;
  color: #2d2a27;
  background:
    linear-gradient(180deg, transparent 21px, rgba(148, 130, 104, 0.2) 22px, transparent 23px) 0 8px / 100% var(--thumb-note-line),
    linear-gradient(90deg, rgba(148, 130, 104, 0.16), transparent 1px) 22px 0 / 1px 100%,
    linear-gradient(145deg, #f0ede4, #ded8cb);
  border: 1px solid rgba(255, 255, 255, 0.36);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(96, 82, 63, 0.12);
}

.thumb-note__rows {
  display: grid;
  gap: 0;
  min-width: 0;
}

.thumb-note .thumb-note__row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: var(--thumb-note-line);
  margin: 0;
  padding: 0;
}

.thumb-note__row b {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: #4c473f;
  border: 1px solid rgba(76, 71, 63, 0.28);
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 750;
  line-height: 1;
}

.thumb-note__row span,
.thumb-note__empty {
  overflow: hidden;
  color: #2f2a25;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: var(--thumb-note-line);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumb-note__row--bullet b {
  justify-self: center;
  width: 5px;
  height: 5px;
  color: transparent;
  background: #4c473f;
  border: 0;
}

.thumb-note .thumb-note__row--plain {
  display: block;
}

.thumb-note__row--plain b {
  display: none;
}

.thumb-note .thumb-note__row--plain span {
  display: block;
}

.thumb-note--prose .thumb-note__rows {
  display: block;
}

.thumb-note--prose .thumb-note__row {
  display: block;
  min-height: var(--thumb-note-line);
  padding: 0;
}

.thumb-note--prose .thumb-note__row b {
  display: none;
}

.thumb-note--prose .thumb-note__row span {
  display: -webkit-box;
  overflow: hidden;
  color: #302b25;
  font-size: 0.75rem;
  line-height: var(--thumb-note-line);
  white-space: normal;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.thumb-note__row--todo b,
.thumb-note__row--checked b {
  color: transparent;
}

.thumb-note__row--checked b::after {
  content: "";
  width: 8px;
  height: 4px;
  border-bottom: 2px solid #4c473f;
  border-left: 2px solid #4c473f;
  transform: rotate(-45deg) translateY(-1px);
}

.thumb-note__empty {
  margin: 0;
}

.thumb-map-preview {
  min-height: 176px;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px;
  background:
    radial-gradient(circle at 78% 18%, rgba(126, 227, 255, 0.18), transparent 24%),
    linear-gradient(145deg, rgba(143, 157, 255, 0.12), transparent 50%),
    var(--files-card);
}

.thumb-map-preview__map {
  width: 100%;
  min-height: 92px;
  background:
    linear-gradient(135deg, rgba(126, 227, 255, 0.08), transparent 58%),
    rgba(5, 7, 13, 0.42);
  border: 1px solid rgba(126, 227, 255, 0.13);
  border-radius: 9px;
}

.thumb-map-preview__grid {
  fill: none;
  stroke: rgba(237, 242, 255, 0.08);
  stroke-width: 1;
}

.thumb-map-preview__path {
  fill: none;
  stroke: var(--files-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.4;
}

.thumb-map-preview__map circle {
  fill: #7ee3ff;
  stroke: rgba(5, 7, 13, 0.72);
  stroke-width: 1.2;
}

.thumb-map-preview__info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.thumb-map-preview__info p {
  display: block;
  overflow: hidden;
  font-size: 0.64rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumb-map-preview h3 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--files-text);
  font-size: 0.92rem;
  line-height: 1.16;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.thumb-subtitle-preview {
  min-height: 124px;
  gap: 6px;
  padding: 12px;
  background:
    radial-gradient(circle at 10% 0, rgba(126, 227, 255, 0.12), transparent 28%),
    linear-gradient(145deg, rgba(237, 242, 255, 0.08), transparent 42%),
    var(--files-card);
}

.thumb-subtitle-preview__cue {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  background: rgba(5, 7, 13, 0.38);
  border: 1px solid rgba(237, 242, 255, 0.06);
  border-radius: 8px;
}

.thumb-subtitle-preview__time {
  display: inline-grid;
  place-items: center;
  min-height: 18px;
  color: rgba(237, 242, 255, 0.62);
  background: rgba(237, 242, 255, 0.07);
  border-radius: 5px;
  font-family: var(--files-font-mono);
  font-size: 0.58rem;
  line-height: 1;
}

.thumb-subtitle-preview__text,
.thumb-subtitle-preview__empty {
  display: -webkit-box !important;
  margin: 0;
  overflow: hidden;
  color: var(--files-text);
  font-size: 0.68rem;
  line-height: 1.22;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.thumb-snippet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  color: var(--files-accent);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.thumb-snippet__header i {
  flex: 1;
  height: 1px;
  background: var(--files-border);
}

.file-thumb--snippet pre {
  margin: 10px 0 0;
  overflow: hidden;
  color: var(--files-text-muted);
  font-family: var(--files-font-mono);
  font-size: 0.74rem;
  line-height: 1.5;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.file-thumb--snippet-srt pre,
.file-thumb--snippet-vtt pre {
  -webkit-line-clamp: 3;
}

.file-thumb--pdf-live {
  min-height: 258px;
  padding: 6px;
  background:
    radial-gradient(circle at 50% 15%, rgba(240, 108, 139, 0.15), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 48%),
    var(--files-bg);
}

.thumb-pdf-page {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: none;
}

.thumb-pdf-page canvas {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.28);
}

.thumb-pdf-page span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 6px;
  color: #111827;
  background: rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}

.thumb-document,
.thumb-sheet,
.thumb-slides,
.thumb-archive-list,
.thumb-stack,
.thumb-book,
.thumb-model,
.thumb-design,
.thumb-psd {
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  min-height: 126px;
  padding: 16px;
  color: var(--files-text);
  background: var(--files-card);
  border-radius: var(--files-radius-sm);
  box-shadow: var(--files-shadow-card);
}

.thumb-document--docx {
  align-content: start;
  min-height: 226px;
  padding: 18px 18px 22px;
  background: linear-gradient(145deg, rgba(93, 140, 255, 0.14), transparent 42%), var(--files-card);
}

.thumb-document p,
.thumb-slides p,
.thumb-archive-list p,
.thumb-book p {
  display: -webkit-box;
  margin: 8px 0 0;
  overflow: hidden;
  color: var(--files-text-muted);
  font-size: 0.72rem;
  line-height: 1.28;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.thumb-sheet {
  gap: 10px;
  min-height: 152px;
  padding: 14px;
  background: linear-gradient(145deg, rgba(60, 214, 167, 0.12), transparent 45%), var(--files-card);
}

.thumb-sheet table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.thumb-sheet td {
  overflow: hidden;
  padding: 5px 6px;
  color: var(--files-text-muted);
  border: 1px solid rgba(237, 242, 255, 0.1);
  font-size: 0.66rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumb-sheet tr:first-child td {
  color: var(--files-text);
  background: rgba(60, 214, 167, 0.12);
}

.thumb-slides {
  align-content: start;
  min-height: 168px;
  gap: 8px;
  padding-bottom: 24px;
  aspect-ratio: 16 / 11;
  background: linear-gradient(145deg, rgba(240, 108, 139, 0.15), transparent 45%), var(--files-card);
}

.thumb-slides::after {
  content: "";
  position: absolute;
  inset: auto 16px 16px;
  height: 3px;
  border-radius: 999px;
  background: rgba(237, 242, 255, 0.18);
}

.thumb-archive-list {
  align-content: start;
  min-height: 158px;
  background: linear-gradient(145deg, rgba(244, 184, 75, 0.15), transparent 45%), var(--files-card);
}

.thumb-archive-list p {
  -webkit-line-clamp: 1;
}

.thumb-document i,
.thumb-book i {
  display: block;
  height: 5px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(237, 242, 255, 0.18);
}

.thumb-document i:nth-child(3),
.thumb-book i:nth-child(3) { width: 82%; }
.thumb-document i:nth-child(4),
.thumb-book i:nth-child(4) { width: 66%; }
.thumb-document i:nth-child(5),
.thumb-book i:nth-child(5) { width: 90%; }

.thumb-stack i {
  position: absolute;
  inset: auto 12px 16px;
  height: 22px;
  border-radius: 6px;
  background: rgba(93, 140, 255, 0.22);
}

.thumb-stack i:nth-child(2) { bottom: 46px; }
.thumb-stack i:nth-child(3) { bottom: 34px; opacity: 0.8; }
.thumb-stack i:nth-child(4) { bottom: 22px; opacity: 0.65; }

.thumb-stack {
  min-height: 150px;
}

.thumb-book {
  align-content: start;
  min-height: 238px;
  padding-left: 22px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 14px, transparent 14px),
    linear-gradient(145deg, rgba(143, 157, 255, 0.18), transparent 44%),
    var(--files-card);
}

.thumb-model {
  min-height: 178px;
  place-items: center;
  background: radial-gradient(circle at 50% 30%, rgba(93, 140, 255, 0.28), transparent 38%), var(--files-card);
}

.thumb-model-stage {
  width: 100%;
  min-height: 188px;
  background: radial-gradient(circle at 50% 35%, rgba(93, 140, 255, 0.22), transparent 36%), var(--files-bg);
}

.thumb-model-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.thumb-model i {
  position: absolute;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(93, 140, 255, 0.48);
  transform: rotateX(58deg) rotateZ(45deg);
}

.thumb-model i:nth-child(2) { transform: rotateX(58deg) rotateZ(45deg) translate(12px, -12px); opacity: 0.6; }
.thumb-model i:nth-child(3) { transform: rotateX(58deg) rotateZ(45deg) translate(-12px, 12px); opacity: 0.35; }

.thumb-font {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 148px;
  background: linear-gradient(145deg, rgba(237, 242, 255, 0.08), transparent 42%), var(--files-card);
  border-radius: var(--files-radius-sm);
  color: var(--files-text);
  font-size: 4.4rem;
  line-height: 1;
}

.file-thumb--bookmark {
  place-items: stretch;
  background: radial-gradient(circle at 24% 18%, rgba(126, 227, 255, 0.24), transparent 34%), var(--files-card);
}

.thumb-bookmark {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 126px;
  padding: 18px;
  color: var(--files-text);
}

.thumb-bookmark__favicon,
.bookmark-viewer__favicon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--files-accent);
  background: var(--files-bg);
  border-radius: 16px;
  box-shadow: var(--files-shadow-card);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.thumb-bookmark__favicon img,
.bookmark-viewer__favicon img {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}

.thumb-bookmark__host {
  max-width: 100%;
  overflow: hidden;
  color: var(--files-text-muted);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-thumb--audio-live {
  place-items: stretch;
  min-height: 88px;
  background: var(--files-bg);
}

.thumb-audio {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: end;
  gap: 5px;
  width: 100%;
  min-height: 88px;
  padding: 34px 14px 12px;
  color: var(--files-text);
  background:
    radial-gradient(circle at 22% 16%, rgba(93, 140, 255, 0.34), transparent 34%),
    linear-gradient(135deg, rgba(126, 227, 255, 0.1), transparent 42%),
    var(--files-card);
  border-radius: var(--files-radius-sm);
  box-shadow: var(--files-shadow-card);
}

.thumb-audio b {
  position: absolute;
  top: 14px;
  z-index: 1;
  color: var(--files-accent);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.thumb-audio b {
  right: 14px;
  font-weight: 600;
}

.thumb-audio i {
  display: block;
  width: 100%;
  min-height: 10px;
  border-radius: 999px 999px 3px 3px;
  background: linear-gradient(180deg, var(--files-accent), rgba(93, 140, 255, 0.24));
}

.thumb-audio i:nth-of-type(1) { height: 28%; }
.thumb-audio i:nth-of-type(2) { height: 72%; }
.thumb-audio i:nth-of-type(3) { height: 46%; }
.thumb-audio i:nth-of-type(4) { height: 88%; }
.thumb-audio i:nth-of-type(5) { height: 58%; }
.thumb-audio i:nth-of-type(6) { height: 78%; }
.thumb-audio i:nth-of-type(7) { height: 36%; }
.thumb-audio i:nth-of-type(8) { height: 62%; }

.thumb-design {
  min-height: 176px;
  align-content: space-between;
  background: conic-gradient(from 180deg at 50% 50%, rgba(93, 140, 255, 0.24), transparent 30%, rgba(240, 108, 139, 0.22), transparent 72%), var(--files-card);
}

.thumb-psd {
  min-height: 132px;
  padding: 10px;
  place-items: center;
  background:
    linear-gradient(45deg, rgba(237, 242, 255, 0.06) 25%, transparent 25% 75%, rgba(237, 242, 255, 0.06) 75%) 0 0 / 24px 24px,
    linear-gradient(45deg, rgba(237, 242, 255, 0.06) 25%, transparent 25% 75%, rgba(237, 242, 255, 0.06) 75%) 12px 12px / 24px 24px,
    var(--files-card);
}

.thumb-psd canvas {
  display: block;
  max-width: 100%;
  max-height: 112px;
  object-fit: contain;
  border-radius: 4px;
}

.thumb-design i {
  align-self: end;
  width: 100%;
  height: 48px;
  border: 1px solid rgba(237, 242, 255, 0.18);
  border-radius: 10px;
}

.fiv-sqo::before {
  text-shadow: none;
}