SOURCE

*{box-sizing:border-box;margin:0;padding:0;font-family:"Microsoft YaHei",sans-serif;}
body{background:#F5F7FA;color:#333;}
.header{width:100%;height:60px;background:#1677FF;color:#fff;line-height:60px;padding:0 24px;position:fixed;top:0;left:0;z-index:99;}
.sider{width:240px;background:#fff;position:fixed;top:60px;left:0;bottom:0;border-right:1px solid #E5E6EB;}
.sider a{display:block;padding:14px 24px;color:#333;text-decoration:none;font-size:14px;}
.sider a.active{background:#E5E6EB;color:#1677FF;font-weight:500;}
.content{margin-left:240px;margin-top:60px;padding:24px;}
.card{background:#fff;border-radius:8px;border:1px solid #E5E6EB;padding:20px;margin-bottom:20px;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
.video-box{background:#fff;border:1px solid #E5E6EB;border-radius:8px;padding:12px;text-align:center;height:240px;}
.btn{padding:8px 16px;background:#1677FF;color:#fff;border:none;border-radius:4px;cursor:pointer;}
.btn-danger{background:#FF4D4F;}
.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.3);display:none;z-index:998;}
.popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:520px;background:#fff;border-radius:10px;padding:24px;box-shadow:0 4px 20px rgba(0,0,0,.15);display:none;z-index:999;}