/* 网站动态（site-release.php）：列表页 /updates/ 与首页「最新动态」卡片
   字号一律用 px：主题 bootstrap 把 html 定为 10px，rem 会整体缩小。
   配色跟随站点：.rl-light（善解人衣 / 纯AI版，粉色浅色）、.rl-dark（果体AI，深色橙粉）。 */
.rl-root, .rl-root * { box-sizing: border-box; }
.rl-root {
    --rl-surface: #fff; --rl-surface-2: #fdf2f6; --rl-text: #333; --rl-muted: #666; --rl-muted-2: #999;
    --rl-accent: #e91e63; --rl-accent-soft: #ffb3c6;
    --rl-grad: linear-gradient(135deg, #ff6b9d 0%, #c850c0 50%, #a855f7 100%);
    --rl-line: rgba(0, 0, 0, .07); --rl-shadow: 0 4px 18px rgba(255, 107, 157, .12); --rl-tl: #eadfe6;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Helvetica, Arial, sans-serif;
    font-size: 15px; line-height: 1.6; color: var(--rl-text);
}
.rl-root.rl-dark {
    --rl-surface: #15151f; --rl-surface-2: #1c1b2a; --rl-text: #f2f2f6; --rl-muted: #a7a7b8; --rl-muted-2: #6e6e80;
    --rl-accent: #f0467e; --rl-accent-soft: #5a2340;
    --rl-grad: linear-gradient(135deg, #ff6a3d 0%, #f0467e 100%);
    --rl-line: rgba(255, 255, 255, .08); --rl-shadow: 0 6px 24px rgba(0, 0, 0, .4); --rl-tl: #2a2a3a;
}
.rl-root a { text-decoration: none; color: inherit; }
.rl-root a:hover { text-decoration: none; }
.rl-root img { max-width: 100%; }

/* ===== 角标 ===== */
.rl-bd { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; line-height: 1; }
.rl-bd-feature { background: rgba(233, 30, 99, .12); color: #e91e63; }
.rl-bd-update  { background: rgba(59, 130, 246, .12); color: #2563eb; }
.rl-bd-notice  { background: rgba(245, 158, 11, .15); color: #b45309; }
.rl-bd-event   { background: rgba(16, 185, 129, .13); color: #059669; }
.rl-bd-live    { background: rgba(16, 185, 129, .1); color: #059669; font-weight: 600; }
.rl-bd-end     { background: rgba(120, 120, 120, .15); color: #888; }
.rl-bd-pin     { background: var(--rl-grad); color: #fff; }
.rl-dark .rl-bd-feature { background: rgba(240, 70, 126, .2); color: #ff7aa6; }
.rl-dark .rl-bd-update  { background: rgba(59, 130, 246, .2); color: #7fb0ff; }
.rl-dark .rl-bd-notice  { background: rgba(245, 158, 11, .2); color: #ffc36b; }
.rl-dark .rl-bd-event, .rl-dark .rl-bd-live { background: rgba(16, 185, 129, .2); color: #5fe3b3; }

/* ===== 列表页 ===== */
.rl-page-wrap { width: min(860px, 100%); margin: 0 auto; padding: 0 0 30px; }
.rl-head { padding: 28px 0 14px; }
.rl-head h1 { margin: 0 0 6px; font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--rl-text); }
.rl-head h1 small { font-size: 14px; font-weight: 500; color: var(--rl-muted-2); }
.rl-head p { margin: 0; color: var(--rl-muted); font-size: 14px; }
.rl-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 8px; }
.rl-tabs a { height: 34px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 100px; border: 1px solid var(--rl-line); background: var(--rl-surface); font-size: 13.5px; color: var(--rl-muted); font-weight: 600; transition: .2s; }
.rl-tabs a:hover { border-color: var(--rl-accent-soft); color: var(--rl-accent); }
.rl-tabs a.on { background: var(--rl-grad); color: #fff; border-color: transparent; box-shadow: var(--rl-shadow); }
.rl-tabs .rl-cnt { margin-left: 6px; opacity: .7; font-weight: 500; }

.rl-pinned { margin: 18px 0 8px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--rl-line); background: var(--rl-surface-2); display: flex; gap: 14px; align-items: flex-start; }
.rl-pinned__ic { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--rl-grad); display: grid; place-items: center; color: #fff; }
.rl-pinned__main { flex: 1; min-width: 0; }
.rl-pinned__title { margin: 0 0 3px; font-size: 16px; font-weight: 800; line-height: 1.4; color: var(--rl-text); }
.rl-pinned__body { margin-top: 4px; }
.rl-pinned .rl-meta { margin-bottom: 6px; }
.rl-pinned__go { margin-left: auto; flex: none; align-self: center; }

.rl-tl { position: relative; padding: 12px 0 20px; }
.rl-month { position: sticky; top: 70px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin: 26px 0 12px; padding: 5px 12px 5px 8px; border-radius: 100px; background: var(--rl-surface); border: 1px solid var(--rl-line); font-size: 13px; font-weight: 800; color: var(--rl-text); }
.rl-month:first-child { margin-top: 8px; }
.rl-month b { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rl-grad); }
.rl-items { position: relative; margin: 0; padding: 0 0 0 30px; list-style: none; border-left: 2px solid var(--rl-tl); }
.rl-item { position: relative; margin: 0 0 14px; }
.rl-item::before { content: ""; position: absolute; left: -37px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--rl-surface); border: 3px solid var(--rl-accent-soft); }
.rl-items .rl-item:first-child::before { background: var(--rl-accent); border-color: var(--rl-surface); box-shadow: 0 0 0 3px var(--rl-accent-soft); }
.rl-card { display: block; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--rl-line); background: var(--rl-surface); transition: box-shadow .2s, border-color .2s; }
.rl-card:hover { box-shadow: var(--rl-shadow); border-color: var(--rl-accent-soft); }
.rl-target .rl-card, .rl-pinned.rl-target { border-color: var(--rl-accent); box-shadow: 0 0 0 3px var(--rl-accent-soft); }
.rl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-size: 12.5px; color: var(--rl-muted-2); margin-bottom: 6px; }
.rl-meta time { font-variant-numeric: tabular-nums; font-weight: 600; }
.rl-title { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.4; color: var(--rl-text); }
.rl-title--link { color: var(--rl-accent); }
.rl-title--link::after { content: " ↗"; font-weight: 500; font-size: 14px; opacity: .7; }
.rl-body { margin: 8px 0 0; color: var(--rl-muted); font-size: 14px; }
.rl-body p { margin: 0 0 6px; }
.rl-body p:last-child { margin-bottom: 0; }
.rl-body ul, .rl-body ol { margin: 4px 0 6px; padding-left: 18px; }
.rl-body li { margin: 2px 0; }
.rl-body a { color: var(--rl-accent); text-decoration: underline; text-underline-offset: 2px; }
.rl-body img { display: block; height: auto; max-width: 100%; border-radius: 12px; margin: 8px 0; }
.rl-body strong { color: var(--rl-text); }
.rl-row { display: flex; gap: 16px; align-items: flex-start; }
.rl-row .rl-body { flex: 1; min-width: 0; }
.rl-thumb { flex: none; width: 168px; height: 106px; border-radius: 12px; border: 1px solid var(--rl-line); overflow: hidden; margin-top: 8px; background: var(--rl-surface-2); }
.rl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-acts { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.rl-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 100px; background: var(--rl-grad); color: #fff !important; font-size: 13px; font-weight: 700; box-shadow: var(--rl-shadow); transition: transform .2s; }
.rl-btn:hover { transform: translateY(-1px); color: #fff !important; }
.rl-more { display: inline-block; margin-top: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--rl-accent); font-weight: 600; cursor: pointer; }
.rl-fold { position: relative; max-height: 120px; overflow: hidden; }
.rl-fold::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(to bottom, transparent, var(--rl-surface)); }
.rl-ended { opacity: .62; }
.rl-empty { margin: 30px 0 60px; padding: 40px 20px; text-align: center; border-radius: 16px; border: 1px dashed var(--rl-line); color: var(--rl-muted-2); background: var(--rl-surface); }
.rl-page { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0 30px; }
.rl-page .page-numbers { min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--rl-line); background: var(--rl-surface); font-size: 14px; color: var(--rl-muted); }
.rl-page .page-numbers.current { background: var(--rl-grad); color: #fff; border-color: transparent; }
.rl-page .page-numbers.dots { border-color: transparent; background: none; }

/* ===== 首页「最新动态」卡片 ===== */
.rh-wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
/* 果体AI 首页：与 .n2s-wrap 同宽，夹在两个 84px 内边距的区块之间不再额外留白 */
.rl-dark .rh-wrap { width: min(1240px, calc(100% - 40px)); margin: 0 auto; }
.rh { padding: 14px 18px 12px; border-radius: 16px; border: 1px solid var(--rl-line); background: var(--rl-surface); box-shadow: 0 2px 10px rgba(0, 0, 0, .03); }
.rh-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rh-ic { width: 26px; height: 26px; border-radius: 8px; background: var(--rl-grad); display: grid; place-items: center; color: #fff; font-size: 13px; }
.rh-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--rl-text); line-height: 1.3; }
.rh-new { height: 18px; padding: 0 7px; border-radius: 5px; background: #ff3b30; color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; }
.rh-all { margin-left: auto; font-size: 13px; color: var(--rl-accent) !important; font-weight: 600; white-space: nowrap; }
.rh-list { margin: 0; padding: 0; list-style: none; }
.rh-list li { border-top: 1px dashed var(--rl-line); }
.rh-list li:first-child { border-top: 0; }
.rh-list li a { display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 6px 0; font-size: 14.5px; color: var(--rl-text); }
.rh-list time { flex: none; width: 82px; font-size: 12.5px; color: var(--rl-muted-2); font-variant-numeric: tabular-nums; }
.rh-list .rl-bd { flex: none; }
.rh-tt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rh-list li a:hover .rh-tt { color: var(--rl-accent); }
.rh-ar { color: var(--rl-muted-2); font-size: 13px; }

/* ===== 移动端 ===== */
@media (max-width: 640px) {
    .rl-head { padding: 18px 0 10px; }
    .rl-items { padding-left: 22px; }
    .rl-item::before { left: -29px; top: 20px; width: 10px; height: 10px; }
    .rl-card { padding: 14px; }
    .rl-title { font-size: 16px; }
    .rl-row { flex-direction: column; gap: 8px; }
    .rl-thumb { width: 100%; height: 160px; }
    .rl-month { top: 60px; }
    .rl-pinned { flex-wrap: wrap; }
    .rl-pinned__main { flex: 1 1 calc(100% - 50px); }
    .rl-pinned__go { flex-basis: auto; margin-left: 50px; margin-top: 4px; }
    .rh-wrap, .rl-dark .rh-wrap { width: calc(100% - 32px); margin: 0 auto; }
    .rh { padding: 12px 14px 10px; }
    .rh-list li a { font-size: 14px; }
    .rh-list time { width: 76px; font-size: 12px; }
    .rh-list .rl-bd { display: none; }
}