/* 媒體庫 (media-library.js, redesign stage 3): the workspace library as a grid of tiles, each picture with where it came
   from and the posts that use it. Only the desk's tokens (app.css :root, theme.css dark) are used; .card and .tag
   already carry their dark rules. */
.media-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; }
.media-search { flex: 1 1 240px; min-width: 0; }
.media-count { margin: 0; }
.media-status { margin: 0; }
.media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;
  margin: 0; padding: 0; list-style: none;
}
.media-tile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; min-width: 0; padding: 10px; }
.media-open { display: block; width: 100%; padding: 0; border: 0; border-radius: calc(var(--radius) - 8px); background: var(--canvas); overflow: hidden; cursor: zoom-in; }
/* contain, not the shared .thumb-open cover: a square or wide picture shows whole (its edges carry text, e.g. a generated
   title), letterboxed on the tile's canvas. */
.media-open .media-thumb { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; background: transparent; }
.media-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.media-origin-generated { border-color: var(--blue); color: var(--blue-dark); }
/* A long post title stays inside the tile: one line with an ellipsis, the full title in the link's title attribute. */
.media-usage, .media-usage-slot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; margin: 0; font-size: 14px; }
.media-posts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.media-posts > li { min-width: 0; }
.media-post { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme="dark"] .media-open { background: var(--theme-soft); }