/********************************************
 * Xdir 站点更新日志 · 专业时间轴（v2.0.4 重构）
 *
 * 设计要点：
 *   - 全部样式收在 .xd-cl-* / .xd-date-* / .xds-* 命名空间内，不触碰全局元素与 body
 *     （旧 time-axis.css 含 *{margin:0;padding:0} 与 #glideDiv0{position:fixed}，
 *       会顶掉主题 body 的 72px 顶栏留白、把标题钉在视口顶部与导航栏重叠）
 *   - 页面结构：页头 → 概览统计 → 类型筛选 → 卡片式时间轴
 *   - 每条记录为独立卡片，左侧竖线 + 轴点，卡片内为类型标签 + 标题 + 说明
 *   - 补齐暗黑模式（.night）与移动端（≤700px）适配
 *
 * 编译：Xdir 旗舰版 2026-10-29
 ********************************************/

/* ---------- 容器 ---------- */
.xd-cl-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 8px 20px 14px;
}

/* ---------- 页头 ---------- */
.xd-cl-head { text-align: center; margin: 14px auto 26px; }
.xd-cl-h1 {
    display: inline-block; margin: 0;
    font-size: 30px; font-weight: 700; letter-spacing: 2.5px;
    line-height: 1.5; color: #E64545;
}
.xd-cl-badge {
    display: inline-block; vertical-align: super; margin-left: 8px;
    padding: 1px 8px; border-radius: 4px;
    background: #fff; color: #E64545;
    font-size: 12.5px; font-weight: 600; letter-spacing: 0;
    box-shadow: 0 0 0 1px rgba(230, 69, 69, .28);
}
.xd-cl-sub { margin: 8px 0 0; font-size: 13px; color: #98a3ae; letter-spacing: .5px; }

/* ---------- 概览统计 ---------- */
.xd-cl-stats { display: flex; gap: 12px; margin-bottom: 18px; }
.xd-cl-stat {
    flex: 1 1 0; min-width: 0;
    padding: 14px 10px; text-align: center;
    background: #fafcff; border: 1px solid #e8eff8; border-radius: 12px;
}
.xds-num {
    display: block; font-size: 22px; font-weight: 700; color: #1E9FFF;
    line-height: 1.3; font-variant-numeric: tabular-nums;
}
.xds-num.xds-date { font-size: 17px; letter-spacing: .5px; }
.xds-lbl { display: block; margin-top: 3px; font-size: 12px; color: #90a0b2; }

/* ---------- 类型筛选 ---------- */
.xd-cl-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.xdf-btn {
    padding: 6px 13px; border-radius: 20px; cursor: pointer;
    border: 1px solid #e2eaf4; background: #fff; color: #5b6b7b;
    font-size: 13px; line-height: 1.4; transition: all .18s ease;
}
.xdf-btn b { font-weight: 600; opacity: .7; margin-left: 2px; }
.xdf-btn:hover { border-color: #bcd9f7; color: #1E9FFF; background: #f6fbff; }
.xdf-btn.active {
    background: #1E9FFF; border-color: #1E9FFF; color: #fff;
    box-shadow: 0 3px 10px rgba(30, 159, 255, .25);
}
.xdf-btn.active b { opacity: .9; }

/* ---------- 时间轴主轴 ---------- */
.xd-cl-axis {
    position: relative; margin: 0; padding: 0 0 0 132px;
    list-style: none;
}
.xd-cl-axis::before {
    content: ''; position: absolute; left: 109px; top: 8px; bottom: 8px;
    width: 2px; border-radius: 1px;
    background: linear-gradient(180deg, #dbe8f6, #eef4fa);
}

/* ---------- 单条记录 ---------- */
.xd-cl-item { position: relative; list-style: none; margin: 0 0 14px; padding: 0; }

/* 轴点：外圈光晕 + 实心点 */
.xd-cl-dot {
    /* 相对 li 左移 29px：li 起点 = axis 内容起点（padding-left 132），
       轴点中心落在 axis 左缘 + 122px，正好压在 109px 处的竖线上（见下方 ::before）。
       初版写成 left:103px 落在卡片内部，与竖线错开 133px。 */
    position: absolute; left: -29px; top: 20px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid #9fc9f0;
    box-shadow: 0 0 0 3px rgba(30, 159, 255, .09);
    z-index: 1;
}
.xd-cl-item:hover .xd-cl-dot { border-color: #1E9FFF; box-shadow: 0 0 0 4px rgba(30, 159, 255, .16); }

/* 日期（轴左侧） */
.xd-cl-date {
    /* 负偏移到轴线左侧的留白区（li 起点之前），不再与卡片重叠 */
    position: absolute; left: -132px; top: 17px;
    width: 94px; text-align: right;
    font-size: 12.5px; color: #8a97a5;
    font-variant-numeric: tabular-nums; letter-spacing: .2px;
    line-height: 1.6;
}
.xd-cl-item:hover .xd-cl-date { color: #1E9FFF; }

/* 卡片 */
.xd-cl-card {
    padding: 13px 16px;
    background: #fff;
    border: 1px solid #e9eff6;
    border-radius: 12px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.xd-cl-item:hover .xd-cl-card {
    border-color: #cfe3fa;
    box-shadow: 0 6px 20px rgba(30, 159, 255, .08);
    transform: translateY(-1px);
}
.xd-cl-card-top { margin-bottom: 6px; }
.xd-cl-title {
    font-size: 14.5px; line-height: 1.75; color: #26313d;
    word-break: break-word;
}
.xd-cl-ach {
    margin: 6px 0 0; font-size: 13px; line-height: 1.75;
    color: #7c8794; word-break: break-word;
}

/* ---------- 类型标签 ---------- */
.xd-cl-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 5px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
    border: 1px solid transparent;
}
.xd-cl-tag i { font-size: 11px; }
.xdt-version   { color: #7a4bd0; background: #f2ecfd; border-color: #e3d8fb; }
.xdt-feature   { color: #12805c; background: #e8f8f1; border-color: #cceedf; }
.xdt-optimize  { color: #1667b8; background: #e9f3fd; border-color: #d3e6fa; }
.xdt-fix       { color: #c25a00; background: #fef2e6; border-color: #fbe0c4; }
.xdt-important { color: #d03050; background: #fdecef; border-color: #fad4dc; }
.xdt-other     { color: #5f6b78; background: #f2f5f8; border-color: #e4eaf0; }

/* 筛选按钮的彩色描边（与标签同色系） */
.xdf-btn.xdf-version:hover   { border-color: #d9c8f8; color: #7a4bd0; }
.xdf-btn.xdf-feature:hover   { border-color: #c3e9da; color: #12805c; }
.xdf-btn.xdf-optimize:hover  { border-color: #c9e2fa; color: #1667b8; }
.xdf-btn.xdf-fix:hover       { border-color: #f8d9b9; color: #c25a00; }
.xdf-btn.xdf-important:hover { border-color: #f7c8d3; color: #d03050; }

/* ---------- 空态 / 无匹配 ---------- */
.xd-cl-empty { padding: 64px 20px; text-align: center; color: #b6c0cb; }
.xd-cl-empty i { display: block; font-size: 36px; margin-bottom: 14px; opacity: .5; }
.xd-cl-empty-t { font-size: 15px; color: #8d99a6; margin-bottom: 6px; }
.xd-cl-empty-s { font-size: 13px; }

.xd-cl-nomore {
    padding: 34px 20px; text-align: center;
    font-size: 13.5px; color: #a9b4c0;
}
.xd-cl-nomore i { margin-right: 5px; color: #c3cdd8; }

/* ---------- 暗黑模式 ---------- */
.night .xd-cl-h1 { color: #ff8080; }
.night .xd-cl-badge { background: #232a32; color: #ff8080; box-shadow: 0 0 0 1px rgba(255, 128, 128, .32); }
.night .xd-cl-sub { color: #7c8794; }

.night .xd-cl-stat { background: #1c242e; border-color: #2a3543; }
.night .xds-num { color: #6db3ff; }
.night .xds-lbl { color: #7c8b9c; }

.night .xdf-btn { background: #1c242e; border-color: #2c3846; color: #a8b6c4; }
.night .xdf-btn:hover { background: #223040; border-color: #3a5470; color: #6db3ff; }
.night .xdf-btn.active { background: #1E9FFF; border-color: #1E9FFF; color: #fff; }

.night .xd-cl-axis::before { background: linear-gradient(180deg, #2b3a4a, #223040); }
.night .xd-cl-dot { background: #1b222b; border-color: #3f5a78; box-shadow: 0 0 0 3px rgba(109, 179, 255, .1); }
.night .xd-cl-item:hover .xd-cl-dot { border-color: #6db3ff; box-shadow: 0 0 0 4px rgba(109, 179, 255, .18); }
.night .xd-cl-date { color: #8695a6; }
.night .xd-cl-item:hover .xd-cl-date { color: #6db3ff; }

.night .xd-cl-card { background: #1b232d; border-color: #28333f; }
.night .xd-cl-item:hover .xd-cl-card { border-color: #35506c; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.night .xd-cl-title { color: #dfe7ef; }
.night .xd-cl-ach { color: #8d99a6; }

.night .xdt-version   { color: #c4a6ff; background: #2a2340; border-color: #3d3358; }
.night .xdt-feature   { color: #5fd6ab; background: #17332a; border-color: #235040; }
.night .xdt-optimize  { color: #7fc0ff; background: #17293d; border-color: #274663; }
.night .xdt-fix       { color: #ffb066; background: #35281a; border-color: #54402a; }
.night .xdt-important { color: #ff8fa4; background: #3a1f26; border-color: #5a3038; }
.night .xdt-other     { color: #9aa8b6; background: #232b34; border-color: #333d48; }

.night .xd-cl-empty { color: #6b7683; }
.night .xd-cl-nomore { color: #7c8794; }

/* ---------- 移动端：轴点靠左、日期移到卡片上方 ---------- */
@media (max-width: 700px) {
    .xd-cl-wrap { padding: 6px 14px 12px; }
    .xd-cl-h1 { font-size: 21px; letter-spacing: 1.2px; }
    .xd-cl-sub { font-size: 12px; }
    .xd-cl-head { margin: 12px auto 20px; }

    .xd-cl-stats { gap: 8px; margin-bottom: 14px; }
    .xd-cl-stat { padding: 11px 6px; border-radius: 10px; }
    .xds-num { font-size: 18px; }
    .xds-num.xds-date { font-size: 13px; }
    .xds-lbl { font-size: 11px; }

    .xd-cl-filter { gap: 6px; margin-bottom: 16px; }
    .xdf-btn { padding: 5px 10px; font-size: 12px; }

    .xd-cl-axis { padding-left: 26px; }
    .xd-cl-axis::before { left: 6px; top: 4px; bottom: 4px; }
    .xd-cl-item { margin-bottom: 12px; }
    .xd-cl-dot { left: -25px; top: 4px; width: 11px; height: 11px; }
    .xd-cl-date {
        position: static; width: auto; text-align: left;
        margin-bottom: 5px; font-size: 12px; padding-left: 0;
    }
    .xd-cl-card { padding: 11px 13px; border-radius: 10px; }
    .xd-cl-title { font-size: 13.5px; line-height: 1.7; }
    .xd-cl-ach { font-size: 12.5px; }
}