:root{
  --bg:#0a0a0a;
  --ink:#ffffff;
  --gold:#ffcc00;
  --gold-soft:#ffd966;
  --line:#ffffff22;
  --panel:#16171a;
  --ok:#3ccf4e;
  --err:#ff6767;
  --muted:#d0d0d0;
}

*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }
.container{ max-width:2000px; margin:0 auto; padding:9px 8px; }
header{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:7px; border-bottom:1px solid var(--line); padding-bottom:5px; }
header img{ height:34px; width:auto; display:block; }
.header-center{ display:flex; align-items:center; justify-content:center; gap:7px; }
.title{ font-weight:900; letter-spacing:.06em; color:var(--gold); font-size:clamp(16px,2.5vw,24px); text-align:center; }
.actions{ margin-left:auto; display:flex; gap:6px; }
.btn{ border:1px solid #b28900; background:transparent; color:var(--gold); font-weight:800; padding:5px 9px; border-radius:8px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font:inherit; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.btn-primary{ background:linear-gradient(180deg,#ffd966 0%, #ffcc00 60%, #e5b300 100%); color:#1b1600; box-shadow:inset 0 -1px 0 #b28900, 0 1px 5px rgba(0,0,0,.4); }
.btn:hover{ filter:brightness(1.08); }
.consultas-page{ max-width:900px; margin:0 auto; padding:16px 0 28px; }
.consultas-hero{ margin-bottom:11px; }
.eyebrow{ margin:0 0 4px; color:var(--muted); font-weight:600; font-size:clamp(11px,1.2vw,13px); }
.consultas-hero h1{ margin:0; color:var(--ink); font-size:clamp(22px,3vw,32px); line-height:1; font-weight:900; letter-spacing:-.03em; }
.lead{ max-width:700px; margin:9px 0 0; color:#f4f4f4; line-height:1.35; font-size:clamp(12px,1.4vw,14px); }
.search-card,.summary-box,.status-box,.match-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 5px 12px #0006; }
.search-card{ padding:10px 12px; margin:14px 0; }
.search-form{ display:grid; grid-template-columns:130px minmax(180px,1fr) minmax(180px,1fr) auto; gap:9px; align-items:end; }
.field{ display:flex; flex-direction:column; gap:4px; }
.field label{ color:var(--gold); font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:12px; }
.field input,.field select{ width:100%; min-height:30px; background:#000; color:#fff; border:1px solid #444; border-radius:8px; padding:5px 8px; font:inherit; font-size:13px; font-weight:700; }
.field input:focus,.field select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 2px rgba(255,204,0,.16); }
.hint{ display:none; }
.status-box{ padding:8px 10px; margin:8px 0; color:var(--muted); font-size:12px; }
.status-box.error{ border-color:rgba(255,103,103,.6); color:#ffb3b3; }
.status-box.info{ border-color:rgba(255,204,0,.45); }
.summary-box{ padding:10px 12px; margin:12px 0; display:grid; grid-template-columns:minmax(180px,1fr) auto; gap:10px; align-items:center; }
.summary-title{ margin:0; font-size:clamp(16px,2vw,20px); color:var(--gold); text-transform:uppercase; font-weight:900; }
.summary-meta{ margin:3px 0 0; color:var(--muted); font-size:12px; }
.summary-stats{ display:flex; justify-content:flex-end; gap:7px; flex-wrap:wrap; }
.summary-count{ min-width:78px; text-align:center; border-radius:10px; background:#0f0f11; padding:7px 8px; border:1px solid #b28900; }
.summary-count strong{ display:block; font-size:24px; color:var(--gold); line-height:1; }
.summary-count span{ display:block; max-width:82px; margin:0 auto; font-size:8px; line-height:1.1; color:var(--muted); text-transform:uppercase; font-weight:900; }
.summary-win strong, .summary-tri-favor strong{ color:var(--ok); }
.summary-loss strong, .summary-tri-contra strong{ color:var(--err); }
.summary-eff strong{ color:var(--gold-soft); }
.results-list{ display:grid; gap:9px; margin-top:10px; }
.match-card{ padding:10px 12px; border-left:5px solid var(--line); }
.match-card.win{ border-left-color:var(--ok); }
.match-card.loss{ border-left-color:var(--err); }
.match-card.draw{ border-left-color:var(--gold); }
.match-head{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.match-title{ margin:0; font-size:14px; text-transform:uppercase; color:#fff; }
.match-rival{ margin:3px 0 0; color:var(--muted); font-weight:800; text-transform:uppercase; font-size:12px; }
.match-date{ color:var(--muted); font-weight:700; white-space:nowrap; font-size:12px; }
.result-pill{ display:inline-flex; margin-top:6px; border-radius:999px; padding:4px 8px; font-weight:900; text-transform:uppercase; font-size:10px; }
.result-pill.win{ background:rgba(60,207,78,.14); color:#7cff8c; }
.result-pill.loss{ background:rgba(255,103,103,.14); color:#ff9b9b; }
.result-pill.draw{ background:rgba(255,204,0,.14); color:var(--gold); }
.match-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:9px; }
.stat{ background:#000; border:1px solid #444; border-radius:10px; padding:8px; text-align:center; }
.stat span{ display:block; color:var(--muted); font-size:9px; text-transform:uppercase; font-weight:900; letter-spacing:.05em; }
.stat strong{ display:block; margin-top:3px; font-size:22px; }
.stat.win strong{ color:var(--ok); }
.stat.loss strong{ color:var(--err); }
@media (max-width:760px){ .container{ padding:8px 6px; } header{ grid-template-columns:auto 1fr auto; gap:6px; } header img{ height:32px; } .btn{ padding:5px 8px; font-size:11px; } .consultas-page{ padding:12px 0 24px; } .search-form{ grid-template-columns:1fr; } .summary-box{ grid-template-columns:1fr; } .summary-stats{ justify-content:stretch; } .summary-count{ flex:1 1 82px; text-align:center; } .match-head{ display:block; } .match-date{ display:block; margin-top:5px; } .match-stats{ grid-template-columns:1fr; } }


.consultas-hero{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:start; }
.hero-copy{ min-width:0; }
.ranking-actions{ display:flex; gap:7px; align-items:center; justify-content:flex-end; padding-top:18px; flex-wrap:wrap; }
.ranking-btn{ min-width:70px; }
.ranking-btn.active{ background:linear-gradient(180deg,#ffd966 0%, #ffcc00 60%, #e5b300 100%); color:#1b1600; box-shadow:inset 0 -1px 0 #b28900, 0 1px 5px rgba(0,0,0,.4); }

.ranking-box{ background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 5px 12px #0006; margin:12px 0; padding:10px 12px; }
.ranking-head{ display:flex; justify-content:space-between; gap:10px; align-items:end; margin-bottom:8px; }
.ranking-title{ margin:0; color:var(--gold); font-size:16px; font-weight:900; text-transform:uppercase; }
.ranking-meta{ margin:2px 0 0; color:var(--muted); font-size:11px; }
.ranking-table-wrap{ overflow-x:auto; }
.ranking-table{ width:100%; border-collapse:collapse; font-size:11px; min-width:720px; }
.ranking-table th,.ranking-table td{ border-bottom:1px solid var(--line); padding:6px 7px; text-align:left; white-space:nowrap; }
.ranking-table th{ color:var(--gold); text-transform:uppercase; font-size:10px; letter-spacing:.05em; background:#101113; position:sticky; top:0; }
.ranking-table td.num,.ranking-table th.num{ text-align:right; }
.ranking-table .rank-pos{ color:var(--gold-soft); font-weight:900; }
.ranking-table .player-name{ color:#fff; font-weight:900; text-transform:uppercase; }
.ranking-table .team-name{ color:var(--muted); font-weight:700; text-transform:uppercase; }
.ranking-table .ok{ color:var(--ok); font-weight:900; }
.ranking-table .bad{ color:var(--err); font-weight:900; }
.ranking-empty{ color:var(--muted); font-size:12px; padding:8px 0; }

@media (max-width:760px){
  .consultas-hero{ grid-template-columns:1fr; }
  .ranking-actions{ justify-content:stretch; padding-top:0; }
  .ranking-btn{ flex:1; }
  .ranking-head{ display:block; }
}


.ranking-tabs{
  display:flex;
  gap:6px;
  align-items:center;
  margin-right:4px;
}
.tab-btn{ opacity:.68; }
.tab-btn.active{
  opacity:1;
  background:linear-gradient(180deg,#ffd966 0%, #ffcc00 60%, #e5b300 100%);
  color:#1b1600;
  box-shadow:inset 0 -1px 0 #b28900, 0 1px 5px rgba(0,0,0,.4);
}
.team-ranking-table{ min-width:680px; }
.team-ranking-table .team-main{ color:#fff; font-weight:900; }
.team-ranking-table .team-players{
  color:var(--muted);
  font-weight:700;
  max-width:360px;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width:760px){
  .ranking-tabs{ width:100%; margin-right:0; }
  .tab-btn{ flex:1; }
}

.hero-reload{
  min-height:86px;
  display:flex;
  align-items:center;
}
.reload-btn{
  min-width:130px;
  min-height:38px;
  font-size:13px;
}
@media (max-width:760px){
  .hero-reload{ min-height:auto; }
  .reload-btn{ width:100%; }
}