#export-container { max-width: 900px; margin: 0 auto; transition: width 0.3s ease; }

.bigTitle {
    margin-top: 40px !important;
}
        
.stat-card { 
    background: #fff; 
    border-radius: 16px; 
    padding: 24px; 
    margin-bottom: 20px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
}

.highlight-num { 
    font-size: 2.2rem; 
    font-weight: 800; 
    color: #1a1a1a; 
}

.sub-label { 
    color: #7f8c8d; 
    font-size: 0.9rem; 
    margin-top: 4px; 
}
        
/* 月视图滑动保护 */
.calendar-scroll-area { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }
.calendar-grid-container { min-width: 600px; /* 保证手机端不挤压 */ }
        
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.calendar-day-header { text-align: center; font-weight: 600; color: #adb5bd; font-size: 0.85rem; padding: 10px 0; }
.day-cell { 
    background: #fdfdfd; border: 1px solid #edf2f7; border-radius: 12px; 
    aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.day-cell.active { background-color: #e3f2fd; border-color: #90caf9; }
.day-cell.goal-reached { background-color: #e8f5e9; border-color: #a5d6a7; }
.day-num { font-size: 0.9rem; font-weight: 700; color: #4a5568; }
.day-time { font-size: 0.85rem; color: var(--primary-color); font-weight: 600; }

/* 图表容器限制 */
.chart-container { 
    position: relative; 
    height: 300px; 
    width: 100%; 
}

/* 悬浮按钮 */
.fab-container { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 999; width: auto; }
.btn-fab { border-radius: 50px; padding: 12px 30px; box-shadow: 0 10px 20px rgba(13,110,253,0.3); font-weight: bold; }

@media (max-width: 768px) {
    .highlight-num { font-size: 1.6rem; }
    .stat-card { padding: 16px; }
}

@media (max-width: 768px) {
    #sec-today .chart-container { 
        height: 400px; 
    }
    #sec-week .chart-container {
        height: 300px; 
    }
}

body.export-mode .fab-container {
    display: none !important;
}

body.export-mode #export-notice {
    display: block;
}

/* 强制PC模式的图表样式 */
@media screen and (max-width: 767px) {
    body.export-mode #sec-today .chart-container {
        height: 300px !important;
        width: 100% !important;
    }
    body.export-mode #export-container {
        width: 100% !important;
        max-width: none !important;
    }
}

/* --- 昵称设置弹窗样式 --- */
.custom-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 9999;
    display: none; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.custom-modal.active { display: flex; animation: fadeIn 0.2s ease-out; }
.modal-content-box {
    background: white; padding: 30px; border-radius: 16px; width: 90%; max-width: 400px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); text-align: center;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 昵称显示区域的可点击样式 */
.nickname-trigger {
    cursor: pointer; border-bottom: 1px dashed #aaa; transition: color 0.2s;
}
.nickname-trigger:hover { color: var(--primary-color); border-bottom-color: var(--primary-color); }