*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft Yahei",sans-serif;}
body{background:#f5f7fa;padding:10px;max-width:100%;margin:0 auto;}
h2{text-align:center;color:#222;margin-bottom:15px;font-size:clamp(16px,4vw,24px);}
.box{background:#fff;padding:12px;border-radius:8px;box-shadow:0 1px 6px #ddd;}

.table-wrap{width:100%;overflow-x:auto;}
table{width:100%;min-width:950px;border-collapse:collapse;}

input,select{padding:6px 8px;border:1px solid #ccc;border-radius:4px;outline:none;font-size:14px;}
input:focus,select:focus{border-color:#409eff;}
.btn{padding:6px 16px;border:none;border-radius:6px;cursor:pointer;margin:3px 6px;font-size:14px;transition:0.2s;}
.add-btn{background:#409eff;color:#fff;}
.del-all-btn{background:#f56c6c;color:#fff;}
.save-btn{background:#409eff;color:#fff;}
.cancel-btn{background:#909399;color:#fff;}
.btn:hover{opacity:0.9;}

.table-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:8px;}
.page-set span{margin-right:4px;font-size:14px;}

th,td{border:1px solid #ebeef5;padding:8px 5px;text-align:center;font-size:13px;}
th{background:#fafafa;user-select:none;}
.sort-th{cursor:pointer;white-space:nowrap;}
.arrow{margin-left:3px;color:#666;font-size:12px;}
tbody tr:hover{background:#f0f7ff;}

.page-wrap{display:flex;justify-content:space-between;align-items:center;margin-top:12px;flex-wrap:wrap;gap:8px;font-size:14px;}

/* 优化弹窗样式 */
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:none;justify-content:center;align-items:center;z-index:999;padding:10px;}
.modal-content{background:#fff;padding:25px;border-radius:12px;width:100%;max-width:520px;box-shadow:0 4px 20px rgba(0,0,0,0.15);}
.modal h3{text-align:center;margin-bottom:20px;font-size:18px;color:#333;}
.form-row{display:flex;align-items:center;margin-bottom:14px;}
.form-row label{width:70px;font-size:14px;color:#555;}
.form-row input,.form-row select{flex:1;}
.modal-btn{text-align:center;margin-top:20px;}

/* 手机适配 */
@media (max-width:768px){
    body{padding:8px;}
    .box{padding:10px;}
    th,td{padding:6px 3px;font-size:12px;}
    .btn{padding:5px 12px;font-size:13px;}
    .modal-content{padding:18px;}
    .form-row label{width:60px;font-size:13px;}
}