.preview-dialog {
  width: min(1100px, 96vw);
  height: min(850px, 92vh);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .52);
}

.preview-dialog::backdrop {
  background: rgba(0, 0, 0, .74);
  backdrop-filter: blur(3px);
}

.preview-head,
.preview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.preview-head button {
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 1.6rem;
  padding: .1rem .5rem;
}

.preview-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.preview-content,
.preview-surface {
  display: grid;
  place-items: center;
  min-height: 260px;
  background: #0b0c0d;
}
html[data-theme="light"] .preview-content,
html[data-theme="light"] .preview-surface { background: #e4e1db; }

.preview-content { height: calc(100% - 130px); }
.preview-content img, .preview-surface img { max-width: 100%; max-height: 75vh; object-fit: contain; }
.preview-content audio, .preview-surface audio { width: min(720px, 90%); }
.preview-content iframe, .preview-surface iframe { width: 100%; height: 100%; min-height: 70vh; border: 0; background: white; }
.text-preview {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 70vh;
  margin: 0;
  padding: 1.25rem;
  overflow: auto;
  background: #090a0b;
  color: #f4f2ed;
  font: 15px/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 4;
}
html[data-theme="light"] .text-preview {
  background: #fffef8;
  color: #171717;
}
.preview-page .preview-surface { margin-top: 1.5rem; border: 1px solid var(--line); border-radius: .75rem; overflow: hidden; }

.pc-add { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); scroll-margin-top: 6rem; }
.pc-add h2 { margin-top: .25rem; }

.view-toggle {
  display: inline-flex;
  gap: .25rem;
  padding: .2rem;
  border: 1px solid var(--line);
  border-radius: .65rem;
  background: var(--surface-muted);
}

.view-toggle button {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: .48rem .7rem;
}

.view-toggle button.active {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.entry, .entry-visual { min-width: 0; }
.entry { cursor: pointer; }
.entry-visual { display: flex; align-items: center; gap: .85rem; }

.thumb-shell {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .6rem;
  background: var(--surface-muted);
  color: var(--muted);
}

.thumb-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #1b1c1e 20%, #292a2d 40%, #1b1c1e 60%);
  background-size: 220% 100%;
  animation: thumbnail-skeleton 1.2s linear infinite;
}

.thumb-shell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .2s ease; }
.thumb-shell.loaded img { opacity: 1; }
.thumb-shell.loaded::after, .thumb-shell.failed::after { display: none; }
.thumb-shell.failed img { display: none; }
.thumb-fallback { font-weight: 750; letter-spacing: .1em; }
.file-icon { display: grid; place-items: center; flex: 0 0 auto; filter: grayscale(1); opacity: .72; }

.file-list.view-list { display: grid; border-top: 1px solid var(--line); }
.file-list.view-list .thumb-shell, .file-list.view-list .file-icon { width: 64px; height: 64px; font-size: 2rem; }

.file-list.view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  border-top: 0;
}

.file-list.view-grid > div,
.file-list.view-grid > a {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: .9rem;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.file-list.view-grid > div:hover,
.file-list.view-grid > a:hover {
  border-color: var(--line-strong);
  background: #191a1b;
}

.file-list.view-grid .entry-visual { flex-direction: column; align-items: stretch; }
.file-list.view-grid .thumb-shell { width: 200px; height: 200px; max-width: 100%; margin-inline: auto; }
.file-list.view-grid .file-icon { width: 100%; height: 200px; font-size: 4.5rem; }
.file-list.view-grid .row-actions { margin-top: auto; }
.preview-head > span { display: inline-flex; gap: .35rem; }

@keyframes thumbnail-skeleton { to { background-position: -220% 0; } }

@media (max-width: 600px) {
  .preview-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; }
  .preview-content { height: calc(100% - 122px); }
  .preview-head, .preview-actions { padding: .65rem .75rem; }
  .preview-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .text-preview { min-height: 65dvh; padding: .85rem; font-size: 13px; line-height: 1.5; }
  .preview-page .preview-surface { min-width: 0; }
}

@media (max-width: 520px) {
  .file-list.view-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .file-list.view-grid > div, .file-list.view-grid > a { width: 100%; padding: .75rem; }
  .file-list.view-grid .thumb-shell, .file-list.view-grid .file-icon { width: min(100%, 260px); height: auto; aspect-ratio: 1; margin-inline: auto; }
  .file-list.view-grid .share-entry-download { width: 100%; margin: 0; }
}