<style>
*{box-sizing:border-box;margin:0;padding:0;}
body{
    background:#f5f7fa;
    font-family:"Microsoft Yahei",sans-serif;
    color:#333;
}
.record-wrap{
    max-width:1200px;
    margin:0 auto;
    padding:40px 20px;
}
.record-title{
    text-align:center;
    font-size:28px;
    color:#111;
    margin-bottom:30px;
    font-weight:bold;
}
.record-info{
    background:#fff;
    border-radius:8px;
    padding:30px;
    box-shadow:0 2px 12px rgba(0,0,0,0.05);
    margin-bottom:40px;
}
.record-info h3{
    font-size:22px;
    margin-bottom:20px;
    border-left:4px solid #2563eb;
    padding-left:12px;
}
.table-wrap{
    width:100%;
    overflow-x:auto;
}
.record-table{
    width:100%;
    border-collapse:collapse;
    min-width:600px;
}
.record-table th,
.record-table td{
    border:1px solid #e5e7eb;
    padding:14px 16px;
    font-size:16px;
}
.record-table th{
    background:#f8fafc;
    width:180px;
    font-weight:bold;
    text-align:left;
}
.record-table td{
    word-break:break-all;
}
.record-img-box{
    text-align:center;
    margin-top:40px;
}
.record-img-box img{
    max-width:100%;
    border:1px solid #ddd;
    box-shadow:0 2px 12px rgba(0,0,0,0.08);
    opacity:0.2;
    transition:opacity 0.4s ease;
}
.record-img-box img.loaded{
    opacity:1;
}
@media(max-width:768px){
    .record-wrap{
        padding:20px 12px;
    }
    .record-title{
        font-size:22px;
    }
    .record-info{
        padding:20px 15px;
    }
    .record-info h3{
        font-size:18px;
    }
    .record-table th,.record-table td{
        padding:10px;
        font-size:14px;
    }
    .record-table th{
        width:120px;
    }
}
</style>