/* === 容器层 === */
#insp-layer {
    position: fixed;
    top: 0; left: 0;
    width: 100%; /* Fix: 100vw -> 100% 防止横向滚动 */
    height: 100vh;
    background: #FFFFFF;
    z-index: 9999;
    display: none;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Montserrat', sans-serif;
    overflow: hidden; /* 锁死容器溢出 */
}
#insp-layer.active {
    display: flex;
    opacity: 1;
}

/* === 氛围装饰 (雪花/细线) === */
.insp-bg-deco {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
/* 竖线向两侧推开，避开中间文字区域 */
.insp-line-v {
    top: 0; bottom: 0; width: 1px;
    background: rgba(0,0,0,0.0);
}
.insp-line-h {
    left: 0; right: 0; height: 1px;
    background: rgba(0,0,0,0.03);
}
/* 抽象雪花 */
.insp-snow {
    width: 6px; height: 6px;
    background: #E3F2FD;
    border-radius: 50%;
    position: absolute;
    opacity: 0.6; /* 增加一点不透明度 */
}

/* === 顶部栏 === */
.insp-header {
    height: 85px;
    display: flex;
    align-items: flex-end;
    padding: 0 24px 20px;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 60%, rgba(255,255,255,0));
    flex-shrink: 0; /* 防止被挤压 */
}
.insp-title {
    font-size: 24px;
    font-weight: 200;
    color: #2C3E50;
    letter-spacing: -0.5px;
}
.insp-subtitle {
    font-size: 10px;
    color: #B0BEC5;
    margin-left: 11px;
    margin-top: 4px; 
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 300;
}
.insp-close {
    margin-left: auto;
    padding: 10px;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s;
}
.insp-close:hover { opacity: 1; }

/* === 滚动内容区 === */
.insp-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 100px; /* 底部留白 */
    z-index: 1;
    scrollbar-width: none; /* Hide scrollbar */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* 防止连带父级滚动 */
}
.insp-scroll-area::-webkit-scrollbar { display: none; }

/* === 数据概览卡片 === */
.insp-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 35px;
    margin-top: -15px;
}
.insp-card {
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.04);
    background: rgba(250,250,250,0.5);
    border-radius: 2px;
}
.insp-val {
    font-size: 28px;
    font-weight: 200;
    color: #37474F;
}
.insp-label {
    font-size: 10px;
    color: #90A4AE;
    margin-top: 4px;
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* === 日历热力图与导航 === */
.insp-section-title {
    font-size: 12px;
    font-weight: 400;
    color: #37474F;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}
.insp-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0,0,0,0.05);
    margin-left: 12px;
}

/* 月份导航栏 [ < ] [ 2025 DEC ] [ > ] */
.insp-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 4px;
}
.insp-nav-btn {
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
    color: #90A4AE;
    user-select: none;
}
.insp-nav-btn:hover {
    background: #F5F5F5;
    color: #546E7A;
}
/* 中间的下拉选择器 */
.insp-month-select-wrapper {
    position: relative;
}
.insp-month-select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 13.6px;
    font-weight: 300;
    color: #455A64;
    text-align: center;
    cursor: pointer;
    padding: 4px 24px 4px 8px; /* 右侧留给箭头 */
}
.insp-month-select:focus { outline: none; }
/* 自定义小箭头 */
.insp-month-select-wrapper::after {
    content: '▾';
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #B0BEC5;
    pointer-events: none;
}

/* 日历容器 */
.insp-calendar-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 240px; /* 预留高度防止跳动 */
}

/* 星期表头 (新增) */
.insp-week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}
.insp-week-day {
    font-size: 9px;
    color: #CFD8DC;
    text-align: center;
}

/* 日期网格 */
.insp-day-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.insp-day-cell {
    aspect-ratio: 1;
    border-radius: 4px; /* 稍微圆润一点 */
    background: #F9FAFB; /* 默认空状态：极淡灰 */
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.insp-day-cell:active { transform: scale(0.92); }

.insp-day-num {
    position: absolute;
    top: 4px; left: 4px;
    font-size: 9px;
    color: #CFD8DC; /* 默认浅灰 */
    font-weight: 400;
}
.insp-day-info {
    position: absolute;
    bottom: 2px; right: 4px;
    font-size: 8px;
    font-weight: 600;
    color: rgba(0,0,0,0.3);
}


/* === 颜色配置：极淡冷灰紫系 (8级阶梯) === */ /* 核心原则：只动明度(Lightness)和不透明度，不动色相，保持高级感 */ /* Lv 1 (1-10): 似有若无的晨雾 */ .insp-day-cell.lvl-1 { background: #F5F7FA; } /* Lv 2 (11-30): 极淡的霜色 */ .insp-day-cell.lvl-2 { background: #ECEFF1; } /* Lv 3 (31-60): 浅灰紫 */ .insp-day-cell.lvl-3 { background: #E8EAF6; } /* Lv 4 (61-100): 雾霾蓝紫 */ .insp-day-cell.lvl-4 { background: #C5CAE9; } /* Lv 5 (101-200): 灰蓝 */ .insp-day-cell.lvl-5 { background: #9FA8DA; } .insp-day-cell.lvl-5 .insp-day-num { color: #FFF; } /* Lv 6 (201-300): 矢车菊蓝 (开始加深) */ .insp-day-cell.lvl-6 { background: #7986CB; } .insp-day-cell.lvl-6 .insp-day-num { color: #FFF; } /* Lv 7 (301-?): 深紫灰 */ .insp-day-cell.lvl-7 { background: #5C6BC0; } .insp-day-cell.lvl-7 .insp-day-num { color: #FFF; } /* Lv 8 (Max): 且深的夜色 */ .insp-day-cell.lvl-8 { background: #3949AB; } .insp-day-cell.lvl-8 .insp-day-num { color: #FFF; }

.insp-day-cell.lvl-max .insp-day-num { color: #FFF; }
.insp-day-cell.lvl-max .insp-day-info { color: rgba(255,255,255,0.8); }


.insp-day-num {
    position: absolute;
    top: 2px; left: 3px;
    font-size: 8px;
    color: #CFD8DC;
}
.insp-day-info {
    position: absolute;
    bottom: 2px; right: 3px;
    font-size: 7px;
    font-weight: 600;
    color: rgba(0,0,0,0.3);
}

/* === 功能按钮区 === */
.insp-actions {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.insp-btn {
    width: 100%;
    padding: 16px;
    background: transparent;
    border: 1px solid rgba(0,0,0,0.06);
    color: rgba(84, 110, 122, 0.8);
    font-size: 12px;
    font-weight: 400;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.insp-btn:hover {
    background: #FAFAFA;
    border-color: rgba(0,0,0,0.1);
}
.insp-btn.danger {
    color: rgba(239, 83, 80, 0.6);;
    border-color: rgba(239, 83, 80, 0.1);
}
.insp-btn.danger:hover {
    background: #FFEBEE;
}