:root{
  --r-bg:#050a08;
  --r-panel:#09130e;
  --r-panel-2:#0c1913;
  --r-line:rgba(92,240,170,.15);
  --r-green:#5cf0aa;
  --r-cyan:#69e8dd;
  --r-text:#effaf4;
  --r-muted:#81988c;
  --r-danger:#ff748b;
  --r-shadow:0 30px 90px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{
  color:var(--r-text);
  background:
    radial-gradient(
      circle at 12% 5%,
      rgba(92,240,170,.1),
      transparent 27%
    ),
    radial-gradient(
      circle at 88% 8%,
      rgba(105,232,221,.07),
      transparent 25%
    ),
    linear-gradient(180deg,#050a08,#06100c);
  font-family:Inter,Segoe UI,Arial,sans-serif;
}
button{font:inherit}
a{color:inherit}
.ranking-topbar{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 clamp(17px,5vw,70px);
  border-bottom:1px solid var(--r-line);
  background:rgba(3,9,6,.88);
  backdrop-filter:blur(18px);
}
.ranking-brand{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
}
.ranking-brand img{width:43px;height:43px}
.ranking-brand strong{display:block;font-size:13px}
.ranking-brand small{
  display:block;
  margin-top:4px;
  color:var(--r-green);
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
}
.ranking-topbar nav{
  display:flex;
  gap:8px;
}
.ranking-topbar nav a{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--r-line);
  border-radius:10px;
  padding:0 12px;
  color:#9eb1a7;
  background:rgba(255,255,255,.015);
  font-size:8px;
  font-weight:900;
  text-decoration:none;
  text-transform:uppercase;
}
.ranking-topbar nav a:hover{
  color:#04100a;
  border-color:transparent;
  background:linear-gradient(
    100deg,
    var(--r-green),
    var(--r-cyan)
  );
}
.ranking-shell{
  width:min(1120px,calc(100% - 26px));
  margin:0 auto;
  padding:55px 0 90px;
}
.ranking-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
}
.ranking-heading>span>small{
  color:var(--r-green);
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.ranking-heading h1{
  margin:9px 0 10px;
  font-size:clamp(52px,9vw,92px);
  line-height:.88;
  letter-spacing:-.07em;
}
.ranking-heading p{
  max-width:650px;
  margin:0;
  color:var(--r-muted);
  font-size:12px;
  line-height:1.75;
}
.ranking-heading>aside{
  min-width:125px;
  border:1px solid var(--r-line);
  border-radius:17px;
  padding:15px;
  text-align:center;
  background:var(--r-panel);
}
.ranking-heading>aside small{
  display:block;
  color:#71877b;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
}
.ranking-heading>aside strong{
  display:block;
  margin-top:7px;
  color:var(--r-green);
  font-size:34px;
}
.ranking-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:26px 0 17px;
}
.ranking-tabs button{
  min-height:40px;
  border:1px solid var(--r-line);
  border-radius:10px;
  padding:0 13px;
  color:#91a69a;
  background:rgba(255,255,255,.015);
  cursor:pointer;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
}
.ranking-tabs button:hover,
.ranking-tabs button.active{
  color:#04100a;
  border-color:transparent;
  background:linear-gradient(
    100deg,
    var(--r-green),
    var(--r-cyan)
  );
}
.ranking-podium{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:end;
  gap:12px;
  margin-bottom:17px;
}
.podium-card{
  min-height:270px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  border:1px solid var(--r-line);
  border-radius:21px;
  padding:20px;
  text-align:center;
  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(92,240,170,.1),
      transparent 35%
    ),
    var(--r-panel);
  box-shadow:var(--r-shadow);
  text-decoration:none;
  transition:
    transform .18s ease,
    border-color .2s ease;
}
.podium-card:hover{
  transform:translateY(-5px);
  border-color:rgba(92,240,170,.4);
}
.podium-card.rank-1{
  min-height:310px;
  order:2;
  border-color:rgba(255,210,118,.35);
  background:
    radial-gradient(
      circle at 50% 12%,
      rgba(255,210,118,.15),
      transparent 37%
    ),
    var(--r-panel);
}
.podium-card.rank-2{order:1}
.podium-card.rank-3{order:3}
.podium-card>b{
  position:absolute;
  left:13px;
  top:12px;
  color:var(--r-green);
  font-size:12px;
}
.podium-card.rank-1>b{color:#ffd276}
.podium-avatar,
.ranking-avatar{
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  color:#04100a;
  background:linear-gradient(
    135deg,
    var(--r-green),
    var(--r-cyan)
  );
  font-weight:900;
}
.podium-avatar{
  width:92px;
  height:92px;
  margin-bottom:14px;
  font-size:22px;
}
.ranking-avatar{
  width:44px;
  height:44px;
  flex:0 0 44px;
  font-size:10px;
}
.podium-avatar img,
.ranking-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.podium-card>strong{
  font-size:16px;
}
.podium-card>small{
  margin-top:4px;
  color:#71877b;
  font-size:8px;
}
.podium-card>span{
  display:flex;
  gap:6px;
  margin-top:12px;
}
.podium-card>span i{
  border:1px solid var(--r-line);
  border-radius:999px;
  padding:5px 7px;
  color:var(--r-green);
  background:rgba(92,240,170,.04);
  font-size:7px;
  font-style:normal;
  font-weight:900;
}
.podium-card>p{
  margin:11px 0 0;
  color:#9db1a6;
  font-size:8px;
  text-transform:uppercase;
}
.ranking-list-panel{
  overflow:hidden;
  border:1px solid var(--r-line);
  border-radius:20px;
  background:var(--r-panel);
  box-shadow:var(--r-shadow);
}
.ranking-list-panel>header,
.ranking-row{
  display:grid;
  grid-template-columns:70px minmax(0,1fr) 110px 130px;
  align-items:center;
  gap:12px;
}
.ranking-list-panel>header{
  min-height:47px;
  padding:0 16px;
  border-bottom:1px solid var(--r-line);
  color:#6f867a;
  font-size:7px;
  font-weight:900;
  text-transform:uppercase;
}
.ranking-row{
  min-height:72px;
  padding:10px 16px;
  border-bottom:1px solid rgba(255,255,255,.04);
  text-decoration:none;
  transition:
    transform .15s ease,
    background .2s ease;
}
.ranking-row:last-child{border-bottom:0}
.ranking-row:hover{
  transform:translateX(3px);
  background:rgba(92,240,170,.045);
}
.ranking-row>b{
  color:#71877b;
  font-size:10px;
}
.ranking-member{
  min-width:0;
  display:flex;
  align-items:center;
  gap:11px;
}
.ranking-member>span{
  min-width:0;
}
.ranking-member strong{
  display:block;
  overflow:hidden;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ranking-member small{
  display:block;
  overflow:hidden;
  margin-top:4px;
  color:#71877b;
  font-size:7px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ranking-level,
.ranking-reputation{
  color:var(--r-green);
  font-size:13px;
}
.ranking-reputation{
  color:var(--r-cyan);
}
.ranking-loading{
  min-height:180px;
  display:grid;
  place-items:center;
  padding:30px;
  color:#71877b;
  font-size:10px;
  text-align:center;
}
.ranking-loading.error{color:var(--r-danger)}

/* Molduras e nomes do ranking */
.frame-orbit{
  box-shadow:
    0 0 0 2px rgba(92,240,170,.45),
    0 0 0 5px rgba(92,240,170,.07),
    0 0 18px rgba(92,240,170,.35);
}
.frame-neon{
  box-shadow:
    0 0 0 2px var(--r-green),
    0 0 0 5px rgba(105,232,221,.22),
    0 0 22px rgba(105,232,221,.42);
}
.frame-arcane{
  border-radius:50% 24% 50% 24%;
  box-shadow:
    0 0 0 2px #d9ba77,
    0 0 0 5px rgba(217,186,119,.1),
    0 0 20px rgba(217,186,119,.35);
}
.frame-observer{
  box-shadow:
    -3px 0 0 #ff7089,
    3px 0 0 #73e5df,
    0 0 20px rgba(255,112,137,.32);
}
.frame-solar{
  box-shadow:
    0 0 0 2px #ffd276,
    0 0 0 6px rgba(255,210,118,.1),
    0 0 25px rgba(255,190,74,.48);
}
.frame-void{
  box-shadow:
    0 0 0 2px #8f70ff,
    0 0 0 6px rgba(111,82,209,.12),
    0 0 25px rgba(111,82,209,.5);
}
.name-glow{
  color:var(--r-green);
  text-shadow:0 0 11px rgba(92,240,170,.5);
}
.name-pulse{color:var(--r-green)}
.name-hologram{
  color:#8ff5e9;
  text-shadow:
    -1px 0 #ff7089,
    1px 0 #73e5df;
}
.name-stellar,
.name-glitch,
.name-aurora{
  color:transparent;
  background:linear-gradient(
    90deg,
    var(--r-green),
    #ffd276,
    #d889ff,
    var(--r-cyan)
  );
  background-clip:text;
  -webkit-background-clip:text;
}
@media(max-width:760px){
  .ranking-heading{
    align-items:flex-start;
    flex-direction:column;
  }
  .ranking-podium{
    grid-template-columns:1fr;
  }
  .podium-card.rank-1,
  .podium-card.rank-2,
  .podium-card.rank-3{
    min-height:230px;
    order:initial;
  }
  .ranking-list-panel>header{
    display:none;
  }
  .ranking-row{
    grid-template-columns:42px minmax(0,1fr) 55px;
  }
  .ranking-reputation{
    display:none;
  }
}
@media(max-width:520px){
  .ranking-topbar nav a:first-child{display:none}
}
@media(prefers-reduced-motion:reduce){
  .podium-card,
  .ranking-row{
    transition:none;
  }
}


/* ETAPA 10.4 — Fundador no ranking */
.ranking-avatar.frame-founder,
.podium-avatar.frame-founder{
  padding:4px;
  background:
    conic-gradient(
      #63f0ad,
      #f4d58d,
      #d49e3c,
      #63f0ad
    );
  box-shadow:
    0 0 0 2px #06100c,
    0 0 0 4px rgba(229,191,114,.22),
    0 0 22px rgba(99,240,173,.25);
}

.ranking-avatar.frame-founder img,
.podium-avatar.frame-founder img{
  border:2px solid #07110b;
}

.ranking-owner-badge{
  min-height:18px;
  display:inline-flex;
  align-items:center;
  margin-left:6px;
  border:1px solid rgba(229,191,114,.3);
  border-radius:999px;
  padding:0 6px;
  color:#f1d58d;
  background:rgba(229,191,114,.08);
  font-size:5px;
  font-style:normal;
  font-weight:950;
  letter-spacing:.07em;
  vertical-align:middle;
}

.ranking-site-owner{
  border-color:rgba(229,191,114,.26) !important;
  background:
    linear-gradient(
      100deg,
      rgba(99,240,173,.045),
      rgba(229,191,114,.06)
    ) !important;
}

.ranking-site-owner:hover{
  border-color:rgba(229,191,114,.48) !important;
}