/* ============================================================
   listaotserv — claro, azul, denso. Nomes de classe iguais aos
   do tema anterior: nenhum PHP precisa mudar.
   ============================================================ */

:root{
  --bg:       #f5f7fa;
  --panel:    #ffffff;
  --panel-2:  #f3f6fa;
  --raise:    #ffffff;
  --line:     #e4e9f0;
  --edge:     #cfd8e4;
  --text:     #16202e;
  --dim:      #6a7686;
  --gold:     #2563eb;
  --gold-lt:  #1d4ed8;
  --green:    #16a34a;
  --red:      #dc2626;
  --gap: 14px;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.55 Inter, system-ui, -apple-system, sans-serif;
}

a{ color: var(--gold); text-decoration: none; }
a:hover{ color: var(--gold-lt); text-decoration: underline; }
:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
img{ max-width: 100%; }

.wrap{ max-width: 1220px; margin: 0 auto; padding: 0 18px; }
.mono{ font-family: "IBM Plex Mono", ui-monospace, monospace; }
.hint{ color: var(--dim); font-size: 13px; }
.nowrap{ white-space: nowrap; }

/* ---------- painel ---------- */
.panel{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: var(--gap);
}

/* ---------- topo ---------- */
.top{
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  padding: 18px 0 14px;
  margin-bottom: 18px;
}
.top.slim{ padding: 14px 0; }
.top-in{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.brand{ font: 700 25px/1 Cinzel, Georgia, serif; color: var(--gold-lt); letter-spacing: .01em; }
.brand:hover{ color: var(--gold); text-decoration: none; }
.tagline{ margin: 0; color: var(--dim); font-size: 13px; }

.topnav{ margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 14px; }
.topnav a{ color: var(--text); }
.topnav a:hover{ color: var(--gold); }
.coins{
  font-family: "IBM Plex Mono", monospace; font-size: 12px;
  color: var(--gold-lt); background: #eaf1fe; border: 1px solid #cfe0fb;
  border-radius: 4px; padding: 4px 9px;
}
.scoreboard{
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 24px;
  margin-top: 10px; font-size: 12px; color: var(--dim);
}
.scoreboard b{ color: var(--text); font-weight: 600; font-size: 14px; }

/* ---------- caixas do topo ---------- */
.topboxes{ display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: var(--gap); }
.topboxes h3{
  font: 600 10px/1 Inter, sans-serif; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 12px;
}
.topboxes p{ margin: 5px 0; font-size: 13px; }
.topboxes .btn{ margin-top: 10px; }
.tname.big{ font: 600 19px/1.25 Inter, sans-serif; color: var(--text); }

/* ---------- abrindo em breve ---------- */
.opening{
  display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
  background: #eff5ff; border-color: #cfe0fb;
}
.oplabel{
  font: 600 10px/1.6 Inter, sans-serif; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-lt); white-space: nowrap;
}
.opening ul{ list-style: none; margin: 0; padding: 0; flex: 1 1 320px; }
.opening li{ display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 4px 0; }
.opening li b{ margin-left: auto; color: var(--gold-lt); font-family: "IBM Plex Mono", monospace; font-size: 12px; }

/* ---------- filtros ---------- */
.filters{ display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.f{ display: flex; flex-direction: column; gap: 5px; }
.f > span{ font: 600 9px/1 Inter, sans-serif; letter-spacing: .11em; text-transform: uppercase; color: var(--dim); }
.f.grow{ flex: 1 1 220px; }
.f.small{ width: 96px; }
.f .fld{ width: 100%; }

.fld{
  background: #fff;
  border: 1px solid var(--edge);
  border-radius: 5px;
  color: var(--text);
  padding: 9px 11px;
  font: inherit;
  min-width: 0;
}
.fld:focus{ border-color: var(--gold); box-shadow: 0 0 0 3px #2563eb1f; outline: none; }
.fld::placeholder{ color: #9aa5b4; }
.hp{ position: absolute; left: -9999px; }

.fbar{
  display: flex; align-items: center; gap: 12px; flex-basis: 100%; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px;
}
.found{ font-size: 12px; color: var(--dim); }
.found b{ color: var(--text); font-weight: 600; }
.views{ margin-left: auto; display: flex; gap: 6px; }
.vw{ font-size: 12px; color: var(--dim); border: 1px solid var(--edge); border-radius: 5px; padding: 6px 11px; }
.vw.on{ color: var(--gold-lt); border-color: var(--gold); background: #eaf1fe; }
.vw:hover{ text-decoration: none; color: var(--gold-lt); }

/* ---------- botões ---------- */
.btn{
  display: inline-block;
  background: #fff;
  border: 1px solid var(--edge);
  border-radius: 5px;
  color: var(--text);
  padding: 9px 16px;
  font: 600 13px/1.2 Inter, sans-serif;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover{ background: #f1f6fe; border-color: var(--gold); color: var(--gold-lt); text-decoration: none; }
.btn.ghost{ background: transparent; color: var(--dim); }
.btn.ghost:hover{ color: var(--text); }
.btn.vote{ background: var(--gold); border-color: var(--gold); color: #fff; }
.btn.vote:hover{ background: var(--gold-lt); border-color: var(--gold-lt); color: #fff; }
.btn.small{ padding: 6px 11px; font-size: 12px; }
.btn[disabled]{ opacity: .45; cursor: not-allowed; }

/* ---------- layout ---------- */
.layout{ display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.rail{ position: sticky; top: 14px; }
.banner{ display: block; margin-bottom: var(--gap); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.banner img{ display: block; width: 100%; height: auto; }
.promo h3{
  font: 600 10px/1 Inter, sans-serif; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 10px;
}
.topbanner{ margin-bottom: var(--gap); }
.topbanner .banner{ margin-bottom: 0; }

/* ---------- tabela ---------- */
.tablewrap{ padding: 0; overflow-x: auto; }
.grid{ width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; min-width: 880px; }

.grid col.c-rank{ width: 44px; }
.grid col.c-ip{ width: 210px; }
.grid col.c-name{ width: auto; }
.grid col.c-players{ width: 108px; }
.grid col.c-up{ width: 76px; }
.grid col.c-rate{ width: 62px; }
.grid col.c-type{ width: 84px; }
.grid col.c-cli{ width: 62px; }
.grid col.c-votes{ width: 58px; }

.grid thead th{
  position: sticky; top: 0; z-index: 2;
  background: #f7f9fc;
  border-bottom: 1px solid var(--edge);
  padding: 11px 10px; text-align: left; white-space: nowrap;
}
.grid thead a{
  font: 600 9px/1 Inter, sans-serif; letter-spacing: .11em;
  text-transform: uppercase; color: var(--dim);
}
.grid thead a:hover{ color: var(--gold); text-decoration: none; }
.ar{ font-size: 7px; opacity: .35; margin-left: 2px; }
.ar.on{ opacity: 1; color: var(--gold); }

.grid tbody tr{ border-bottom: 1px solid var(--line); }
.grid tbody tr:nth-child(even){ background: #fafbfd; }
.grid tbody tr:hover{ background: #eef4fd; }
.grid td{ padding: 10px; vertical-align: middle; }
.grid td.num{ text-align: right; white-space: nowrap; font-family: "IBM Plex Mono", monospace; font-size: 13px; }
.grid td.c-rank{ text-align: center; color: var(--dim); font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.grid tbody tr:nth-child(-n+3) td.c-rank{ color: var(--gold); font-weight: 600; }

.ipcell{
  display: block; font-family: "IBM Plex Mono", monospace; font-size: 12px;
  color: #71809a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iprow{ display: flex; align-items: center; gap: 8px; min-width: 0; }
.tname{ font-weight: 600; color: var(--text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tname:hover{ color: var(--gold); text-decoration: none; }

.plcell{ text-align: right; }
.pl{ color: var(--text); font-weight: 600; font-family: "IBM Plex Mono", monospace; }
.plpeak{ color: var(--dim); font-size: 11px; font-family: "IBM Plex Mono", monospace; }
.minibar{ height: 3px; background: #e6ebf2; border-radius: 2px; margin-top: 5px; overflow: hidden; }
.minibar span{ display: block; height: 100%; background: var(--green); }

.dot{ width: 8px; height: 8px; border-radius: 50%; background: #c8ced8; flex: 0 0 auto; }
.dot.on{ background: var(--green); }
.state{ font-size: 11px; color: var(--dim); }

.tipo{ font-size: 11px; color: var(--dim); letter-spacing: .05em; text-transform: uppercase; }
.votelink{ font-family: "IBM Plex Mono", monospace; }
.dash{ color: #c2cad6; }

.grid tbody tr.gold-row,
.grid tbody tr.gold-row:nth-child(even){ background: #eaf1fe; box-shadow: inset 3px 0 0 var(--gold); }
.grid tbody tr.gold-row:hover{ background: #dfeafd; }
.grid tbody tr.gold-row .tname{ color: var(--gold-lt); }

/* ---------- cards ---------- */
.list{ list-style: none; margin: 0; padding: 0; }
.row{ display: flex; gap: 16px; align-items: center; }
.row.is-premium{ border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.rank{ font-family: "IBM Plex Mono", monospace; font-size: 15px; color: var(--dim); min-width: 30px; text-align: center; }
.main{ flex: 1 1 auto; min-width: 0; }
.line1{ display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.name{ font: 600 17px/1.25 Inter, sans-serif; color: var(--text); }
.name:hover{ color: var(--gold); text-decoration: none; }
.tags{ display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.tag{ font-size: 11px; color: var(--dim); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 3px 7px; }
.tag.gold{ color: var(--gold-lt); background: #eaf1fe; border-color: #cfe0fb; }
.tag.ghost{ opacity: .7; }
.bar{ height: 6px; background: #e6ebf2; border-radius: 3px; overflow: hidden; }
.bar span{ display: block; height: 100%; background: var(--green); }
.bar.big{ height: 14px; margin-top: 14px; }
.barlabel{ margin: 7px 0 0; font-size: 12px; color: var(--dim); }
.side{ display: flex; align-items: center; gap: 18px; }
.stat{ text-align: center; min-width: 44px; }
.stat b{ display: block; font-family: "IBM Plex Mono", monospace; font-size: 16px; color: var(--text); }
.stat small{ font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .07em; }

.empty{ text-align: center; color: var(--dim); padding: 40px 16px; }
.pager{ display: flex; gap: 10px; justify-content: center; margin: 20px 0; }

/* ---------- página do servidor ---------- */
.srv h1{ font: 700 27px/1.2 Cinzel, Georgia, serif; margin: 0; color: var(--gold-lt); }
.srv h2{ font: 600 16px/1.2 Inter, sans-serif; margin: 0 0 12px; color: var(--text); }
.hero-head{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.specs{ display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin: 20px 0 0; }
.specs div{ border-left: 2px solid var(--edge); padding-left: 11px; }
.specs dt{ font: 600 9px/1 Inter, sans-serif; letter-spacing: .11em; text-transform: uppercase; color: var(--dim); }
.specs dd{ margin: 5px 0 0; font-size: 14px; }
.desc{ margin: 20px 0 0; color: #3f4a5a; }
.actions{ display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.chart svg{ width: 100%; height: 130px; display: block; }
.vote-box form{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.claim{ border-color: var(--gold); background: #f7faff; }

/* ---------- avisos ---------- */
.flash{ border-left: 3px solid var(--line); }
.flash.ok{ border-left-color: var(--green); background: #f2fbf5; }
.flash.warn{ border-left-color: #d97706; background: #fffaf0; }
.key{ font-size: 15px; color: var(--gold-lt); }
.steps{ color: #3f4a5a; padding-left: 20px; }
.steps li{ margin-bottom: 7px; }
.claimlist{ list-style: none; padding: 0; }
.claimlist li{ display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }

/* ---------- conta / painel ---------- */
.narrow{ max-width: 620px; }
.tabs{ display: flex; gap: 8px; margin-bottom: var(--gap); }
.tab{ font-size: 13px; font-weight: 600; color: var(--dim); border: 1px solid var(--edge); border-radius: 5px; padding: 9px 16px; background: #fff; }
.tab.on{ color: var(--gold-lt); border-color: var(--gold); background: #eaf1fe; }
.tab:hover{ text-decoration: none; color: var(--text); }

.srvcard{ border-top: 1px solid var(--line); padding: 18px 0; }
.srvcard:first-of-type{ border-top: 0; }
.srvcard-head{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.metrics{ display: flex; gap: 26px; margin: 14px 0; }
.promobuy{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.promoitem{ background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 14px; }
.promoitem b{ font-size: 14px; }
.promoitem p{ margin: 5px 0 10px; }
.inline{ display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.abertura{ margin-top: 14px; }
.vincular{ margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.addform{ display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }

.packs{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 16px 0; }
.pack{ background: #fff; border: 1px solid var(--edge); border-radius: 6px; padding: 18px 12px; cursor: pointer; color: var(--text); text-align: center; }
.pack:hover{ border-color: var(--gold); background: #f5f9ff; }
.pack b{ display: block; font-family: "IBM Plex Mono", monospace; font-size: 24px; color: var(--gold-lt); }
.pack small{ display: block; font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .09em; }
.pack .preco{ display: block; margin-top: 10px; font-size: 15px; font-weight: 600; }

/* ---------- tabelas auxiliares ---------- */
.tbl{ width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th{ font: 600 9px/1 Inter, sans-serif; letter-spacing: .11em; text-transform: uppercase; color: var(--dim); text-align: left; padding: 8px 10px; }
.tbl td{ padding: 10px; border-top: 1px solid var(--line); vertical-align: top; }
.tbl td.num, .tbl th.num{ text-align: right; }
.tbl a{ margin-right: 10px; }
.pos{ color: var(--green); }
.neg{ color: #b45309; }

.foot{ color: var(--dim); font-size: 13px; padding: 24px 18px 48px; border-top: 1px solid var(--line); margin-top: 24px; }
.foot p{ margin: 5px 0; }

/* ---------- responsivo ---------- */
@media (max-width: 1000px){
  .layout{ grid-template-columns: minmax(0, 1fr); }
  .rail{ position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
  .topboxes{ grid-template-columns: 1fr; }
  .promobuy{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .hide-s{ display: none; }
  .grid{ min-width: 0; }
  .grid col.c-ip{ width: 150px; }
  .topnav{ margin-left: 0; flex-basis: 100%; }
  .rail{ grid-template-columns: 1fr; }
  .row{ flex-wrap: wrap; }
  .side{ width: 100%; justify-content: space-between; padding-left: 46px; }
  .specs{ grid-template-columns: repeat(2, 1fr); }
  .brand{ font-size: 21px; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* ---------- bandeiras ---------- */
.flag{
  display: inline-block; width: 20px; height: 14px;
  border-radius: 2px; border: 1px solid #d7deea;
  object-fit: cover; flex: 0 0 auto; vertical-align: -2px;
}
.flag.big{ width: 28px; height: 20px; }
.grid col.c-ip{ width: 232px; }

/* ---------- bloco de abertura (SEO + contexto) ---------- */
.intro{ margin: 0 0 var(--gap); }
.intro h1{ font: 700 24px/1.2 Cinzel, Georgia, serif; color: var(--gold-lt); margin: 0 0 8px; }
.intro p{ margin: 0; color: var(--dim); font-size: 14px; max-width: 70ch; }
.intro b{ color: var(--text); font-weight: 600; }

/* ---------- seletor de idioma ---------- */
.langsel{ display: inline-flex; gap: 5px; align-items: center; }
.langsel a{ display: inline-flex; border: 1px solid transparent; border-radius: 3px; padding: 2px; line-height: 0; }
.langsel a:hover{ border-color: var(--edge); }
.langsel a.on{ border-color: var(--gold); }
.langsel img{ display: block; border-radius: 2px; }

/* ---------- assinatura e banner do servidor ---------- */
.srvbanner{ margin-bottom: var(--gap); }
.srvbanner .banner{ margin-bottom: 0; }
.sig .sigimg{ display: block; border: 1px solid var(--line); border-radius: 4px; margin: 4px 0 14px; max-width: 100%; height: auto; }
.sig .f{ margin-bottom: 10px; }
.sig .fld{ font-family: "IBM Plex Mono", monospace; font-size: 11px; }