@font-face {
    font-family: 'CustombyFont';
    src: url('font/zt.ttf') format('truetype');
    font-display: swap;
    
}
.tabs,.search-container{display:flex;margin-bottom:20px}
.tabs{border-bottom:1px solid #ddd}
.search-container{gap:10px;justify-content:flex-end}
.tab-btn,.search-btn,.reset-btn{padding:8px 15px;border:1px solid #ddd;border-radius:4px;cursor:pointer}
.tab-btn{padding:10px 20px;background:none;font-size:22px;color:#cccbcb;font-family: 'CustombyFont', sans-serif}
.tab-btn.active{color:#000000;font-size:22px;border-bottom:2px solid #ffffff;}
.search-btn{background-color:#f5f5f5;font-family: 'CustombyFont', sans-serif}
.search-btn:hover{background-color:#e0e0e0}
.reset-btn{background-color:#e8e8e8;color:#880707;font-family: 'CustombyFont', sans-serif}
.reset-btn:hover{background-color:#d8d8d8}
.search-bar{padding:8px;border:1px solid #ddd;border-radius:4px}
.projects-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.project-card,.stat-card{background-color:#fff;box-shadow:0 2px 5px rgba(133, 132, 132, 0.1)}
.project-card{border-radius:0;padding:10px 15px;display:flex;align-items:center;cursor:pointer;transition:all 0.3s ease;height:70px;box-sizing:border-box;margin:0}
.project-card:hover{background-color:#f0f8ff}
.description-tooltip{position:fixed;bottom:0;left:0;right:0;background-color:rgba(228, 225, 225, 0.85);color:#020202;padding:12px 18px;z-index:9999;display:none;max-height:30vh;overflow-y:auto;font-size:14px;transition:opacity 1s ease;}
.project-icon{width:40px;height:40px;margin-right:15px;background-size:cover;background-position:center}
.project-info{flex:1}
.project-name{font-weight:bold;margin-bottom:0;line-height:1.2}
.project-desc{color:#666;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}
.pagination{display:flex;justify-content:center;margin-top:20px;gap:5px}
.page-btn{padding:5px 10px;border:1px solid #ddd;background:white;cursor:pointer;border-radius:3px;margin:0 2px}
.page-btn.active{background:#333;color:white;border-color:#333}
.stats-container{padding:20px}
.last-updated{color:#666;font-size:14px;margin-bottom:20px;text-align:right}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-bottom:20px}
.stat-card{border-radius:0;padding:15px;text-align:center}
.stat-card h3{color:#444343;margin-bottom:10px;font-size:16px}
.stat-card p{font-size:20px;font-weight:bold;color:#000}
.stats-charts{display:grid;grid-template-columns:1fr;gap:15px}
.chart-container{height:250px;width:auto;background-color:#f8f8f8;border-radius:0;padding:15px;margin-bottom:15px}
.avatar{width:120px;height:120px;border-radius:50%;background-image:url('image/avatar.webp');background-size:cover;background-position:center;margin-bottom:20px;border:3px solid #eee}
.other-btn{ display: inline-block;padding: 8px 16px;margin-right: 12px;background: #f5f5f5;text-decoration: none;color: #333;border: 1px solid #ddd;border-radius: 4px;font-family: "CustombyFont", sans-serif}
.foot{position: fixed; bottom: 0;padding: 12px 0;display: flex;}
#foots{width: auto;text-align: center;display: flex;display: inline-block;}
.afoot{display: none;}

/* 暗色主题 - 使用filter:invert(1) */
body.dark-theme {filter: invert(1) hue-rotate(180deg);}
body.dark-theme .card{border: 1px solid #fff;}
/* 确保图片不被反转 - 使用none而不是再次反转 */
body.dark-theme img,body.dark-theme .project-icon,body.dark-theme .avatar {filter: invert(1) hue-rotate(180deg);}

/* 主题切换按钮样式 */
.theme-toggle-btn {background-color: #f5f5f5;font-family: 'CustombyFont', sans-serif;margin-left: auto;margin-right: 5px;margin-bottom: 10px;font-size: 20px;padding: 8px 15px;border: 1px solid #ddd;border-radius: 4px;cursor: pointer;}
.theme-toggle-btn:hover {background-color: #e0e0e0;}

/* 移动端适配 - 768px以下 */
@media (max-width: 768px) {
    body {flex-direction: column;font-size: 15px;}
    .sidebar {width: 100%;padding: 12px;}
    .projects-container {grid-template-columns: 1fr;gap: 8px;}
    .project-card {height: auto;min-height: 60px;padding: 12px;}
    .project-desc {white-space: nowrap;overflow: hidden;text-overflow: ellipsis; max-width: 180px;font-size: 13px;}
    .last-updated {text-align: center;margin-bottom: 12px;font-size: 13px;}
    .stats-grid {grid-template-columns: 1fr;gap: 8px;}
    .stats-charts {grid-template-columns: 1fr;gap: 12px;}
    .chart-container {height: 40vh;min-height: 200px;max-height: 300px;padding: 16px;margin-bottom: 16px;}
    .chart-container h3 {font-size: clamp(14px, 4vw, 16px);margin-bottom: 12px;padding-bottom: 8px;}
    .stat-card {padding: 12px;margin-bottom: 12px;min-height: 80px;display: flex;flex-direction: column;justify-content: center;}
    .stat-card h3 {font-size: 15px;margin-bottom: 8px;white-space: normal;text-align: center;}
    .stat-card p {font-size: 20px;text-align: center;font-weight: bold;}
    .stat-item {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 8px;margin-bottom: 8px;}
    .stat-item h3 {margin: 0;min-width: 90px;font-size: 15px;flex: 1;text-align: left;}
    .stat-item p {font-size: 16px;margin: 0;flex: 1;text-align: right;font-weight: bold;}
    .stats-container h2 {text-align: center;font-size: 18px;margin-bottom: 16px;}
    .main-content {padding: 15px;}
    .tabs { margin-bottom: 15px;}
    .tab-btn {padding: 8px 15px; font-size: 15px; min-width: 80px;}
    .description-tooltip{padding: 0;display: none; visibility: hidden;pointer-events: none;overflow: hidden;white-space: nowrap;max-width: 480px;} 
    .tab-btn{padding:10px 20px;background:none;font-size:18px;color:#bdbcbc;font-family: 'CustombyFont', sans-serif}
    .tab-btn.active{color:#000000;font-size:18px;border-bottom:2px solid #ffffff;} 
    #foots{display: none;}
    .afoot{display: block;text-align: center; gap: 30px;font-size: 13px;}
    .aafoot{  color: #ccc;cursor: not-allowed; text-decoration: none;}

    
}
/* 移动端适配 - 480px以下 */ 
@media (max-width: 480px) {
    .tab-btn{padding:10px 20px;background:none;font-size:10px;color:#a8a8a8;font-family: 'CustombyFont', sans-serif}
    .tab-btn.active{color:#000000;font-size:10px;border-bottom:2px solid #ffffff;}  
    .chart-container {height: 35vh;min-height: 200px;padding: 12px;}
    .chart-container h3 {font-size: clamp(13px, 4vw, 15px);} 
    .stat-card { min-height: 70px;}
    .stat-card h3 { font-size: 14px;} 
    .stat-card p {font-size: 18px;}
    .description-tooltip{display: none;visibility: hidden; pointer-events: none;overflow: hidden;white-space: nowrap; } 
}