nui-media-grid { display: block; min-width: 0; color: var(--nui-text); font-family: var(--nui-font-sans); font-size: var(--nui-font-size-sm); }
.nui-media-grid { --nui-media-cell: 140px; min-width: 0; }
.nui-media-grid-sm { --nui-media-cell: 96px; }
.nui-media-grid-lg { --nui-media-cell: 200px; }
.nui-media-grid-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--nui-media-cell)), 1fr)); gap: 8px; min-width: 0; }
.nui-media-grid-card { position: relative; min-width: 0; padding: 3px; border: 1px solid transparent; border-radius: var(--nui-radius-sm); background: transparent; cursor: pointer; }
.nui-media-grid-card:hover { background: var(--nui-raised-hover); }
.nui-media-grid-card:focus-visible { outline: 2px solid var(--nui-ring); outline-offset: -2px; }
.nui-media-grid-card.is-selected { border-color: var(--nui-accent-border); background: var(--nui-accent-fill); color: var(--nui-accent-fg); }
.nui-media-grid-card.is-disabled { opacity: .48; cursor: default; }
.nui-media-grid-square { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; min-width: 0; border-radius: var(--nui-radius-sm); background: var(--nui-raised-hover); }
.nui-media-grid-square > img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }
.nui-media-grid-square.is-image-error > img { display: none; }
.nui-media-grid-image-error { display: none; padding: 8px; color: var(--nui-text-muted); font-size: var(--nui-font-size-xs); text-align: center; }
.nui-media-grid-square.is-image-error .nui-media-grid-image-error, .nui-media-grid-square.is-image-missing .nui-media-grid-image-error { display: block; }
.nui-media-grid-badges { position: absolute; top: 4px; left: 4px; display: flex; flex-wrap: wrap; gap: 3px; max-width: calc(100% - 42px); pointer-events: none; }
.nui-media-grid-controls { position: absolute; top: 4px; right: 4px; display: flex; align-items: flex-start; gap: 3px; }
.nui-media-grid-controls input { box-sizing: border-box; width: 22px; height: 22px; margin: 0; accent-color: var(--nui-accent); cursor: pointer; }
.nui-media-grid-controls input:disabled { cursor: default; }
.nui-media-grid-more { visibility: hidden; width: 26px; height: 26px; padding: 0; border: 1px solid var(--nui-border); border-radius: var(--nui-radius-sm); background: var(--nui-panel); color: var(--nui-text); cursor: pointer; font: inherit; font-size: 20px; line-height: 20px; pointer-events: none; }
.nui-media-grid-card:hover .nui-media-grid-more, .nui-media-grid-card:focus-within .nui-media-grid-more, .nui-media-grid-card.is-menu-open .nui-media-grid-more { visibility: visible; pointer-events: auto; }
.nui-media-grid-actions { position: absolute; z-index: 2; top: 34px; right: 4px; display: none; flex-direction: column; min-width: 110px; max-width: calc(100% - 8px); padding: 3px; border: 1px solid var(--nui-border); border-radius: var(--nui-radius-sm); background: var(--nui-panel); box-shadow: 0 4px 12px var(--nui-shadow); }
.nui-media-grid-card:hover .nui-media-grid-actions, .nui-media-grid-card:focus-within .nui-media-grid-actions, .nui-media-grid-card.is-menu-open .nui-media-grid-actions { display: flex; }
.nui-media-grid-actions button { min-height: 28px; border: 0; border-radius: var(--nui-radius-sm); background: transparent; color: var(--nui-text); cursor: pointer; text-align: left; }
.nui-media-grid-actions button:hover { background: var(--nui-raised-hover); }
.nui-media-grid-caption { display: -webkit-box; min-height: 2.6em; margin-top: 4px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; line-height: 1.3; }
.nui-media-grid-empty { margin: 0; padding: 18px 8px; color: var(--nui-text-muted); text-align: center; }
.nui-media-grid-skeleton { padding: 3px; }
.nui-media-grid-skeleton .nui-skeleton:first-child { display: block; width: 100%; aspect-ratio: 1; }
.nui-media-grid-skeleton .nui-skeleton:last-child { display: block; width: 75%; height: 13px; margin-top: 7px; }
@media (hover: none), (pointer: coarse) { .nui-media-grid-more { visibility: visible; min-width: 28px; min-height: 28px; pointer-events: auto; } .nui-media-grid-card:hover:not(.is-menu-open) .nui-media-grid-actions, .nui-media-grid-card:focus-within:not(.is-menu-open) .nui-media-grid-actions { display: none; } }
@media (max-width: 480px) { .nui-media-grid-items { gap: 5px; } .nui-media-grid-lg { --nui-media-cell: 140px; } }