.media-library-layout{grid-template-columns:minmax(280px,360px) minmax(0,1fr)}.media-filters{display:flex;flex-wrap:wrap;gap:10px}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,200px));gap:14px;justify-content:start;align-content:start}.media-card{display:grid;gap:8px;min-width:0;padding:10px;border:1px solid var(--border);border-radius:var(--control-radius)}.media-card img,.media-file-icon{width:100%;height:160px;border-radius:8px;background:rgba(0,0,0,.16);object-fit:cover}.media-file-icon{display:grid;place-items:center;font-size:22px;font-weight:800}.media-card strong,.media-card small{overflow-wrap:anywhere}.media-card small{color:var(--muted)}@media(max-width:800px){.media-library-layout{grid-template-columns:1fr}}

.media-library-picker { display: grid; gap: 12px; margin-top: 12px; }
.media-library-selection { display: flex; flex-wrap: wrap; gap: 8px; }
.media-library-selected-item { display: flex; align-items: center; gap: 8px; max-width: 220px; padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--control-radius); background: var(--surface-strong); font-size: .82rem; }
.media-library-selected-item img { width: 42px; height: 42px; flex: 0 0 42px; object-fit: cover; border-radius: 6px; }
.media-library-selected-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-library-modal[hidden] { display: none; }
.media-library-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; background: rgba(3, 8, 18, .72); }
.media-library-dialog { width: min(960px, 96vw); max-height: 88vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px; padding: clamp(18px, 3vw, 30px); overflow: hidden; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgba(0, 0, 0, .35); }
.media-library-dialog > header, .media-library-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.media-library-dialog > header h2, .media-library-dialog > header p { margin: 0; }
.media-library-dialog > footer { justify-content: flex-end; }
.media-library-close { width: 42px; min-width: 42px; height: 42px; margin: 0; padding: 0; border-radius: 50%; font-size: 28px; line-height: 1; }
.media-library-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 200px)); gap: 12px; min-height: 180px; align-content: start; justify-content: start; overflow: auto; padding: 2px; }
.media-library-picker-item { position: relative; display: grid; gap: 7px; margin: 0; padding: 8px; border: 2px solid transparent; border-radius: var(--control-radius); background: var(--surface-strong); cursor: pointer; }
.media-library-picker-item:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.media-library-picker-item input { position: absolute; top: 13px; left: 13px; width: auto; z-index: 1; }
.media-library-picker-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: calc(var(--control-radius) - 4px); }
.media-library-picker-item span { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
body.media-library-modal-open { overflow: hidden; }
.media-library-modal-host { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 560px) {
  .media-library-modal { padding: 10px; }
  .media-library-dialog { width: 100%; max-height: 94vh; }
  .media-library-dialog > footer { flex-wrap: wrap; }
  .media-library-dialog > footer button { flex: 1 1 auto; }
  .media-library-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}