:root{
  --bg:#000;
  --panel:#0d0d0f;
  --line:#252525;
  --accent:#ff9900;
  --text:#f2f2f2;
  --muted:#9ca3af;
  --blue:#46b3ff;
}

body{
  margin:0;
  padding:14px;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,sans-serif;

  min-height:100vh;
  display:flex;
  flex-direction:column;
}

h1{
  text-align:left;
  color:var(--accent);
  font-size:52px;
  margin-top:0;
  margin-bottom:24px;
  line-height:1.05;
}

@media(max-width:700px){

  h1{
    font-size:32px;
    margin-bottom:18px;
  }

}

@media(max-width:700px){

  h1{
    font-size:34px;
    margin-bottom:24px;
  }

}

.panel{
  background:var(--panel);
  border-radius:28px;
  padding:18px;
  margin-bottom:18px;
}

@media(max-width:700px){

  .panel{
    padding:14px;
    margin-bottom:14px;
    border-radius:22px;
  }

}

.controls{
  display:flex;
  gap:12px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

input,select{
  flex:1;
  min-width:180px;
  padding:12px;
  background:#18181b;
  color:#fff;
  border:1px solid #34343a;
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03);
}

table{
  width:100%;
  border-collapse:collapse;
}

th,td{
  padding:14px 10px;
  border-bottom:1px solid var(--line);
  text-align:center;
}

th{
  color:var(--accent);
  font-size:20px;
}

@media(max-width:700px){

  th{
    font-size:18px;
  }

}

td{
  font-size:18px;
  vertical-align:middle;
}

td:first-child{
  font-size:15px;
}

button{
  background:#2a2a2a;
  color:#ddd;
  border:none;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:bold;
  margin:0 2px;
  transition:.2s;
}

.btn-set1-active{
  background:#46b3ff !important;
  color:#111 !important;
}

.btn-set2-active{
  background:#ff9900 !important;
  color:#111 !important;
}

.hex-container{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}

.hex-card{
  flex:1;
  min-width:320px;

  background:linear-gradient(
    180deg,
    #101014,
    #09090c
  );

  border-radius:28px;
  padding:24px;
  text-align:center;
  margin-bottom:20px;
  border:1px solid #1b1b22;

  box-shadow:
    0 0 24px rgba(0,0,0,.35);
}
.radar-card{
  flex:0 1 620px;
  max-width:620px;
  max-width:520px;
}
svg{
  max-width:100%;
}
.radar-card{

  border:1px solid rgba(218,76,126,.22);

  box-shadow:
    0 0 22px rgba(218,76,126,.10);
}
.grid{
  fill:none;
  stroke:#262626;
  stroke-width:1.4;
}

.axis{
  stroke:#262626;
  stroke-width:0.7;
}

.radar1{
  fill:rgba(70,179,255,.25);
  stroke:var(--blue);
  stroke-width:3;
}

.radar2{
  fill:rgba(255,153,0,.22);
  stroke:var(--accent);
  stroke-width:3;
}

.label{
  fill:#ddd;
  font-size:15px;
  text-anchor:middle;
  font-weight:bold;
}

.stat{
  fill:var(--blue);
  font-size:13px;
  text-anchor:middle;
  font-weight:bold;
}

.item-row{
  cursor:pointer;
  transition:.15s;
}

.item-row:hover{
  background:#161616;
}

.compare-blue{
  background:rgba(70,179,255,.12)!important;
  border-left:3px solid #46b3ff;
}

.compare-orange{
  background:rgba(255,153,0,.12)!important;
  border-left:3px solid #ff9900;
}

/* SCROLL DA TABELA */

.table-scroll{
  max-height:520px;
  overflow-y:auto;
  overflow-x:auto;

  border:1px solid #1f1f1f;
  border-radius:18px;

  background:#0b0b0b;
}

.table-scroll::-webkit-scrollbar{
  width:8px;
  height:8px;
}

.table-scroll::-webkit-scrollbar-track{
  background:#111;
}

.table-scroll::-webkit-scrollbar-thumb{
  background:#2c2c2c;
  border-radius:20px;
}

.table-scroll thead{
  position:sticky;
  top:0;
  z-index:5;
}

.table-scroll th{
  background:#0f0f0f;
}

.tabs{
  display:flex;
  gap:10px;
  justify-content:flex-start;
  margin-bottom:24px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:4px;
}

.tab-btn{
  background:#1a1a1a;
  color:#cfcfcf;
  border:1px solid #2a2a2a;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:bold;
  font-size:14px;
  white-space:nowrap;
  flex-shrink:0;
}

.tab-btn.active{
  background:var(--accent);
  color:#111;
}

.tab-content{
  display:none;
}

.tab-content.active{
  display:block;
}
.col-name{
  width:110px;
  max-width:110px;
}

.col-aug {
  display: none;
}

.top-bar{
  width:100%;
  display:flex;
  justify-content:flex-end;
  margin-bottom:6px;
}

.version-tag{
  font-size:13px;
  color:#fff;
  opacity:0.7;
}
.site-footer{
  text-align:center;
  padding:28px 16px;
  margin-top:40px;
  border-top:1px solid #1f1f1f;
  color:#9ca3af;
  font-size:8px;
  background:linear-gradient(180deg, transparent, rgba(13,13,15,0.8));
}

.footer-title{
  color:#f2f2f2;
  font-weight:bold;
  margin-bottom:6px;
}

.footer-content{
  line-height:1.6;
  max-width:700px;
  margin:0 auto;
}

.footer-link{
  color:#fff;
  text-decoration:none;
  font-weight:bold;
}

.menu-row{
  display:flex;
  justify-content:flex-end;
  position:relative;
  margin-bottom:10px;
}
.menu-btn{
  background:#111114;
  color:#fff;
  border:1px solid #222;
  border-radius:10px;
  padding:6px 12px;
  cursor:pointer;
}
.menu-dropdown{
  display:none;
  position:absolute;
  top:40px;
  right:0;
  min-width:180px;
  background:#111114;
  border:1px solid #222;
  border-radius:12px;
  overflow:hidden;
  z-index:999;
}
.menu-dropdown button{
  width:100%;
  padding:10px;
  border:none;
  background:none;
  color:#fff;
  text-align:left;
  cursor:pointer;
}
.menu-dropdown.show{
  display:block;
}