*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background-color:#f5f7fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.6}.page{width:1200px;max-width:100%;margin:0 auto;padding:20px}header{border-bottom:1px solid #ebeef5;justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}header a{color:#409eff;font-weight:500;text-decoration:none}header a:hover{text-decoration:underline}.container{background-color:#fff;border-radius:8px;margin-bottom:20px;padding:30px;box-shadow:0 2px 12px rgba(0,0,0,.1)}h1{color:#303133;margin-bottom:0;font-size:28px}.intro{color:#606266;margin-bottom:10px;font-size:16px}.drop-area{text-align:center;cursor:pointer;background-color:#fafafa;border:2px dashed #d9d9d9;border-radius:8px;margin-bottom:20px;padding:1px 0 20px;transition:all .3s}.drop-area:hover{background-color:#f0f9ff;border-color:#409eff}.drop-area.dragover{background-color:#ecf5ff;border-color:#409eff}.drop-area .icon{color:#c0c4cc;margin-bottom:15px;font-size:48px}.drop-area .text{color:#606266;margin-bottom:10px;font-size:14px}.drop-area .hint{color:#909399;font-size:13px}.file-list{max-height:200px;margin:20px 0;overflow-y:auto}.file-item{background-color:#f5f7fa;border-radius:4px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:8px 12px;display:flex}.file-item .name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.file-item .size{color:#909399;margin-left:10px;font-size:12px}.options{margin:20px 0}.buttons{flex-wrap:wrap;gap:10px;margin:20px 0;display:flex}.el-button{min-width:7em}.excel-btn{color:#fff!important;background-color:#107c41!important;border-color:#107c41!important}.excel-btn:hover{background-color:#0e5e32!important;border-color:#0e5e32!important}.result-area{margin-top:30px}.result-area h2{color:#303133;margin-bottom:15px;font-size:20px}.result-textarea{resize:vertical;border:1px solid #dcdfe6;border-radius:4px;width:100%;min-height:120px;padding:15px;font-family:monospace}.demo-section{padding-top:10px}.demo-section h2{color:#303133;margin-bottom:15px;font-size:20px}.demo-container{justify-content:space-between;height:200px;margin-top:20px;display:flex;position:relative}.file-explorer{background-color:#f0f0f0;border:1px solid #ccc;border-radius:4px;width:45%;height:100%;position:relative;overflow:hidden}.file-explorer .header{background-color:#e0e0e0;border-bottom:1px solid #ccc;padding:5px 10px;font-size:12px}.file-explorer .content{padding:10px}.file-item-demo{background-color:#fff;border-radius:3px;margin:5px 0;padding:5px;font-size:12px}.webpage{background-color:#fff;border:1px solid #ccc;border-radius:4px;width:45%;height:100%;position:relative;overflow:hidden}.webpage .header{color:#fff;background-color:#409eff;padding:5px 10px;font-size:12px}.webpage .content{flex-direction:column;justify-content:center;align-items:center;height:calc(100% - 30px);padding:10px;display:flex}.drop-area-demo{border:2px dashed #d9d9d9;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;width:80%;height:60%;display:flex}.drag-files{color:#fff;z-index:10;cursor:move;background-color:rgba(64,158,255,.7);border-radius:4px;justify-content:center;align-items:center;width:100px;height:30px;font-size:12px;display:flex;position:absolute}.drag-files:after{content:"3 Files"}.result-demo{border:1px solid #dcdfe6;width:80%;height:20%;margin-top:10px;padding:5px;font-size:10px;overflow:hidden}.result-demo:before{content:"file1.txtnfile2.jpgnfile3.pdf";white-space:pre}.copy-notification{color:#fff;opacity:0;background-color:#67c23a;border-radius:4px;padding:5px 10px;font-size:12px;transition:opacity .3s;position:absolute;top:10px;right:10px}.copy-notification.show{opacity:1}footer{text-align:center;color:#909399;border-top:1px solid #ebeef5;padding:20px 0;font-size:14px}footer a{color:#409eff;margin:0 10px;text-decoration:none}footer a:hover{text-decoration:underline}@keyframes dragAnimation{0%{top:50%;left:10%}50%{top:30%;left:50%}to{top:50%;left:65%}}.drag-files{animation:5s infinite dragAnimation}@media (max-width:768px){.page{width:100%;padding:10px}.container{padding:20px}.demo-container{flex-direction:column;height:400px}.file-explorer,.webpage{width:100%;height:45%}.drag-files{animation:none}}.hidden-tips{display:none}.language-nav{font-size:12px}