* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}
body { 
    background: #0f172a; 
    color: #e2e8f0; 
    font-family: -apple-system, sans-serif; 
    padding: 16px; 
    font-size: 14px; 
}
.Top_Title { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 20px;
    background: #090909;
    border-bottom: 1px solid #151515;
}
.Top_Img img { 
    width: 60px; 
    height: 60px; 
}
.Top_Symbol { 
    font-size: 40px; 
    font-weight: bold; 
}
.Top_Name {
    font-size: 18px;
    color: #f97316;
}
.Top_Number {
    font-size: 40px;
    font-weight: bold;
    color: #11b981;
}
.Top_Box {
    background: #000;
    border: 1px solid #191919;
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 20px;
    margin: 20px;
}

table { 
    width: 100%; 
    font-size: 16px;
    border-collapse: collapse; 
}
th, td { 
    padding: 10px 40px; 
    text-align: left; 
    border-bottom: 1px solid #151515; 
}
.Top_Box tr:last-child td{
    border: 0px;
}
th { 
    color: #fff; 
    font-weight: normal; 
}
.Top_List {
    padding: 20px;
    font-size: 16px;
}
.Top_List th {
    background: #000;
    border-top: 1px solid #151515;
    color: #fff;
    padding: 15px 40px;
}
.Top_List td {
    color: #888;
    padding: 15px 40px;
}

.bar-cell { position: relative; }
.bar  { height: 16px; background: #3b82f6 !important; border-radius: 2px; }
.bar1 { height: 16px; background: #10b981 !important; border-radius: 2px; }
.bar2 { height: 16px; background: #f59e0b !important; border-radius: 2px; }
.bar3 { height: 16px; background: #f97316 !important; border-radius: 2px; }
.top  { color: #f59e0b !important; font-weight: bold; }
.top1 { color: #10b981 !important; font-weight: bold; }
.top2 { color: #f59e0b !important; font-weight: bold; }
.top3 { color: #f97316 !important; font-weight: bold; }
.muted { color: #64748b !important; font-size: 12px; }