.grid { --row-h: 220px; display: flex; flex-wrap: wrap; gap: 14px 8px; padding: 12px 12px 64px; align-items: flex-start; user-select: none; -webkit-user-select: none; }
.grid::after { content: ""; flex-grow: 1e4; }
@media (max-width: 600px) { .grid { --row-h: 140px; gap: 10px 4px; padding: 8px 6px 64px; } }

.card { flex: var(--ar, 1.333) 1 calc(var(--ar, 1.333) * var(--row-h)); min-width: 0; display: flex; flex-direction: column; }
.thumb { display: block; width: 100%; padding: 0; border: 0; background: var(--color-bg-secondary); border-radius: var(--radius); cursor: pointer; overflow: hidden; font: inherit; color: inherit; text-align: left; }
.thumb:disabled { cursor: default; color: inherit; }
.thumb img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 1.333); object-fit: cover; }
.card.selected .thumb { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.card.local .thumb img { opacity: 0.6; }
.tile { aspect-ratio: 4 / 3; width: 100%; padding: 12px; display: flex; flex-direction: column; gap: 4px; justify-content: center; overflow: hidden; }
.tile span { overflow: hidden; text-overflow: ellipsis; display: block; }
.tile-domain { font-weight: 600; }
.tile-none { color: var(--color-text-secondary); font-size: var(--font-sm); }
.tile.big { aspect-ratio: auto; min-height: 200px; white-space: pre-line; align-items: center; text-align: center; }
.cap { height: 20px; line-height: 20px; padding-top: 2px; font-size: var(--font-sm); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--font-sm); color: var(--color-text); min-height: 20px; }
.stat-text { margin-right: 4px; }
.card.placeholder { opacity: 0.35; }
.ghost { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; opacity: 0.9; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); border-radius: var(--radius); }
body.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.dragging * { cursor: grabbing !important; }

.drop { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-bg) 85%, transparent); font-size: 20px; font-weight: 600; pointer-events: none; }

dialog.inspector { width: min(1100px, 100vw); max-width: 100vw; height: min(90vh, 900px); max-height: 100dvh; overflow: hidden; }
dialog.inspector[open] { display: flex; flex-direction: column; }
.insp-bar { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-bottom: 1px solid var(--color-border); }
.insp-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); flex: 1; min-height: 0; }
.insp-media { display: flex; align-items: center; justify-content: center; padding: 12px; min-height: 0; background: var(--color-bg-secondary); }
img.big { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius); }
.insp-info { padding: 12px 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.f-title-text { font-size: 18px; }
.source-url { user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; font-size: var(--font-sm); }
.labels { display: flex; flex-direction: column; gap: 2px; font-size: var(--font-sm); color: var(--color-text-secondary); }
.insp-info .muted { font-size: var(--font-sm); overflow-wrap: anywhere; }
.insp-info .field { gap: 6px; align-items: flex-start; }
@media (max-width: 700px) {
  dialog.inspector { height: 100dvh; width: 100vw; border-radius: 0; border: 0; }
  .insp-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; display: block; }
  .insp-media { max-height: 50vh; }
  img.big { max-height: 46vh; }
  .insp-info { overflow: visible; }
}