*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Microsoft YaHei','PingFang SC',sans-serif;background:#f0f2f5;color:#333;font-size:14px}

/* ==================== Navbar ==================== */
.navbar{background:linear-gradient(135deg,#1a5276,#2980b9);color:#fff;display:flex;align-items:center;padding:0 20px;min-height:50px;box-shadow:0 2px 8px rgba(0,0,0,0.15);position:fixed;top:0;left:0;right:0;z-index:100;flex-wrap:wrap}
.nav-brand{font-size:17px;font-weight:700;margin-right:30px;white-space:nowrap;padding:12px 0}
.nav-links{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.nav-links .nav-btn{color:rgba(255,255,255,0.85);text-decoration:none;padding:6px 14px;border-radius:6px;font-size:13px;transition:all 0.2s;white-space:nowrap;cursor:pointer;background:none;border:none;font-family:inherit}
.nav-links .nav-btn:hover{background:rgba(255,255,255,0.15);color:#fff}
.nav-links .nav-btn.active{background:rgba(255,255,255,0.25);color:#fff;font-weight:600}
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:8px 4px;margin-left:auto;line-height:1}

/* 内容区偏移导航栏高度 */
body{padding-top:50px}
#main-content{max-width:1400px;margin:0 auto;padding:16px}

/* Mobile */
@media(max-width:768px){
.navbar{position:fixed}
.nav-toggle{display:block}
.nav-links{display:none;width:100%;flex-direction:column;padding:8px 0 12px;gap:2px}
.nav-links.open{display:flex}
.nav-links .nav-btn{padding:10px 14px;width:100%;text-align:left;border-radius:4px}
.nav-brand{font-size:15px}
}
.card{background:#fff;border-radius:10px;padding:20px;margin-bottom:16px;box-shadow:0 1px 6px rgba(0,0,0,0.06)}
.card h3{font-size:15px;margin-bottom:12px;color:#1a5276;border-left:3px solid #2980b9;padding-left:10px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.kpi-card{background:#f8faff;border-radius:8px;padding:14px;text-align:center;border:1px solid #e8edf5}
.kpi-card .label{font-size:11px;color:#888;margin-bottom:4px}
.kpi-card .value{font-size:22px;font-weight:700;color:#1a5276}
.kpi-card .value.green{color:#27ae60}
.kpi-card .value.orange{color:#e67e22}
.kpi-card .value.red{color:#e74c3c}
table{width:100%;border-collapse:collapse;font-size:12px}
th{background:#1a5276;color:#fff;padding:8px 6px;font-size:11px;white-space:nowrap;text-align:center}
td{padding:6px;border-bottom:1px solid #eee;text-align:center}
tr.even{background:#fafafa}
tr:hover{background:#eef5ff}
td.num{text-align:right;font-family:monospace}
td.money{text-align:right;font-family:monospace;padding-right:10px}
.table-wrap{overflow-x:auto;border-radius:8px;border:1px solid #e0e0e0}
.search-bar{display:flex;gap:8px;margin-bottom:12px;align-items:center;flex-wrap:wrap}
.search-bar input{padding:6px 12px;border:1px solid #d0d0d0;border-radius:6px;font-size:13px;width:200px}
.search-bar input:focus{outline:none;border-color:#2980b9;box-shadow:0 0 0 2px rgba(41,128,185,0.2)}
.btn{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border:none;border-radius:6px;font-size:13px;cursor:pointer;transition:all 0.2s;text-decoration:none}
.btn-primary{background:#2980b9;color:#fff}
.btn-primary:hover{background:#1a5276}
.btn-success{background:#27ae60;color:#fff}
.btn-success:hover{background:#1e8449}
.btn-warning{background:#e67e22;color:#fff}
.btn-warning:hover{background:#d35400}
.btn-danger{background:#e74c3c;color:#fff}
.btn-danger:hover{background:#c0392b}
.btn-sm{padding:4px 10px;font-size:11px}
.btn-outline{background:transparent;border:1px solid #2980b9;color:#2980b9}
.btn-outline:hover{background:#2980b9;color:#fff}
.btn-info{background:#3498db;color:#fff}
.btn-info:hover{background:#2980b9}
.action-bar{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}
.pagination{display:flex;gap:4px;align-items:center;margin-top:10px}
.pagination span{padding:4px 10px;background:#fff;border:1px solid #ddd;border-radius:4px;cursor:pointer;font-size:12px}
.pagination span.active{background:#2980b9;color:#fff;border-color:#2980b9}
.pagination span:hover:not(.active){background:#f0f0f0}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px}
.badge-green{background:#d4edda;color:#155724}
.badge-red{background:#f8d7da;color:#721c24}
.badge-yellow{background:#fff3cd;color:#856404}
.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal-content{background:#fff;border-radius:12px;padding:24px;min-width:400px;max-width:600px;max-height:80vh;overflow-y:auto}
.modal-content h3{margin-bottom:16px;color:#1a5276}
.modal-content .form-group{margin-bottom:12px}
.modal-content .form-group label{display:block;font-size:12px;color:#666;margin-bottom:3px}
.modal-content .form-group input,.modal-content .form-group select{width:100%;padding:6px 10px;border:1px solid #d0d0d0;border-radius:6px;font-size:13px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.status-bar{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0}
.status-item{display:flex;align-items:center;gap:6px;font-size:13px}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.invoice-table{width:100%}
.invoice-table th{background:#1a5276}
.invoice-table td{font-size:12px}
.month-checkboxes{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.month-checkboxes label{display:inline-flex;align-items:center;gap:2px;font-size:11px;cursor:pointer}
.month-checkboxes input[type=checkbox]{width:14px;height:14px;cursor:pointer}
.inv-link{color:#2980b9;text-decoration:none;cursor:pointer}
.inv-link:hover{text-decoration:underline}