:root { --bg:#0b0b0d; --painel:#171719; --borda:#303036; --texto:#f4f4f4; --cinza:#bcbcc4; --red:#f20818; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--texto); font:16px/1.5 "Segoe UI",Arial,sans-serif; }
.topo { background:#181818; border-bottom:1px solid var(--borda); padding:15px max(20px,calc((100% - 1120px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.marca { font-size:20px; font-weight:800; color:var(--red); text-decoration:none; white-space:nowrap; } .marca small { color:#aaa; font-size:12px; }
nav { display:flex; gap:16px; align-items:center; flex-wrap:wrap; } nav a, nav span { font-size:14px; color:#ddd; text-decoration:none; }
nav a:hover,.acoes a:hover { color:white; }
main { max-width:1120px; margin:35px auto; padding:0 20px 50px; } h1 { font-size:28px; color:var(--red); } h2 { font-size:20px; margin:0 0 14px; } h3 { font-size:17px; }
a { color:#ff6c74; } .painel { border:1px solid var(--borda); border-radius:14px; background:var(--painel); padding:24px; margin:22px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:18px; } .grid .painel { margin:0; }
form { display:grid; gap:12px; } .form-inline { display:inline; } label { display:grid; gap:5px; font-weight:600; }
input,select,textarea { padding:11px; background:#252529; color:white; border:1px solid #555; border-radius:8px; width:100%; font:inherit; }
input[type=checkbox] { width:auto; } .linha-checkbox { display:flex; align-items:center; gap:10px; }
button,.botao { padding:11px 17px; background:var(--red); border:0; border-radius:8px; color:#fff; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block; text-align:center; font-size:14px; }
button:hover,.botao:hover { background:#ce0010; } .botao-secundario { background:#333; } .linkbotao { background:transparent; color:#ff6c74; padding:0; }
.linkbotao:hover { background:transparent; color:white; } .acoes { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.alerta { padding:14px 18px; border-radius:8px; } .alerta.erro { background:#40151a; color:#ffb9bd; } .alerta.sucesso { background:#153324; color:#b1efd1; }
.tabela-scroll { overflow-x:auto; } table { border-collapse:collapse; width:100%; min-width:580px; } th,td { padding:11px; text-align:left; border-bottom:1px solid #39393c; vertical-align:middle; } th { color:#ccc; }
small,.muted { color:#babac2; } .estreito { max-width:500px; } .topline { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.metrica { font-size:25px; font-weight:700; } .lista { padding-left:22px; } .lista li { margin:7px 0; } .ajuda { font-size:13px; color:#ccc; }
@media (max-width:700px) { .topo { padding:15px 20px; } }

:root { --red:#bb1734; }
h1,.marca { color:#ff848c; }
:focus-visible { outline:3px solid #ffcf71; outline-offset:3px; }
input,select,textarea { border-color:#82828d; }
.barra { display:block; background:#44444d; width:100%; min-width:80px; height:9px; border-radius:4px; overflow:hidden; }
.barra > span { display:block; height:100%; background:#ff848c; }
.acoes-ordem { display:flex; gap:5px; }
.acoes-ordem button { padding:6px 10px; }
.acoes-ordem button:disabled { opacity:.42; cursor:default; }
.painel { min-width:0; }
@media (max-width:550px) { main { padding-inline:12px; } .painel { padding:16px; } }