.heatmap-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; }
    .year-select { min-width: 110px; max-width: 150px; }
    .heatmap-container { overflow-x: auto; padding: 4px 0 10px; }
    .heatmap { display: grid; grid-template-rows: repeat(7, 1fr); gap: 4px; grid-auto-flow: column; }
    .heatmap-cell { width: 19px; height: 19px; border-radius: 5px; background: #e3e9e5; cursor: pointer; transition: .15s; position: relative; }
    .heatmap-cell:hover { outline: 2px solid #8aa494; transform: scale(1.12); z-index: 2; }
    .heatmap-cell.level-1 { background: #bfe5ca; }
    .heatmap-cell.level-2 { background: #79c98f; }
    .heatmap-cell.level-3 { background: #36a766; }
    .heatmap-cell.level-4 { background: #16633d; }
    .heatmap-cell.future { cursor: not-allowed; opacity: .38; }
    .heatmap-cell.has-note::before {
        content: '';
        position: absolute;
        right: 2px;
        bottom: 2px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #f6c85f;
        box-shadow: 0 0 0 1px rgba(255,255,255,.85);
    }
    .heatmap-cell::after {
        content: attr(data-date) ' · 打卡 ' attr(data-count) ' 次' attr(data-note);
        position: absolute;
        top: -32px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(15,25,20,.9);
        color: #fff;
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 6px;
        display: none;
        white-space: nowrap;
        z-index: 10;
        pointer-events: none;
    }
    .heatmap-cell:hover::after { display: block; }
    .heatmap-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 8px; padding: 0 4px; font-weight: 800; min-width: 1040px; }
    .weekday-labels { position: absolute; left: -30px; top: 0; display: flex; flex-direction: column; justify-content: space-around; height: 100%; font-size: 12px; color: var(--muted); font-weight: 800; }
    .heatmap-wrapper { position: relative; padding-left: 35px; width: max-content; }
    .stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 20px; }
    .stat-card { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 10px; text-align: center; }
    .stat-value { font-size: 24px; font-weight: 700; color: var(--accent); margin-bottom: 5px; }
    .stat-label { font-size: 12px; color: var(--muted); font-weight: 750; }