:root { --primary-1: #667eea; --primary-2: #764ba2; --text: #1f2937; --muted: #6b7280; --surface: #f8fafc; --shadow: 0 10px 30px rgba(103,126,234,.20); }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif; color: var(--text); }

/* Cabeçalho padrão das páginas internas */
header { background: linear-gradient(135deg, var(--primary-1), var(--primary-2)); color:#fff; box-shadow: var(--shadow); position: sticky; top:0; z-index: 1000; }
header .wrap { max-width: 960px; margin: 0 auto; padding: .75rem 1rem; display:flex; align-items:center; gap:1rem; }
.brand { font-weight:700; }
.nav { margin-left:auto; display:flex; gap:.75rem; }
.nav a { color:#fff; text-decoration:none; opacity:.92; }
.nav a:hover { opacity: 1; }

/* Conteúdo */
main { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; }
h1 { font-size: 2rem; margin: 0 0 .5rem; }
h2 { margin: 2rem 0 .5rem; }
.lead { color: var(--muted); margin-bottom: 1rem; }
.card { background: var(--surface); padding: 1rem; border-radius: .75rem; box-shadow: var(--shadow); }
code, pre { background: #eef2ff; padding: .15rem .25rem; border-radius: .25rem; }
pre { padding: .75rem; overflow: auto; }
ul { margin: .5rem 0 1rem; }
/* Utilitários */
.muted { color: var(--muted); }
.mt-1 { margin-top: 1rem; }

/* Badges para metadados (categorias/tags/marketplace) */
.badges { display: flex; gap: .5rem; flex-wrap: wrap; }
.badge { background: #334155; color: #fff; font-size: .8rem; padding: .15rem .5rem; border-radius: 999px; }

/* Grid utilitário */
.grid { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 960px) { .grid { grid-template-columns: 1fr; } }

/* Rodapé */
footer { background:#0f172a; color:#cbd5e1; margin-top: 2rem; }
footer .wrap { max-width: 960px; margin: 0 auto; padding: 1rem; display:flex; justify-content: space-between; align-items:center; }
footer a { color:#93c5fd; text-decoration:none; }

/* Footer fixo (apenas onde for necessário) */
.has-fixed-footer { padding-bottom: 80px; }
.fixed-footer { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 900; }