*{
    box-sizing:border-box;
}


body{

    margin:0;

    padding:30px;

    font-family:
    "Microsoft YaHei",
    Arial;

    background:#f5f7fb;

    color:#333;

}



h1{

    font-size:32px;

    margin-bottom:30px;

}





.btn{

    background:#1677ff;

    color:white;

    border:0;

    padding:12px 25px;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

}



.btn:hover{

    opacity:.85;

}





.box{

    background:white;

    padding:25px;

    margin-top:20px;

    width:420px;

    border-radius:12px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.1);


}




.box input,
.box textarea{


    width:100%;

    margin:8px 0;

    padding:12px;

    border:1px solid #ddd;

    border-radius:6px;


}



.box textarea{

    height:90px;

}





.box button{

    margin-top:15px;

}





table{


    width:100%;

    margin-top:30px;

    background:white;

    border-collapse:collapse;

    border-radius:10px;

    overflow:hidden;


}




th{


    background:#1677ff;

    color:white;

    padding:15px;


}



td{


    padding:15px;

    border-bottom:1px solid #eee;

    text-align:center;


}





td img{

    border-radius:8px;

    object-fit:cover;

}





td button{


    background:#1677ff;

    color:white;

    border:0;

    padding:8px 15px;

    border-radius:6px;

    cursor:pointer;

    margin:3px;


}



td button:last-child{


    background:#ff4d4f;


}






td button:hover{

    opacity:.8;

}