*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Microsoft Yahei",sans-serif;background:#f7f7f9;color:#333;font-size:14px}
a{color:#ff6b9d;text-decoration:none}

/* 通用容器 */
.container{max-width:1200px;margin:0 auto;padding:20px}
.card{background:#fff;border-radius:10px;padding:20px;margin-bottom:20px;box-shadow:0 2px 12px rgba(0,0,0,0.05)}
.page-title{font-size:20px;font-weight:600;margin-bottom:20px;color:#222}

/* 按钮 */
.btn{display:inline-block;padding:8px 18px;border:none;border-radius:6px;cursor:pointer;font-size:14px;transition:0.2s}
.btn-primary{background:#ff6b9d;color:#fff}
.btn-primary:hover{background:#ff5588}
.btn-default{background:#f0f0f0;color:#333}
.btn-default:hover{background:#e5e5e5}
.btn-danger{background:#f56c6c;color:#fff}
.btn-danger:hover{background:#e64340}
.btn-sm{padding:5px 12px;font-size:12px}

/* 表单 */
.form-group{margin-bottom:15px}
.form-group label{display:block;margin-bottom:6px;color:#555}
.form-input{width:100%;height:38px;padding:0 12px;border:1px solid #ddd;border-radius:6px;outline:none}
.form-input:focus{border-color:#ff6b9d}

/* 表格 */
table{width:100%;border-collapse:collapse}
th,td{padding:12px;text-align:center;border-bottom:1px solid #f0f0f0}
th{background:#fafafa;font-weight:500;color:#666}
tr:hover{background:#fafafa}

/* 标签 */
.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px}
.tag-success{background:#e1f3d8;color:#67c23a}
.tag-warning{background:#faecd8;color:#e6a23c}
.tag-primary{background:#ecf5ff;color:#409eff}

/* 弹窗 */
.modal-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:999}
.modal-mask.show{display:flex}
.modal-box{background:#fff;border-radius:10px;width:90%;max-width:500px;padding:25px;max-height:90vh;overflow-y:auto}
.modal-title{font-size:18px;font-weight:600;margin-bottom:20px}
.modal-footer{margin-top:25px;text-align:right;display:flex;gap:10px;justify-content:flex-end}

/* 工具栏 */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:15px;flex-wrap:wrap}
.search-input{height:36px;padding:0 12px;border:1px solid #ddd;border-radius:6px;width:200px;outline:none}

/* 分页 */
.pagination{margin-top:20px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.page-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer}
.page-btn:disabled{opacity:0.5;cursor:not-allowed}
.page-input{width:60px;height:32px;border:1px solid #ddd;border-radius:4px;padding:0 8px;text-align:center}

/* 提示 */
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);padding:10px 20px;border-radius:6px;color:#fff;z-index:9999;animation:fadeIn 0.3s}
.toast.success{background:#67c23a}
.toast.error{background:#f56c6c}
.toast.warning{background:#e6a23c}
.toast.info{background:#409eff}
@keyframes fadeIn{from{opacity:0;top:0}to{opacity:1;top:20px}}

/* 前台首页 */
.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:15px}
.file-item{background:#fff;border-radius:10px;padding:18px;transition:0.2s;cursor:pointer}
.file-item:hover{transform:translateY(-3px);box-shadow:0 5px 20px rgba(0,0,0,0.08)}
.file-name{font-size:15px;font-weight:500;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-meta{color:#999;font-size:12px;margin-bottom:12px;display:flex;justify-content:space-between}

/* 导航 */
.nav{background:#fff;padding:15px 20px;box-shadow:0 2px 8px rgba(0,0,0,0.05);margin-bottom:20px;display:flex;justify-content:space-between;align-items:center}
.nav-title{font-size:18px;font-weight:600;color:#ff6b9d}
.nav-right{display:flex;gap:15px;align-items:center}

/* 后台标签 */
.tab-bar{display:flex;gap:5px;margin-bottom:20px;border-bottom:2px solid #f0f0f0}
.tab-item{padding:10px 20px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px}
.tab-item.active{color:#ff6b9d;border-bottom-color:#ff6b9d;font-weight:500}

/* 移动端适配 */
@media(max-width:768px){
    .container{padding:10px}
    .file-grid{grid-template-columns:1fr}
    .toolbar{flex-direction:column;align-items:stretch}
    .search-input{width:100%}
    table{font-size:12px}
    th,td{padding:8px 4px}
}