:root { --rubro: #d7141a; --rubro-tinta: #a50f14; --tinta: #1c1c1c; --cinza: #5c5c5c; --linha: #e2e2e2; --nevoa: #f6f6f6; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tinta); background: #fff; }
a { color: var(--rubro-tinta); }
:focus-visible { outline: 3px solid var(--rubro); outline-offset: 2px; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #000; color: #fff; padding: .75rem 1.25rem; border-bottom: 6px solid var(--rubro); }
.topo nav { display: flex; align-items: center; gap: 1.25rem; }
.topo a, .topo .link { color: #fff; text-decoration: none; font-weight: 600; }
.marca { font-size: 1.3rem; font-weight: 800; }
.marca b { color: var(--rubro); }
.marca span { font-weight: 400; font-size: .85rem; color: #bbb; }
main { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; }
.meta { color: var(--cinza); font-size: .875rem; }
.aviso { padding: .75rem 1rem; border-radius: 6px; }
.aviso.ok { background: #eaf6ec; color: #155724; }
.aviso.erro { background: #fdecea; color: #8a1c1c; }
.faixa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
button { font: inherit; font-weight: 600; padding: .55rem 1rem; border-radius: 6px; border: 1px solid #bbb; background: #fff; cursor: pointer; min-height: 2.5rem; }
button:hover { border-color: #000; }
button.primario { background: var(--rubro); border-color: var(--rubro); color: #fff; }
button.primario:hover { background: var(--rubro-tinta); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.link { background: none; border: 0; padding: 0; min-height: 0; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { font-size: .8rem; color: var(--cinza); font-weight: 600; }
.contagem { background: var(--rubro); color: #fff; border-radius: 999px; padding: 0 .55rem; font-size: .85rem; }
.selo { background: #000; color: #fff; border-radius: 3px; padding: 0 .35rem; font-size: .75rem; font-weight: 700; }
.vazio { color: var(--cinza); }
.lista { padding-left: 1.1rem; }
.lista li { margin: .3rem 0; }
.cartao { max-width: 24rem; margin: 3rem auto; display: grid; gap: 1rem; }
.edicao { display: grid; gap: 1.1rem; max-width: 52rem; }
label { display: grid; gap: .3rem; font-weight: 600; }
label small { font-weight: 400; color: var(--cinza); }
input, textarea, select { font: inherit; padding: .55rem .65rem; border: 1px solid #bbb; border-radius: 6px; width: 100%; }
textarea[name="body"] { font: 16px/1.6 Charter, Georgia, serif; }
.marcar { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.marcar input { width: auto; }
.duas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
fieldset { border: 1px solid var(--linha); border-radius: 8px; padding: 1rem; display: grid; gap: 1rem; }
legend { font-weight: 700; padding: 0 .3rem; }
details { border: 1px solid var(--linha); border-radius: 8px; padding: .75rem 1rem; }
details[open] { display: grid; gap: 1rem; }
summary { font-weight: 700; cursor: pointer; }
.miniatura { max-width: 16rem; border-radius: 6px; }
.erro { color: #a01818; font-style: normal; font-weight: 400; font-size: .875rem; }
.botoes { display: flex; gap: .75rem; flex-wrap: wrap; }
.perigo { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linha); }
.perigo button { color: #a01818; border-color: #e3b5b5; }