*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Microsoft YaHei",sans-serif;background:#f5f6fa;color:#333;}

/* 主布局 */
.layout{display:flex;min-height:100vh;}
.sidebar{width:220px;background:linear-gradient(180deg,#2c3e50 0%,#34495e 100%);color:#fff;flex-shrink:0;position:fixed;left:0;top:0;bottom:0;z-index:100;overflow-y:auto;}
.sidebar .logo{padding:20px;text-align:center;font-size:22px;font-weight:bold;border-bottom:1px solid rgba(255,255,255,.1);letter-spacing:2px;}
.sidebar .user-info{padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px;}
.sidebar .user-info .role-tag{display:inline-block;background:rgba(255,255,255,.2);padding:2px 8px;border-radius:10px;margin-top:4px;font-size:11px;}
.sidebar nav{margin-top:10px;}
.sidebar nav a{display:flex;align-items:center;padding:12px 20px;color:rgba(255,255,255,.7);text-decoration:none;font-size:14px;transition:all .2s;border-left:3px solid transparent;}
.sidebar nav a:hover,.sidebar nav a.active{background:rgba(255,255,255,.1);color:#fff;border-left-color:#3498db;}
.sidebar nav a .nav-icon{margin-right:10px;font-size:16px;width:20px;text-align:center;}
.sidebar .submenu{padding-left:15px;display:none;}
.sidebar .submenu.open{display:block;}
.sidebar .submenu a{font-size:13px;padding:8px 20px;}

.main-content{margin-left:220px;flex:1;display:flex;flex-direction:column;}
.topbar{height:56px;background:#fff;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:50;}
.topbar .breadcrumb{font-size:14px;color:#666;}
.topbar .actions{display:flex;align-items:center;gap:15px;}
.topbar .actions .btn{font-size:13px;}
.page-content{padding:24px;flex:1;}

/* 卡片 */
.card{background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.08);padding:20px;margin-bottom:20px;}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.card-header h3{font-size:16px;font-weight:600;}

/* 按钮 */
.btn{display:inline-block;padding:8px 16px;border-radius:6px;border:none;cursor:pointer;font-size:14px;transition:all .2s;text-decoration:none;text-align:center;}
.btn-primary{background:#3498db;color:#fff;}
.btn-primary:hover{background:#2980b9;}
.btn-success{background:#27ae60;color:#fff;}
.btn-success:hover{background:#219a52;}
.btn-warning{background:#f39c12;color:#fff;}
.btn-warning:hover{background:#d68910;}
.btn-danger{background:#e74c3c;color:#fff;}
.btn-danger:hover{background:#c0392b;}
.btn-sm{padding:5px 10px;font-size:12px;}
.btn-outline{background:transparent;border:1px solid #ddd;color:#666;}
.btn-outline:hover{border-color:#3498db;color:#3498db;}
.btn-group{display:flex;gap:8px;}

/* 表格 */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
table th{background:#fafafa;padding:12px 10px;text-align:left;font-weight:600;border-bottom:2px solid #e8e8e8;white-space:nowrap;}
table td{padding:10px;border-bottom:1px solid #f0f0f0;}
table tr:hover{background:#f8f9ff;}

/* 表单 */
.form-group{margin-bottom:16px;}
.form-group label{display:block;margin-bottom:5px;font-size:13px;font-weight:500;color:#555;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-size:13px;transition:border .3s;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#3498db;outline:none;box-shadow:0 0 0 2px rgba(52,152,219,.15);}
.form-group textarea{resize:vertical;min-height:80px;}
.form-inline{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;}
.form-inline .form-group{margin-bottom:0;}

/* 搜索栏 */
.search-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px;}
.search-bar .form-group{margin-bottom:0;}
.search-bar input,.search-bar select{padding:7px 12px;font-size:13px;}

/* 标签 */
.tag{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;}
.tag-primary{background:#e3f2fd;color:#1976d2;}
.tag-success{background:#e8f5e9;color:#388e3c;}
.tag-warning{background:#fff3e0;color:#f57c00;}
.tag-danger{background:#ffebee;color:#d32f2f;}
.tag-info{background:#e0f7fa;color:#00838f;}

/* 统计卡片 */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px;}
.stat-card{background:#fff;border-radius:8px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.08);display:flex;align-items:center;gap:16px;}
.stat-card .stat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;}
.stat-card .stat-icon.blue{background:#e3f2fd;color:#1976d2;}
.stat-card .stat-icon.green{background:#e8f5e9;color:#388e3c;}
.stat-card .stat-icon.orange{background:#fff3e0;color:#f57c00;}
.stat-card .stat-icon.purple{background:#f3e5f5;color:#7b1fa2;}
.stat-card .stat-value{font-size:28px;font-weight:bold;color:#333;}
.stat-card .stat-label{font-size:13px;color:#999;margin-top:2px;}

/* 图表网格 */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:20px;margin-bottom:20px;}
.chart-card{background:#fff;border-radius:8px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.chart-card h4{font-size:15px;font-weight:600;margin-bottom:15px;}
.chart-bars{display:flex;flex-direction:column;gap:10px;}
.chart-bar-item{display:flex;align-items:center;gap:10px;}
.chart-bar-item .bar-label{width:80px;font-size:12px;color:#666;text-align:right;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chart-bar-item .bar-track{flex:1;background:#f0f0f0;border-radius:4px;height:22px;position:relative;overflow:hidden;}
.chart-bar-item .bar-fill{height:100%;border-radius:4px;transition:width .5s;display:flex;align-items:center;padding-left:8px;font-size:11px;color:#fff;min-width:fit-content;}
.chart-bar-item .bar-count{font-size:12px;color:#999;width:36px;flex-shrink:0;}

/* 分页 */
.pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:16px;}
.pagination button{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:13px;}
.pagination button:hover{border-color:#3498db;color:#3498db;}
.pagination button.active{background:#3498db;color:#fff;border-color:#3498db;}
.pagination button:disabled{opacity:.5;cursor:not-allowed;}
.pagination .page-info{font-size:13px;color:#666;margin:0 8px;}

/* 模态框 */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;}
.modal{background:#fff;border-radius:12px;width:90%;max-width:600px;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);}
.modal.wide{max-width:800px;}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #eee;}
.modal-header h3{font-size:16px;}
.modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:#999;padding:4px;line-height:1;}
.modal-close:hover{color:#333;}
.modal-body{padding:20px;}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid #eee;}

/* Toast */
.toast{position:fixed;top:20px;right:20px;padding:12px 24px;border-radius:6px;color:#fff;font-size:14px;z-index:2000;animation:slideIn .3s;box-shadow:0 4px 12px rgba(0,0,0,.15);}
.toast-success{background:#27ae60;}
.toast-error{background:#e74c3c;}
.toast-info{background:#3498db;}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* 颜色条 */
.bar-blue{background:linear-gradient(90deg,#3498db,#5dade2);}
.bar-green{background:linear-gradient(90deg,#27ae60,#58d68d);}
.bar-orange{background:linear-gradient(90deg,#e67e22,#f0b27a);}
.bar-purple{background:linear-gradient(90deg,#8e44ad,#af7ac5);}
.bar-red{background:linear-gradient(90deg,#e74c3c,#f1948a);}
.bar-teal{background:linear-gradient(90deg,#1abc9c,#76d7c4);}

/* 响应式 */
@media(max-width:768px){
    .sidebar{width:180px;}
    .main-content{margin-left:180px;}
    .chart-grid{grid-template-columns:1fr;}
    .stat-cards{grid-template-columns:repeat(2,1fr);}
    .modal{width:95%;}
}