/* Monitor de Banco de Dados — Elite SP Roleplay. Tema escuro de painel. */

:root {
  --bg:#0d1117; --bg2:#161b22; --bg3:#1c2330;
  --line:#2a3340; --line2:#384357;
  --tx:#c9d1d9; --dim:#9aa4b2; --mute:#6b7484;
  --azul:#58a6ff; --verde:#3fb950; --amar:#d29922; --verm:#f85149;
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
  background:var(--bg); color:var(--tx);
  font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.5; min-height:100vh;
}

b { color:#fff; font-weight:600; }
code {
  font-family:Consolas,'Courier New',monospace; font-size:.86em;
  background:var(--bg3); border:1px solid var(--line); border-radius:4px;
  padding:1px 5px; color:#e3b341;
}
pre {
  font-family:Consolas,'Courier New',monospace; font-size:.82rem;
  background:#0a0d12; border:1px solid var(--line); border-radius:8px;
  padding:13px 15px; color:#9ad1ff; overflow-x:auto; line-height:1.65;
}

/* ---------- Login ---------- */
.m-login {
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.m-login-card {
  width:100%; max-width:370px; background:var(--bg2);
  border:1px solid var(--line); border-radius:14px;
  padding:38px 32px 28px; text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.m-login-ico {
  width:58px; height:58px; margin:0 auto 16px; border-radius:13px;
  background:linear-gradient(150deg,#1f6feb,#0d3a7a);
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; color:#fff;
}
.m-login-card h1 { font-size:1.32rem; font-weight:700; color:#fff; }
.m-login-sub { color:var(--mute); font-size:.85rem; margin-top:3px; }
.m-login-card form { margin-top:22px; display:flex; flex-direction:column; gap:11px; }
.m-login-card input {
  background:var(--bg); border:1px solid var(--line2); border-radius:9px;
  padding:12px 14px; color:var(--tx); font-size:.97rem; outline:none;
}
.m-login-card input:focus { border-color:var(--azul); }
.m-login-card button {
  background:linear-gradient(150deg,#2b7fff,#1f6feb); color:#fff;
  border:0; border-radius:9px; padding:12px; font-size:.97rem; font-weight:600;
  cursor:pointer;
}
.m-login-card button:hover { filter:brightness(1.1); }
.m-login-erro {
  background:rgba(248,81,73,.12); border:1px solid rgba(248,81,73,.4);
  color:#ff9d96; border-radius:9px; padding:9px 12px; font-size:.85rem; margin-top:16px;
}
.m-login-aviso {
  background:rgba(210,153,34,.12); border:1px solid rgba(210,153,34,.4);
  color:#e3b341; border-radius:9px; padding:11px 13px; font-size:.85rem;
  margin-top:18px; line-height:1.6;
}
.m-login-foot { color:var(--mute); font-size:.74rem; margin-top:20px; }

/* ---------- Cabeçalho ---------- */
.m-top {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; padding:11px 20px;
  background:rgba(13,17,23,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.m-brand { display:flex; align-items:center; gap:11px; }
.m-logo {
  width:38px; height:38px; border-radius:9px; flex:none;
  background:linear-gradient(150deg,#1f6feb,#0d3a7a);
  display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:#fff;
}
.m-brand-t { display:flex; flex-direction:column; line-height:1.25; }
.m-brand-t b { font-size:1rem; }
.m-brand-t small { color:var(--mute); font-size:.74rem; }
.m-tools { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.m-live { width:10px; height:10px; border-radius:50%; background:var(--mute); flex:none; }
.m-live.ok  { background:var(--verde); box-shadow:0 0 8px var(--verde); }
.m-live.off { background:var(--verm);  box-shadow:0 0 8px var(--verm); }
.m-ts { color:var(--mute); font-size:.8rem; }
.m-ts b { color:var(--dim); font-weight:600; }
.m-sel {
  background:var(--bg2); border:1px solid var(--line2); border-radius:8px;
  color:var(--tx); padding:6px 9px; font-size:.82rem; cursor:pointer; outline:none;
}
.m-sair {
  color:var(--dim); text-decoration:none; font-size:.82rem; font-weight:600;
  border:1px solid var(--line2); border-radius:8px; padding:6px 13px;
}
.m-sair:hover { border-color:var(--verm); color:#ff9d96; }

/* ---------- Estrutura ---------- */
.m-wrap { max-width:1200px; margin:0 auto; padding:22px 20px 60px; }
.m-load { text-align:center; color:var(--mute); padding:60px 0; font-size:.95rem; }

/* ---------- Banner de saúde ---------- */
.m-status {
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  border-radius:12px; padding:14px 18px; margin-bottom:18px;
  border:1px solid var(--line);
}
.m-status b { font-size:1rem; }
.m-status span:last-child { color:var(--dim); font-size:.9rem; }
.m-dot { width:11px; height:11px; border-radius:50%; flex:none; }
.m-ok    { background:rgba(63,185,80,.09);  border-color:rgba(63,185,80,.35); }
.m-ok    .m-dot { background:var(--verde); box-shadow:0 0 9px var(--verde); }
.m-medio { background:rgba(210,153,34,.10); border-color:rgba(210,153,34,.4); }
.m-medio .m-dot { background:var(--amar);  box-shadow:0 0 9px var(--amar); }
.m-alto  { background:rgba(248,81,73,.10);  border-color:rgba(248,81,73,.45); }
.m-alto  .m-dot { background:var(--verm);  box-shadow:0 0 9px var(--verm); }

/* ---------- Cards ---------- */
.m-cards {
  display:grid; gap:12px; margin-bottom:16px;
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
}
.m-card {
  background:var(--bg2); border:1px solid var(--line); border-radius:11px;
  padding:14px 15px;
}
.m-card.alerta { border-color:rgba(210,153,34,.5); }
.m-card-l {
  color:var(--mute); font-size:.71rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
}
.m-card-v { font-size:1.7rem; font-weight:700; color:#fff; margin-top:4px; }
.m-card-v small { font-size:.95rem; font-weight:500; color:var(--mute); }
.m-card.alerta .m-card-v { color:#e3b341; }
.m-card-s { color:var(--mute); font-size:.74rem; margin-top:3px; line-height:1.4; }
.m-bar {
  height:6px; border-radius:4px; background:var(--bg3);
  overflow:hidden; margin-top:8px;
}
.m-bar i { display:block; height:100%; background:var(--azul); border-radius:4px; }
.m-card.alerta .m-bar i { background:var(--amar); }

/* ---------- Sparklines ---------- */
.m-sparks { display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-bottom:6px; }
.m-spark {
  background:var(--bg2); border:1px solid var(--line); border-radius:11px; padding:13px 15px;
}
.m-spark-h {
  color:var(--mute); font-size:.74rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  display:flex; justify-content:space-between; align-items:baseline;
}
.m-spark-h b { font-size:1.05rem; }
.m-spark canvas { width:100%; height:46px; display:block; margin-top:6px; }

/* ---------- Seções ---------- */
.m-sec { margin-top:22px; }
.m-sec h2 {
  font-size:1.02rem; font-weight:700; color:#fff; margin-bottom:11px;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.m-sec-h { color:var(--mute); font-size:.78rem; font-weight:500; }
.m-note { color:var(--mute); font-size:.8rem; margin-bottom:11px; line-height:1.5; }

/* ---------- Apps conectados ---------- */
.m-apps { display:grid; gap:11px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.m-app {
  background:var(--bg2); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; border-left:3px solid var(--azul);
}
.m-app-n { font-weight:600; color:#fff; font-size:.92rem; }
.m-app-c { color:var(--dim); font-size:.82rem; margin-top:3px; }
.m-app-c .on { color:var(--verde); font-weight:600; }
.m-app-u {
  color:var(--mute); font-size:.72rem; margin-top:5px;
  font-family:Consolas,monospace;
}

/* ---------- Tabelas ---------- */
.m-tablewrap {
  border:1px solid var(--line); border-radius:11px; overflow:auto;
  background:var(--bg2);
}
.m-tab { width:100%; border-collapse:collapse; font-size:.84rem; }
.m-tab thead th {
  text-align:left; padding:9px 12px; color:var(--mute);
  font-size:.71rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--line); white-space:nowrap; background:var(--bg3);
}
.m-tab tbody td {
  padding:9px 12px; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--dim);
}
.m-tab tbody tr:last-child td { border-bottom:0; }
.m-tab tr:first-child td { color:var(--tx); }
.m-tab tbody tr.ativo { background:rgba(88,166,255,.06); }
.m-tab tbody tr.ativo td:first-child { box-shadow:inset 3px 0 0 var(--azul); }
.m-tab tbody tr.lenta { background:rgba(248,81,73,.09); }
.m-tab tbody tr.lenta td:first-child { box-shadow:inset 3px 0 0 var(--verm); }
.m-tab tbody tr.lenta td { color:#ffb3ad; }
.m-tab tbody tr.dorme td { color:var(--mute); }
.m-mono { font-family:Consolas,monospace; font-size:.8rem; }
.m-q {
  font-family:Consolas,'Courier New',monospace; font-size:.79rem;
  color:#9ad1ff; white-space:pre-wrap; word-break:break-word;
  max-width:520px; line-height:1.55;
}
.m-tab tbody tr.dorme .m-q { color:var(--mute); }
.m-vazio { color:var(--mute); font-style:italic; }

/* Tabela de consultas — cabeçalho ordenável e destaque das problemáticas. */
.m-tab-sort th.m-sort { cursor:pointer; user-select:none; white-space:nowrap; }
.m-tab-sort th.m-sort:hover { color:var(--azul); }
.m-tab-sort th.m-sort::after { content:attr(data-arrow); color:var(--azul); }
.m-tab tbody tr.q-alerta { background:rgba(210,153,34,.10); }
.m-tab tbody tr.q-alerta td:first-child { box-shadow:inset 3px 0 0 var(--amar); }
.m-aviso-box {
  background:rgba(210,153,34,.10); border:1px solid rgba(210,153,34,.4);
  color:#e3b341; border-radius:10px; padding:13px 15px; font-size:.85rem; line-height:1.65;
}
.m-aviso-box code { font-size:.82em; }

/* ---------- Erro / ajuda ---------- */
.m-erro {
  background:rgba(248,81,73,.08); border:1px solid rgba(248,81,73,.4);
  border-radius:12px; padding:20px 22px;
}
.m-erro h2 { color:#ff9d96; font-size:1.05rem; margin-bottom:9px; }
.m-erro p { color:var(--dim); font-size:.88rem; margin-bottom:10px; }
.m-erro pre { margin:6px 0 10px; }
.m-ajuda {
  margin-top:30px; background:var(--bg2);
  border:1px solid var(--line); border-radius:11px; padding:0 16px;
}
.m-ajuda summary {
  cursor:pointer; padding:13px 0; color:var(--dim);
  font-size:.85rem; font-weight:600; list-style:none;
}
.m-ajuda summary::-webkit-details-marker { display:none; }
.m-ajuda summary::before { content:'▸ '; color:var(--mute); }
.m-ajuda[open] summary::before { content:'▾ '; }
.m-ajuda p { color:var(--dim); font-size:.84rem; margin-bottom:10px; line-height:1.6; }
.m-ajuda pre { margin-bottom:14px; }

@media (max-width:640px) {
  .m-sparks { grid-template-columns:1fr; }
  .m-card-v { font-size:1.45rem; }
  .m-wrap { padding:16px 13px 50px; }
}

/* ---------- Histórico (gráficos Chart.js) ---------- */
.m-range { margin-left:auto; display:inline-flex; gap:4px; }
.m-range button {
  background:var(--bg2); border:1px solid var(--line2); color:var(--dim);
  border-radius:7px; padding:4px 11px; font-size:.78rem; font-weight:600;
  cursor:pointer; outline:none;
}
.m-range button:hover { border-color:var(--azul); color:var(--azul); }
.m-range button.on { background:var(--azul); border-color:var(--azul); color:#fff; }
.m-charts { display:grid; gap:12px; grid-template-columns:1fr 1fr; }
.m-chart {
  background:var(--bg2); border:1px solid var(--line); border-radius:11px;
  padding:13px 15px 10px;
}
.m-chart-h {
  color:var(--mute); font-size:.74rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;
}
.m-chart-box { position:relative; height:200px; }
@media (max-width:860px) { .m-charts { grid-template-columns:1fr; } }

/* ---------- Navegação entre páginas do monitor ---------- */
.m-nav { display:inline-flex; gap:4px; margin-left:6px; }
.m-nav a {
  color:var(--dim); text-decoration:none; font-size:.82rem; font-weight:600;
  border:1px solid var(--line2); border-radius:8px; padding:6px 13px;
}
.m-nav a:hover { border-color:var(--azul); color:var(--azul); }
.m-nav a.on { background:var(--azul); border-color:var(--azul); color:#fff; }

/* ---------- Chips de filtro (categoria / intervalo) ---------- */
.m-filtros { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.m-filtros .m-flabel {
  color:var(--mute); font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; margin-right:2px;
}
.m-chip {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--bg2); border:1px solid var(--line2); color:var(--dim);
  border-radius:20px; padding:5px 13px; font-size:.8rem; font-weight:600;
  cursor:pointer; outline:none; user-select:none; transition:all .12s;
}
.m-chip:hover { border-color:var(--azul); color:var(--tx); }
.m-chip.on { background:var(--bg3); border-color:var(--azul); color:#fff; }
.m-chip .m-dotc { width:9px; height:9px; border-radius:50%; flex:none; background:var(--mute); }
.m-chip .m-chipn { color:var(--mute); font-weight:700; font-size:.74rem; }
.m-chip.on .m-chipn { color:var(--dim); }

/* ---------- Foco (drill-down: 1 crash/motivo ou 1 conta) ---------- */
.m-finput {
  flex:1 1 280px; min-width:240px; max-width:520px;
  background:var(--bg2); border:1px solid var(--line2); border-radius:8px;
  color:var(--tx); padding:6px 11px; font-size:.82rem; outline:none;
  font-family:Consolas,'Courier New',monospace;
}
.m-finput:focus { border-color:var(--azul); }
.m-finput::placeholder { color:var(--mute); font-family:'Segoe UI',Roboto,sans-serif; }
.m-foco-chip {
  display:inline-flex; align-items:center; gap:8px; max-width:100%;
  background:var(--bg3); border:1px solid var(--azul);
  border-radius:999px; padding:4px 6px 4px 13px; font-size:.8rem; color:var(--tx);
}
.m-foco-chip b { color:var(--azul); font-weight:700; }
.m-foco-chip .m-foco-v {
  font-family:Consolas,'Courier New',monospace; color:#fff;
  max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.m-foco-x {
  border:0; background:transparent; color:var(--mute); cursor:pointer;
  font-size:.8rem; line-height:1; padding:4px 7px; border-radius:50%; flex:none;
}
.m-foco-x:hover { background:rgba(248,81,73,.15); color:#ff9d96; }
/* linhas clicáveis das tabelas (motivos / ranking) */
.m-tab tbody tr.m-click { cursor:pointer; }
.m-tab tbody tr.m-click:hover { background:rgba(88,166,255,.07); }

/* ---------- Layout gráfico + rosca ---------- */
.m-grid2 { display:grid; gap:12px; grid-template-columns:2fr 1fr; align-items:stretch; }
@media (max-width:860px) { .m-grid2 { grid-template-columns:1fr; } }
.m-legend { display:flex; flex-direction:column; gap:7px; margin-top:10px; }
.m-legrow {
  display:flex; align-items:center; gap:9px; font-size:.82rem; color:var(--dim);
  padding:4px 2px; border-radius:6px;
}
.m-legrow .m-dotc { width:11px; height:11px; border-radius:3px; flex:none; }
.m-legrow .m-legn { margin-left:auto; color:#fff; font-weight:700; font-variant-numeric:tabular-nums; }
.m-legrow .m-legp { color:var(--mute); font-size:.74rem; width:48px; text-align:right; font-variant-numeric:tabular-nums; }
.m-donut-wrap { position:relative; height:200px; }
.m-donut-c {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none;
}
.m-donut-c b { font-size:1.7rem; color:#fff; line-height:1; }
.m-donut-c span { font-size:.72rem; color:var(--mute); margin-top:3px; }

/* ---------- Badges de categoria ---------- */
.m-badge {
  display:inline-flex; align-items:center; gap:5px;
  border-radius:6px; padding:2px 8px; font-size:.73rem; font-weight:700; white-space:nowrap;
}
.m-badge .m-dotc { width:8px; height:8px; border-radius:50%; flex:none; }
.m-mini { display:inline-flex; flex-wrap:wrap; gap:5px; }
.m-mini i {
  display:inline-flex; align-items:center; gap:4px; font-style:normal;
  font-size:.72rem; color:var(--dim); font-weight:600;
}
.m-mini i b { color:#fff; }
.m-mini i .m-dotc { width:7px; height:7px; border-radius:50%; }

/* ---------- Ranking ---------- */
.m-rk-pos { font-weight:800; color:var(--mute); text-align:center; width:34px; }
.m-rk-1 .m-rk-pos { color:#e3b341; }
.m-rk-2 .m-rk-pos { color:#c9d1d9; }
.m-rk-3 .m-rk-pos { color:#cd7f32; }
.m-rk-n { color:#fff; font-weight:700; font-size:1.05rem; font-variant-numeric:tabular-nums; }
.m-id { font-family:Consolas,monospace; font-size:.74rem; color:var(--mute); word-break:break-all; }

/* Credencial completa clicável (copiar) */
.m-copy {
  cursor:pointer; color:var(--dim); border-bottom:1px dashed var(--line2);
  transition:color .12s, border-color .12s; position:relative;
}
.m-copy:hover { color:var(--azul); border-bottom-color:var(--azul); }
.m-copy::before {
  content:'⧉'; margin-right:5px; color:var(--mute); font-family:'Segoe UI',sans-serif;
}
.m-copy:hover::before { color:var(--azul); }
.m-copy.copied { color:var(--verde); border-bottom-color:var(--verde); }
.m-copy.copied::before { content:'✓'; color:var(--verde); }
.m-copy.copied::after {
  content:'copiado!'; position:absolute; left:0; top:-20px;
  background:var(--verde); color:#04210c; font-family:'Segoe UI',sans-serif;
  font-size:.66rem; font-weight:700; padding:1px 7px; border-radius:5px; white-space:nowrap;
}

/* ---------- NetWatch (página Rede) ---------- */
/* Linha da timeline que marca CAPTURA INICIADA/CONCLUIDA */
.m-tab tbody tr.nw-alerta { background:rgba(248,81,73,.12); }
.m-tab tbody tr.nw-alerta td:first-child { box-shadow:inset 3px 0 0 var(--verm); }
.m-tab tbody tr.nw-alerta td { color:#ffb3ad; }

/* Cartão de captura (expansível via ?cap=) */
.nw-cap {
  background:var(--bg2); border:1px solid var(--line); border-radius:11px;
  margin-bottom:10px; overflow:hidden;
}
.nw-cap.aberta { border-color:var(--azul); }
.nw-cap-h {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 15px; text-decoration:none; color:var(--tx);
}
.nw-cap-h:hover { background:rgba(88,166,255,.06); }
.nw-cap-h b { font-size:.95rem; }
.nw-cap-seta { color:var(--azul); font-size:.85rem; width:14px; flex:none; }
.nw-cap-nome { color:var(--mute); font-size:.74rem; }
.nw-cap-meta { margin-left:auto; color:var(--dim); font-size:.78rem; white-space:nowrap; }
.nw-cap-body { padding:4px 15px 15px; border-top:1px solid var(--line); }
.nw-cap-body > .m-note { margin-top:10px; }

/* 3º gráfico ocupa a linha inteira da grade */
.nw-charts { margin-top:12px; }
.nw-chart-full { grid-column:1 / -1; }
@media (max-width:860px) { .nw-chart-full { grid-column:auto; } }

/* <pre> dos artefatos (top_sources / netstat / tails) */
.nw-pre {
  max-height:420px; overflow:auto; margin:0;
  white-space:pre; font-size:.76rem;
}
.nw-txt { margin-top:10px; }
.nw-txt .nw-pre { margin-bottom:13px; }

/* Seletor de dia do monitor contínuo — <a> com a mesma cara dos botões .m-range */
.m-range a {
  background:var(--bg2); border:1px solid var(--line2); color:var(--dim);
  border-radius:7px; padding:4px 11px; font-size:.78rem; font-weight:600;
  cursor:pointer; text-decoration:none;
}
.m-range a:hover { border-color:var(--azul); color:var(--azul); }
.m-range a.on { background:var(--azul); border-color:var(--azul); color:#fff; }

/* Faixa "agora" do monitor contínuo (última amostra + frescor da coleta) */
.nw-agora {
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--bg2); border:1px solid var(--line); border-radius:11px;
  padding:11px 15px; margin-bottom:10px;
}
.nw-stat { display:flex; flex-direction:column; line-height:1.35; }
.nw-stat small {
  color:var(--mute); font-size:.68rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
}
.nw-stat b { color:#fff; font-size:1.02rem; font-variant-numeric:tabular-nums; }
.nw-stat i { color:var(--mute); font-size:.72rem; font-style:normal; }
.nw-badge {
  flex:none; border-radius:6px; padding:3px 10px;
  font-size:.72rem; font-weight:800; letter-spacing:.05em;
}
.nw-badge.ok    { background:rgba(63,185,80,.14);  color:var(--verde); border:1px solid rgba(63,185,80,.4); }
.nw-badge.atras { background:rgba(210,153,34,.14); color:#e3b341;      border:1px solid rgba(210,153,34,.5); }
.nw-badge.off   { background:var(--bg3);           color:var(--mute);  border:1px solid var(--line2); }

/* Botão AUTO (atualização ao vivo de 1s) — verde pulsando quando ligado */
.nw-auto {
  margin-left:auto; flex:none; cursor:pointer;
  background:var(--bg3); border:1px solid var(--line2); color:var(--dim);
  border-radius:8px; padding:7px 14px; font-size:.8rem; font-weight:800;
  letter-spacing:.05em; outline:none; transition:color .12s, border-color .12s;
}
.nw-auto:hover { border-color:var(--verde); color:var(--verde); }
.nw-auto.on {
  background:rgba(63,185,80,.14); border-color:var(--verde); color:var(--verde);
  animation:nw-pulso 1.6s ease-out infinite;
}
@keyframes nw-pulso {
  0%   { box-shadow:0 0 0 0 rgba(63,185,80,.45); }
  70%  { box-shadow:0 0 0 8px rgba(63,185,80,0); }
  100% { box-shadow:0 0 0 0 rgba(63,185,80,0); }
}

/* Botões de download (proxy PHP autenticado) */
.nw-downloads {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px;
}
.nw-dl {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg3); border:1px solid var(--line2); color:var(--tx);
  text-decoration:none; border-radius:8px; padding:7px 13px;
  font-size:.82rem; font-weight:600;
}
.nw-dl:hover { border-color:var(--azul); color:var(--azul); }
.nw-dl small { color:var(--mute); font-weight:400; font-size:.72rem; }