body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#f2f2f7;
}
.app{
  padding-bottom:80px;
}
header{
  padding:16px;
  text-align:center;
  font-size:18px;
  font-weight:600;
}
.card{
  background:#eaf6f6;
  margin:12px;
  padding:16px;
  border-radius:16px;
}
.summary{
  display:flex;
  justify-content:space-between;
  text-align:center;
}
.summary div strong{
  display:block;
  font-size:18px;
}
.summary span{
  font-size:12px;
  color:#666;
}
.donut{
  width:200px;
  height:200px;
  margin:16px auto;
  border-radius:50%;
  background:conic-gradient(#4f8df7 0 56%, #e0528f 56% 70%, #b23a48 70% 79%, #f2a93b 79% 85%, #ddd 85%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.donut span{
  background:#eaf6f6;
  width:90px;
  height:90px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
}
.legend{
  list-style:none;
  padding:0;
}
.legend li{
  display:flex;
  align-items:center;
  font-size:14px;
  margin:4px 0;
}
.legend span{
  width:12px;
  height:12px;
  border-radius:3px;
  margin-right:8px;
}
.c1{background:#4f8df7}
.c2{background:#e0528f}
.c3{background:#b23a48}
.c4{background:#f2a93b}

.tabbar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:60px;
  background:#fff;
  display:flex;
  border-top:1px solid #ddd;
}
.tabbar button{
  flex:1;
  border:none;
  background:none;
  font-size:12px;
}
.tabbar .active{
  color:#3a9d8f;
  font-weight:600;
}