/* Galeria de criativos: mesmos tons da Central (claro e escuro). */
:root {
  --bg: #f6f7f9; --surface: #ffffff; --ink: #0f1729; --muted: #5b6475; --line: #e4e7ec;
  --accent: #1a66ff; --accent-2: #1447e6; --aviso-bg: #fff6e5; --aviso-ink: #7a4b00;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0d1117; --surface: #161b22; --ink: #e6e9ef; --muted: #9aa3b2; --line: #2a313c; --aviso-bg: #2b2210; --aviso-ink: #f3c46b; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/20px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.topo { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; padding: 20px 24px 12px; }
h1 { margin: 0 0 4px; font-size: 20px; line-height: 28px; font-weight: 600; }
.fraco { color: var(--muted); margin: 0; }
#filtro { flex: 0 1 320px; min-width: 200px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
main { padding: 8px 24px 48px; }
.aviso { background: var(--aviso-bg); color: var(--aviso-ink); padding: 12px 16px; border-radius: 12px; max-width: 72ch; }
.grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.cartao { display: flex; flex-direction: column; background: var(--surface); border-radius: 16px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.cartao[hidden] { display: none; }
.midia { aspect-ratio: 4 / 5; background: #000; display: grid; place-items: center; }
.midia img, .midia video { width: 100%; height: 100%; object-fit: contain; display: block; }
.midia.sem { background: var(--bg); color: var(--muted); padding: 16px; text-align: center; font-size: 13px; }
.corpo { padding: 12px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.nome { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.botao { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 10px; border: 0; cursor: pointer; font: inherit; font-weight: 500; text-decoration: none; color: #fff; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.botao.secundario { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.botao:focus-visible, #filtro:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; }
@media (max-width: 600px) { .topo, main { padding-left: 16px; padding-right: 16px; } .grade { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } }