/* ══════════════════════════════════════════════
   Gallery-only rules, built on the hub's tokens.
   Nothing here introduces a colour of its own.
   ══════════════════════════════════════════════ */

.notice {
  background: color-mix(in srgb, var(--warn) 10%, var(--chrome-bg-deep));
  border-bottom: 1px solid var(--chrome-border);
  color: var(--chrome-text-dim);
  font-size: 11.5px;
  padding: 9px 14px;
}
.notice b { color: var(--warn); font-weight: 600; }
.notice i { color: var(--chrome-text); font-style: normal; }
.notice-inner { max-width: 1180px; margin: 0 auto; }

.count { font-variant-numeric: tabular-nums; color: var(--chrome-text-faint); font-size: 11px; }

.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.theme {
  background: var(--chrome-bg);
  border: 1px solid var(--chrome-border);
  display: flex;
  flex-direction: column;
}
.theme:hover { border-color: var(--chrome-border-light); }
.thumb { background: var(--chrome-bg-deep); aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--chrome-border); }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; filter: saturate(.96); }
.theme:hover .thumb img { filter: none; }
.theme-body { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.name { color: var(--chrome-text-bright); font-size: 13px; font-weight: 600; word-break: break-word; }
.meta { color: var(--chrome-text-dim); font-size: 11.5px; flex: 1; }
.meta .author { color: var(--accent); }
.links { display: flex; gap: 8px; flex-wrap: wrap; }
.btn {
  border: 1px solid var(--chrome-border-light);
  color: var(--chrome-text-bright);
  padding: 5px 9px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.btn:hover { background: var(--chrome-panel-hover); border-color: var(--chrome-text-faint); text-decoration: none; }
.btn.dl { background: var(--accent); border-color: var(--accent); color: var(--chrome-bg-deep); font-weight: 600; }
.btn.dl:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.empty { color: var(--chrome-text-dim); padding: 40px 14px; text-align: center; grid-column: 1 / -1; }

h1 em { font-style: normal; color: var(--accent); }