/* ============================================================
   Vertical Timeline — StyleKit Showcase 精确匹配
   https://www.stylekit.top/styles/timeline-vertical/showcase
   ============================================================ */

/* 全站字体 — 霞鹜文楷屏幕版 (WebFont, 按需分包加载) */
@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont/style.css');

/* ===== Design Tokens — Kami 纸感设计系统 × X Bookmarks 卡片视图 ===== */
:root {
    /* 颜色 — 与插件后台浅色主题文字色号一致: text #1a1816 / dim #4a4744 / mute #7a7772 */
    --color-primary: #1a1816;       /* 主文字 = 插件 --text */
    --color-secondary: #4a4744;     /* 次级文字 = 插件 --text-dim */
    --color-bg: #f5f4ed;            /* Kami Canvas 暖纸底 parchment */
    --color-surface: #faf9f5;       /* Kami Ivory 卡片/浮起容器 */
    --color-sand: #e8e6dc;          /* Kami Warm Sand 按钮/交互面 */
    --color-border: #e3e0d3;        /* 默认分隔线 */
    --color-border-subtle: #edeadd; /* 卡片描边 */
    --color-muted: #7a7772;         /* 弱文字 = 插件 --text-mute (暖 Stone 调) */

    /* Kami 深色暖调 — 弹层舞台/深色容器专用, 不取纯黑 */
    --color-deep: #141413;          /* Kami Deep Dark */
    --color-deep-surface: #30302e;  /* Kami Dark Surface 暖炭灰 */

    /* Kami 标签实色 — 两档登记色, 禁 rgba */
    --tag-quiet: #eef2f7;
    --tag-default: #e4ecf5;

    /* 强调色 — 唯一油墨蓝 + 分类功能色 + X 蓝 */
    --color-blue: #1b365d;          /* Kami Ink Blue (链接/激活态/CTA) */
    --color-blue-light: #2d5a8a;    /* Kami Ink Light */
    --color-x: #1d9bf0;             /* X 蓝 (推文互动元素) */
    --color-green: #10b981;         /* Launch */
    --color-amber: #f59e0b;         /* Design */
    --color-red: #ef4444;           /* Milestone */

    /* 旧变量名别名 — 分隔符/时间导航区仍在使用, 保持向后兼容 */
    --primary-color: var(--color-blue);
    --primary-color-accent: #142847;
    --primary-color-light: rgba(27, 54, 93, 0.12);
    --text-color: var(--color-primary);
    --text-muted: var(--color-muted);
    --text-light: var(--color-secondary);
    --border-color: var(--color-border);
    --bg-secondary: var(--color-bg);
    --card-bg: var(--color-surface);

    /* 阴影 — Kami: 默认平面, 仅真实浮起弹层保留极轻阴影 */
    --shadow-sm: 0 1px 2px 0 rgba(26, 24, 22, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(26, 24, 22, 0.07), 0 2px 4px -2px rgba(26, 24, 22, 0.05);
    --shadow-float: 0 12px 32px -8px rgba(26, 24, 22, 0.14), 0 2px 8px -2px rgba(26, 24, 22, 0.06);

    /* 圆角 — Kami 屏幕区块 8px */
    --radius-card: 8px;
    --radius-btn: 8px;

    /* 过渡 — duration-300 ease-out */
    --transition: all 300ms ease-out;

    /* 字体 — 全站霞鹜文楷 (标题/正文统一), 保留原有衬线/无衬线回退链 */
    --font-serif: "LXGW WenKai Screen", "LXGW WenKai", "Songti SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", Georgia, serif;
    --font-sans: "LXGW WenKai Screen", "LXGW WenKai", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "SF Mono", "Fira Code", "Source Code Pro", "Courier New", Consolas, monospace;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    color: var(--color-primary);
    line-height: 1.6;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* ===== Kami 纸感背景 — 干净暖纸底, 仅留极淡的边缘暖色晕染 ===== */
    background-color: var(--color-bg);
    background-image:
        radial-gradient(
            ellipse 70% 45% at 50% -10%,
            rgba(255, 253, 244, 0.9) 0%,
            transparent 65%
        ),
        radial-gradient(
            ellipse 60% 40% at 100% 110%,
            rgba(27, 54, 93, 0.04) 0%,
            transparent 70%
        );
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed;
}

a { color: var(--color-blue); text-decoration: none; transition: var(--transition); }
a:hover { color: #142847; }
img { max-width: 100%; height: auto; }

/* ===== Header — Kami 平面式: ivory 底 + 中性细线, 无辉光无渐变 ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-subtle);
}

.site-header-inner {
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--color-primary);
}

.site-logo:hover { color: var(--color-blue); }

.site-logo .logo-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-btn);
    /* Kami Primary: 油墨蓝实色 + ivory 字, 无渐变无投影 */
    background: var(--color-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #faf9f5;
    font-size: 1rem;
}

.site-nav { display: flex; align-items: center; gap: 0.5rem; }

.site-nav a {
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-btn);
    color: var(--color-muted);
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--transition);
}

.site-nav a:hover { background: var(--color-sand); color: var(--color-blue); }
.site-nav a.active { color: var(--color-blue); background: var(--tag-default); }

.site-nav .nav-divider {
    width: 1px;
    height: 1.25rem;
    background: var(--color-border);
    margin: 0 0.25rem;
}

.btn-admin {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.125rem;
    border-radius: var(--radius-btn);
    /* Kami Primary CTA: 油墨蓝填充 + ivory 字, 无渐变无阴影 */
    background: var(--color-blue);
    color: #faf9f5;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: all 300ms ease-out;
    border: 1px solid var(--color-blue);
    cursor: pointer;
}

.btn-admin:hover {
    background: #142847;
    border-color: #142847;
    color: #faf9f5;
}

.btn-admin:active {
    transform: scale(0.97);
}

/* 已登录态 — Kami Secondary: warm sand 填充 + charcoal 字 */
.btn-admin.logged-in {
    background: var(--color-sand);
    border-color: var(--color-sand);
    color: var(--color-primary);
}

.btn-admin.logged-in:hover {
    background: #dedbd0;
    border-color: #dedbd0;
    color: var(--color-primary);
}

/* ===== Hero ===== */
.hero {
    text-align: center;
    padding: 4rem 1.5rem 2.5rem;
    max-width: 48rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-badge {
    /* Kami Tag: 实色默认标签底 + 油墨蓝文字, 无玻璃无辉光 */
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-btn);
    background: var(--tag-default);
    border: none;
    color: var(--color-blue);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    letter-spacing: 0.03em;
}

.hero-badge::before {
    /* 左侧小圆点 — 静态油墨蓝, 无脉冲辉光 */
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-blue);
}

.hero h1 {
    font-size: 1.875rem;
    font-weight: 400;
    color: var(--color-primary);
    letter-spacing: 0.01em;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

@media (min-width: 768px) { .hero h1 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 3rem; } }

.hero p {
    font-size: 0.875rem;
    color: var(--color-secondary);
    max-width: 36rem;
    margin: 0 auto;
    font-weight: 400;
    letter-spacing: 0.01em;
}

@media (min-width: 768px) { .hero p { font-size: 1rem; } }

/* ===== Filter Bar ===== */
.filter-bar {
    max-width: 60rem;
    margin: 0 auto 2.5rem;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.filter-bar .filter-chip {
    display: inline-block;
    position: relative;
    overflow: hidden;
    padding: 0.375rem 1rem;
    border-radius: var(--radius-btn);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 350ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 350ms cubic-bezier(0.4, 0, 0.2, 1),
                color 350ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

/* 波纹效果 */
.filter-bar .filter-chip .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 600ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}

.filter-bar .filter-chip .count {
    position: relative;
    z-index: 1;
}

.filter-bar .filter-chip .ripple.ripple-light {
    background: rgba(255, 255, 255, 0.5);
}

.filter-bar .filter-chip .ripple.ripple-dark {
    background: var(--chip-color, var(--color-blue));
    opacity: 0.3;
}

@keyframes ripple {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* 带分类颜色的标签 — 通过 --chip-color 注入, 用 opacity 替代 color-mix 保证浏览器兼容 */
.filter-bar .filter-chip[style*="--chip-color"] {
    position: relative;
    border-color: var(--chip-color);
    color: var(--chip-color);
    background: transparent;
}

/* 用 ::before 作为背景层 — 实现 6% 透明度的分类色底 */
.filter-bar .filter-chip[style*="--chip-color"]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--chip-color);
    opacity: 0.06;
    z-index: -1;
    transition: opacity var(--transition);
}

.filter-bar .filter-chip[style*="--chip-color"]:hover {
    border-color: var(--chip-color);
    color: var(--chip-color);
}

.filter-bar .filter-chip[style*="--chip-color"]:hover::before {
    opacity: 0.12;
}

.filter-bar .filter-chip[style*="--chip-color"].active {
    background: var(--chip-color);
    border-color: var(--chip-color);
    color: #fff;
}

.filter-bar .filter-chip[style*="--chip-color"].active::before {
    display: none;
}

.filter-bar .filter-chip[style*="--chip-color"].active .count {
    color: rgba(255, 255, 255, 0.7);
}

/* 无分类颜色的标签 (如"全部") 保持原样式 */
.filter-bar .filter-chip:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.filter-bar .filter-chip.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #faf9f5;
}

.filter-bar .filter-chip .count {
    margin-left: 0.25rem;
    opacity: 0.5;
    font-size: 0.75rem;
}

/* ===== Search Box ===== */
.search-box {
    position: relative;
    max-width: 18rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

.search-box input {
    width: 100%;
    padding: 0.55rem 1rem 0.55rem 2.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    /* Kami 平面搜索框: ivory 底 + 中性细线 */
    background: var(--color-surface);
    font-size: 0.875rem;
    color: var(--color-primary);
    transition: border-color 200ms ease-out, background-color 200ms ease-out;
    font-family: var(--font-sans);
    letter-spacing: 0.01em;
}

.search-box input:focus {
    outline: none;
    border-color: var(--color-blue);
    background: #ffffff;
    /* Kami 克制聚焦: 单色细环 */
    box-shadow: 0 0 0 3px rgba(27, 54, 93, 0.1);
}

.search-box input::placeholder { color: var(--color-muted); font-weight: 400; }

.search-box .search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: var(--color-muted);
    pointer-events: none;
    opacity: 0.8;
}

/* ============================================================
   Vertical Timeline — 核心 (Showcase 精确匹配)
   三层结构: 01 Central Spine / 02 Node Dot / 03 Content Card
   04 Group Context — 四个元素共享悬停上下文
   ============================================================ */

/* ===== Layout with Time Nav ===== */
.timeline-layout {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    max-width: 100rem;
    margin: 0 auto;
    gap: 1.5rem;
    padding: 0 1.5rem;
    align-items: start;
}

/* ===== Left Side Time Navigation (compact) ===== */
.time-nav {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: 1.5rem 0.75rem 1.5rem 0;
    /* Kami 中性分隔: 暖调虚线, 无电路质感 */
    border-right: 1px dashed var(--color-border);
}

.time-nav::-webkit-scrollbar { width: 3px; }
.time-nav::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }

.tn-year {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    position: relative;
}

.tn-year:not(:first-child) { margin-top: 1.25rem; }

.tn-year::before {
    /* 年份信号条: 油墨蓝实色 */
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-blue);
    border-radius: 3px;
}

.tn-year::after {
    /* 顶部节点: 小圆点, 移到年份文字外部左侧, 不遮挡文字 */
    content: "";
    position: absolute;
    left: -14px;
    top: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-blue);
    box-shadow: 0 0 0 2px var(--color-bg);
}

.tn-months {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 0.25rem;
}

.tn-month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: all 0.2s ease;
    line-height: 1.3;
}

.tn-month:hover {
    background: var(--color-sand);
    color: var(--color-primary);
}

.tn-month.active {
    /* 选中态: warm sand 贴片 + 油墨蓝左条 */
    position: relative;
    background: var(--tag-default);
    color: var(--color-blue);
    font-weight: 700;
    border-radius: 6px;
    box-shadow: inset 3px 0 0 0 var(--color-blue);
}

.tn-month.active::after {
    /* 右侧选中圆点 */
    content: "";
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-blue);
}

.tn-month.active .tn-month-count {
    color: var(--color-blue);
    font-weight: 700;
    opacity: 0.85;
}

.tn-month-num { font-weight: 500; }
.tn-month-count {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ===== Year Separator ===== */
.year-separator {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 3rem 0 1.5rem;
    padding-left: calc(50% + 1.5rem);
    position: relative;
    z-index: 10;
}

.year-line {
    height: 1px;
    background: var(--border-color);
    flex: 0 0 36px;
}

.year-line:last-child { flex: 1; max-width: 40%; background: linear-gradient(to right, var(--border-color), transparent); }

.year-badge-inner {
    display: inline-block;
    padding: 0.375rem 1.25rem;
    background: var(--color-surface);
    color: var(--primary-color);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: 999px;
    border: 2px solid var(--primary-color);
}

/* ===== Month Separator ===== */
.month-separator {
    margin: 2rem 0 1rem;
    display: flex;
    padding-left: calc(50% + 1.5rem);
    position: relative;
    z-index: 10;
}

.month-card {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease;
}

.month-card:hover {
    border-color: var(--primary-color);
}

.month-big {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-blue);
    font-variant-numeric: tabular-nums;
}

.month-sub {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    border-left: 2px solid var(--border-color);
    padding-left: 0.625rem;
}

.month-sub-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-color);
}

.month-sub-year {
    font-size: 0.6875rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

/* ===== Day Separator ===== */
.day-separator {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 1.25rem 0 0.5rem;
    padding-left: calc(50% + 1.5rem);
    position: relative;
    z-index: 10;
}

.day-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
    flex-shrink: 0;
}

.day-label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    background: var(--bg-secondary);
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.day-num {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.day-week {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-weight: 500;
}

.day-line {
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(to right, var(--border-color) 0, var(--border-color) 5px, transparent 5px, transparent 10px);
    max-width: 30%;
}

.timeline-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 1.5rem 0 3.5rem;
}

.timeline {
    position: relative;
    padding: 0;
}

/* 01 Central Spine — 移动端: 左对齐 / 桌面端: 居中 */
.timeline::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
    z-index: 0;
}

/* 02 Group Context — 每个 timeline-item 是 group 上下文 */
.timeline-item {
    position: relative;
    margin-bottom: 1.25rem;
    padding-left: 3.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.timeline-item.in-view { opacity: 1; transform: translateY(0); }

/* 03 Node Dot — w-4 h-4 rounded-full border-2 border-card-bg */
.timeline-item .node-dot {
    position: absolute;
    left: 0.6875rem;
    top: 2.75rem; /* 下移避开左上角"已阅"角标三角 (斜边 x+y=44px) */
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--node-color, var(--color-blue));
    border: 2px solid var(--color-surface);
    box-shadow: 0 0 0 1px var(--color-border);
    z-index: 1;
    transition: var(--transition);
}

/* Node color variants — fallback when --node-color not set, use var() to avoid overriding */
.timeline-item .node-dot.node-feature { background: var(--node-color, var(--color-blue)); }
.timeline-item .node-dot.node-launch { background: var(--node-color, var(--color-green)); }
.timeline-item .node-dot.node-design { background: var(--node-color, var(--color-amber)); }
.timeline-item .node-dot.node-milestone { background: var(--node-color, var(--color-red)); }
.timeline-item .node-dot.status-draft { background: var(--node-color, var(--color-muted)); }

/* 04 Content Card — Kami 平面: ivory 底 + 暖调细线, 无玻璃无 HUD 光带 */
.timeline-item .timeline-card {
    display: block;
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-sm);
    padding: 2.25rem 1.25rem 1.25rem;
    transition:
        box-shadow 300ms ease-out,
        border-color 300ms ease-out;
    cursor: pointer;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

/* ===== 四条动效法则 ===== */

/* Law 01: Node Synchronization — 悬停卡片时节点同步微缩放, Kami 去光晕 */
.timeline-item:hover .node-dot {
    transform: scale(1.2);
    box-shadow: 0 0 0 1px var(--node-color, var(--color-blue));
}

/* Fallback for browsers without color-mix — 保留作为兜底 */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .timeline-item:hover .node-dot.node-feature { box-shadow: 0 0 0 1px var(--color-blue); }
    .timeline-item:hover .node-dot.node-launch { box-shadow: 0 0 0 1px var(--color-green); }
    .timeline-item:hover .node-dot.node-design { box-shadow: 0 0 0 1px var(--color-amber); }
    .timeline-item:hover .node-dot.node-milestone { box-shadow: 0 0 0 1px var(--color-red); }
    .timeline-item:hover .node-dot.status-draft { box-shadow: 0 0 0 1px var(--color-muted); }
}

/* Law 02: Pull-Out Effect + Law 04: Connected Focus
   hover: 极轻上浮, 边框变分类色, 暖调阴影 */
.timeline-item:hover .timeline-card {
    border-color: var(--node-color, var(--color-blue));
    transform: translateY(-0.125rem);
    box-shadow: var(--shadow-md);
}

/* 标题悬停效果已取消 */

/* Card category badge — 右上角实心胶囊, Kami 平面无阴影 */
.card-category {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8125rem;      /* 原 0.75rem +1号 (12→13) */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    z-index: 1;
    color: #fff;
    background: var(--chip-color, var(--color-blue));
}

.card-category::before {
    /* 左侧小圆点高光, 增加质感 */
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    margin-right: 0.4rem;
}

/* Date label — 绝对定位左上角, Kami 平面: 无玻璃底 */
.timeline-item .date-label {
    position: absolute;
    top: 0.75rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-radius: calc(var(--radius-btn) - 2px);
    font-size: 0.875rem;       /* 原 0.8125rem +1号 (13→14) */
    font-weight: 600;
    color: var(--color-muted);
    z-index: 1;
    background: var(--color-bg);
}

.timeline-item .date-label::before {
    /* 时间戳色条 — 跟随分类色, 实色无发光 */
    content: "";
    display: inline-block;
    width: 3px;
    height: 0.875rem;
    border-radius: 2px;
    background: var(--node-color, var(--color-blue));
    margin-right: 0.15rem;
}

/* Card title — Kami: serif 标题 500 */
.card-title {
    font-size: 1.25rem;          /* 原 1.125rem +1号 (18→20) */
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    transition: var(--transition);
}

@media (min-width: 768px) { .card-title { font-size: 1.375rem; } }   /* 原 1.25rem (20→22) */

/* Card excerpt — 3 行裁剪 */
.card-excerpt {
    color: var(--color-muted);
    font-size: 0.9375rem;       /* 原 0.875rem +1号 (14→15) */
    line-height: 1.6;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- 推文来源卡片 (扩展发布) ---- */

/* 推文用户名行 */
.card-author {
    margin-bottom: 0.5rem;
}

.card-author-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;       /* 原 0.8125rem +1号 (13→14) */
    font-weight: 600;
    color: var(--color-primary);
    opacity: 0.85;
}

/* 推文内容: 收起时最多 6 行, 点"展开全文"查看更多 (控制卡片长度) */
.card-excerpt.tweet-full {
    color: var(--color-primary); /* 推文正文 = 插件卡片正文 --text */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
}
.card-excerpt.tweet-full.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* 超过 150 字的推文: 折行收起, 提示展开 */
.tweet-more-hint {
    display: inline-block;
    margin-top: 0.35rem;
    color: var(--color-accent);
    font-size: 0.9375rem;       /* 原 0.85rem +1号 (≈14→15) */
    font-weight: 600;
    cursor: pointer;
}
.tweet-more-hint:hover { text-decoration: underline; }

/* 卡片正文中的链接 (外层 <a> 禁止嵌套 <a>, 用 span + JS 打开) */
.card-text-link {
    color: var(--color-x); /* 推文超链接统一 X 品牌蓝 (原 --color-accent 未定义导致链接无色) */
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}

/* ===== 详情页推文作者栏 ===== */
.tweet-author-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 0 0 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}
.tab-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-sand);
}
.tab-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tab-avatar-fb { font-weight: 700; font-size: 1.1rem; color: var(--color-secondary); }
.tab-user { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tab-name { font-weight: 700; font-size: 0.95rem; color: var(--color-primary); }
.tab-sub { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--color-muted); }
.tab-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 200ms ease;
}
.tab-btn:hover {
    color: var(--color-blue);
    border-color: var(--color-blue);
    background: var(--tag-quiet);
}
.tab-btn:disabled { opacity: 0.5; cursor: wait; }

/* 正文中的链接特别标注: X 品牌蓝 + 下划线 + 蓝调高亮底色 + 外开箭头 */
.article-content .content-link,
.article-content a {
    color: var(--color-x);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    background: linear-gradient(transparent 62%, rgba(29, 155, 240, 0.14) 0);
    border-radius: 3px;
    padding: 0 2px;
    transition: background 200ms ease;
}
.article-content .content-link::after {
    content: "↗";
    font-size: 0.78em;
    margin-left: 2px;
    vertical-align: super;
    opacity: 0.75;
}
.article-content .content-link:hover,
.article-content a:hover {
    background: rgba(29, 155, 240, 0.18);
    color: #0d8de7;
}

@media (max-width: 640px) {
    .tweet-author-bar { gap: 10px; padding: 10px 12px; }
    .tab-avatar { width: 38px; height: 38px; }
    .tab-actions { margin-left: 0; width: 100%; }
}

.card-text-link:hover {
    opacity: 0.75;
}

/* 推文统计行: 点赞/转发/评论/被收藏/浏览量 */
.card-tweet-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--color-border, rgba(148, 163, 184, 0.3));
}

.card-tweet-stats .stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.8125rem;       /* 原 0.75rem +1号 (12→13) */
    color: var(--color-secondary); /* = 插件卡片统计 --text-dim */
}

.card-tweet-stats .stat:hover {
    color: var(--color-primary);
}

/* ---- 推文卡片: 同步扩展【卡片视图】布局 ---- */

/* 头部: 头像+作者名/@handle 左, 分类+发布时间 右 */
.tc-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

/* 头像: 本地托管图, 加载失败回退 𝕏 占位 */
.tc-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1d9bf0, #0f1419);
}

.tc-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tc-avatar img.is-broken { display: none; }

.tc-avatar-fallback {
    color: #fff;
    font-size: 1.05rem;           /* 原 0.95rem +1号 (≈15→17) */
    font-weight: 700;
    line-height: 1;
}

.tc-user {
    min-width: 0;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-user-name {
    font-size: 1rem;             /* 原 0.9375rem +1号 (15→16) */
    font-weight: 700;
    color: var(--color-primary); /* = 插件卡片作者名 --text */
    line-height: 1.3;
}

.tc-user-handle {
    font-size: 0.875rem;         /* 原 0.8125rem +1号 (13→14) */
    color: var(--color-secondary); /* = 插件卡片 @handle --text-dim */
    line-height: 1.3;
}

/* 分类胶囊在头部内改为文档流布局 */
.tc-header .card-category.tc-cat {
    position: static;
    flex-shrink: 0;
}

/* 发布时间 — 右上角, 分类色时间戳色条 */
.tc-date {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.55rem;
    border-radius: calc(var(--radius-btn) - 2px);
    font-size: 0.8125rem;       /* 原 0.75rem +1号 (12→13) */
    font-weight: 600;
    color: var(--color-secondary); /* = 插件卡片日期 --text-dim */
    background: var(--color-bg);
    white-space: nowrap;
}

.tc-date::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 0.8rem;
    border-radius: 2px;
    background: var(--node-color, var(--color-blue));
}

/* 底部: 左下角统计, 右下角按钮 */
.tc-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.tc-footer .tc-stats {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

.tc-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    padding-top: 0.5rem;
}

/* 头部内的管理按钮容器改为文档流 (覆盖默认绝对定位) */
.tc-actions .card-admin-actions.tc-admin-actions {
    position: static;
    opacity: 1;
    padding-top: 0;
}

/* 【在 X 中打开】按钮 — Kami 平面: warm sand 圆形按钮 */
.tc-action-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-sand);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;       /* 原 0.875rem +1号 (14→15) */
    font-weight: 700;
    color: var(--color-secondary); /* = 插件卡片操作按钮 --text-dim */
    transition: color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out;
}

.tc-action-btn:hover {
    color: var(--color-blue);
    background: var(--tag-default);
    border-color: var(--color-blue);
}

@media (max-width: 640px) {
    .tc-header {
        flex-wrap: wrap;
    }
    .tc-date {
        margin-left: auto;
    }
    .tc-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .tc-actions {
        justify-content: flex-end;
    }
}

/* ---- 推文卡片: 同步扩展【卡片视图】布局 end ---- */

/* ---- 推文来源卡片 (扩展发布) end ---- */

/* Read more link */
.card-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;         /* 原 0.8125rem +1号 (13→14) */
    font-weight: 500;
    color: var(--color-blue);
    transition: var(--transition);
}

.card-read-more:hover { color: #142847; }

/* Card meta row — views + reading time */
.card-meta-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;       /* 原 0.75rem +1号 (12→13) */
    color: var(--color-muted);
}

.card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.card-meta-item svg { opacity: 0.6; }

/* Card footer — Kami 暖调细线分隔 */
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-border-subtle);
}

.card-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }

.card-tag {
    font-size: 0.8125rem;         /* 原 0.75rem +1号 (12→13) */
    color: var(--color-secondary);
    /* Kami 标签: 实色暖底 + 中性细线 */
    background: var(--tag-quiet);
    border: 1px solid var(--color-border-subtle);
    padding: 0.1875rem 0.55rem;
    border-radius: var(--radius-btn);
    text-decoration: none;
    transition: color 200ms ease-out, border-color 200ms ease-out, background-color 200ms ease-out;
    cursor: pointer;
    letter-spacing: 0.01em;
    font-weight: 500;
}

.card-tag:hover {
    color: var(--color-blue);
    background: var(--tag-default);
    border-color: var(--color-blue);
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;         /* 原 0.8125rem +1号 (13→14) */
    color: var(--color-muted);
}

.card-meta span { display: flex; align-items: center; gap: 0.25rem; }

/* Card cover image */
.card-cover {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: var(--radius-btn);
    margin: 0.5rem 0 0.875rem;
}

/* ===== Card Image Gallery — justified 等高行拼图 ===== */
/* 核心原则: 不裁剪任何图片/视频缩略图比例 — 每格盒子比例 = 媒体真实比例 (--img-ar, PHP 端实测写入),
   同行格子等高、宽度按 AR 分配 (flex-grow), 恰好拼满一行: 不裁切、不变形、行内不留空 */
.card-gallery {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0.5rem 0 0.875rem;
    border-radius: var(--radius-btn);
    overflow: hidden;
    cursor: pointer;
    /* Kami 宫格外层: 暖调细线 */
    border: 1px solid var(--color-border-subtle);
}

.g-row { display: flex; gap: 4px; }

.gallery-item {
    position: relative;
    overflow: hidden;
    background: var(--color-sand);
    transition: opacity 300ms ease-out;
    /* flex-grow = AR → 行内宽度按各格比例分配 (等 basis 零起分); aspect-ratio = AR →
       盒子比例与媒体真实比例一致, 全行等高且恰好填满行宽 */
    flex: var(--img-ar, 1.5) 1 0%;
    min-width: 0;
    aspect-ratio: var(--img-ar, 1.5);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item:hover img {
    transform: scale(1.04);
}

/* "+N" overlay for 10+ images */
.gallery-more {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

/* ===== 视频卡片 (首页 + 推文详情) ===== */
.card-video {
    position: relative;
    margin: 0.5rem 0 0.875rem;
    border-radius: var(--radius-btn);
    overflow: hidden;
    /* 16:9 标准视频比例 */
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid rgba(228, 228, 231, 0.9);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    cursor: pointer;
}
.card-video-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.card-video-poster.brand-placeholder {
    /* Kami: 无封面的视频占位统一暖炭灰底, 平面无彩色渐变 */
    background: linear-gradient(135deg, var(--color-deep-surface) 0%, var(--color-deep) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-video-poster.brand-placeholder.bilibili { background: linear-gradient(135deg, #3d3d3a 0%, #141413 100%); }
.card-video-poster.brand-placeholder.youtube { background: linear-gradient(135deg, #3d3d3a 0%, #141413 100%); }
.card-video-poster.brand-placeholder.native { background: linear-gradient(135deg, #3d3d3a 0%, #141413 100%); }
.vp-brand {
    color: #faf9f5;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 2px;
}
/* 宫格视频缩略图品牌占位 (B 站老视频官方无封面): 暖炭灰底 + 「视频」字样, 与单视频 brand-placeholder 同风格 */
.gallery-item.video-thumb .thumb-brand {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3d3d3a 0%, #141413 100%);
}
.gallery-item.video-thumb .thumb-brand .vp-brand { font-size: 1rem; }
.card-video-play {
    position: relative;
    z-index: 2;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    background: var(--color-blue);
    color: #faf9f5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms ease, background 200ms ease;
}
.card-video:hover .card-video-play {
    transform: scale(1.06);
    background: #142847;
}
.card-video iframe,
.card-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
}
/* 多视频推文: 卡片右上角 +N 角标 (其余视频在详情弹窗内切换) */
.card-video-more {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.6);
    color: #faf9f5;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.6;
    pointer-events: none;
}
/* 多视频推文: 缩略图并入 .card-gallery justified 等高行布局 (与多图同规则) */
/* 视频缩略图: 居中播放按钮, 让用户一眼看出这是可点击的视频 (多视频宫格与混合宫格通用) */
.video-thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    pointer-events: none; /* 点击穿透到 .gallery-item 本身的 data-video-index 处理器 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: transform 200ms ease, background 200ms ease;
}
.video-thumb-play svg { width: 22px; height: 22px; margin-left: 2px; }
.gallery-item:hover .video-thumb-play {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(0, 0, 0, 0.7);
}
/* 竖向视频 (JS 探测 native mp4 宽高后加 .portrait + 内联 aspect-ratio): 限宽居中, 竖向大气展示 */
.card-video.portrait {
    max-width: min(500px, 100%);
    margin-inline: auto;
}

/* ===== Article Detail Images ===== */
.article-images {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* 管理员添加的 B 站视频: 紧跟原推文图片下方, 多个视频纵向排列 */
.article-bili-videos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 0 1.5rem;
}

.article-image-item {
    margin: 0;
    border-radius: var(--radius-card);
    overflow: hidden;
    cursor: pointer;
}

.article-image-item img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    display: block;
    transition: transform 300ms ease;
}

.article-image-item:hover img {
    transform: scale(1.02);
}

/* ===== Lightbox ===== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.lightbox.active {
    display: flex;
    animation: lightbox-fade-in 250ms ease-out;
}

@keyframes lightbox-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    animation: lightbox-zoom-in 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes lightbox-zoom-in {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms;
}

.lightbox-close:hover { background: rgba(255,255,255,0.3); }

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    /* 深色半透明底 + 白描边 + 阴影: 白色媒体背景上也能看清 */
    border: 2px solid rgba(255,255,255,0.85);
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 4px; /* ‹ › 字形偏上, 视觉居中 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.45);
    transition: background 200ms;
}

.lightbox-nav:hover { background: rgba(0,0,0,0.8); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    font-weight: 500;
}

/* Admin actions */
.timeline-item .card-admin-actions {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    gap: 0.375rem;
    opacity: 0;
    transition: var(--transition);
    z-index: 2;
}

.timeline-item:hover .card-admin-actions { opacity: 1; }

.card-admin-actions button {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    /* Kami 平面: warm sand 圆形按钮 */
    border: 1px solid var(--color-border);
    background: var(--color-sand);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    color: var(--color-muted);
    transition: color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out;
}

.card-admin-actions button:hover {
    background: var(--tag-default);
    color: var(--color-blue);
    border-color: var(--color-blue);
}

.card-admin-actions button.delete:hover {
    color: var(--color-red);
    border-color: var(--color-red);
    background: #fbeaea;
}

/* Add new article button */
.add-article-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1.25rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
    background: transparent;
    color: var(--color-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 2.5rem;
    font-family: var(--font-sans);
}

.add-article-btn:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
    background: rgba(27, 54, 93, 0.03);
}

/* ===== Desktop: 瀑布流布局 — 时间轴固定最左侧, 卡片 CSS 多列瀑布流 (参考扩展端卡片模式) ===== */
@media (min-width: 768px) {
    /* 多列瀑布流: 768~1279px 两列, ≥1280px 四列 (下方覆盖);
       padding-left 为最左轴线预留: 轴线 1.25rem + 1.5rem 呼吸空隙 */
    .timeline {
        display: block;
        column-count: 2;
        column-gap: 1.25rem;
        padding-left: 2.25rem;
    }

    /* 轴线沿用基础 left: 1.25rem — 始终最左, 不再居中 */

    /* 卡片: 禁止跨列断开, 列内按时间顺序纵向填充 */
    .timeline-item {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        padding-left: 0; /* 覆盖移动端 3.5rem — 轴线空间由容器提供 */
        min-width: 0;
    }

    /* Node dot: 半嵌在每张卡片左上角 (瀑布流各列卡片均带分类色节点) */
    .timeline-item .node-dot {
        left: 0;
        top: 3rem; /* 下移避开左上角"已阅"角标三角 */
        transform: translateX(-50%);
    }

    .timeline-item:hover .node-dot {
        transform: translateX(-50%) scale(1.2);
    }

    .timeline-item:hover .timeline-card {
        transform: translateY(-0.125rem);
    }

    /* 分隔符: 横跨全部列, 切断瀑布流形成时间分组; 左对齐贴近轴线 */
    .year-separator,
    .month-separator,
    .day-separator {
        column-span: all;
        padding-left: 0 !important;
    }

    /* Day separator: 左对齐, day-dot 圆心落于最左轴线 (1.25rem) */
    .day-separator {
        justify-content: flex-start;
        margin: 0.75rem 0 0.25rem calc(-1.5rem - 4px) !important;
        height: 28px;
    }
    .day-separator .day-dot {
        flex-shrink: 0;
    }
    .day-separator .day-label {
        margin-left: 0.5rem;
    }
    .day-separator .day-line {
        display: none;
    }

    /* Month separator: 左对齐, badge 骑在轴线上 */
    .month-separator {
        justify-content: flex-start;
        margin: 1.25rem 0 0.5rem calc(-1.5rem - 4px) !important;
        height: 52px;
    }

    /* Year separator: 左对齐 */
    .year-separator {
        justify-content: flex-start;
        gap: 0.75rem;
        margin: 2rem 0 0.75rem calc(-1.5rem - 4px) !important;
        height: 52px;
    }
    .year-separator .year-line {
        flex: 0 0 36px;
        height: 1px;
        background: var(--color-border);
    }
    .year-separator .year-line:last-child { flex: 1; max-width: 30%; background: linear-gradient(to right, var(--color-border), transparent); }

    /* 发布按钮横跨全部列 */
    .add-article-btn { column-span: all; }
}

/* ===== Large Desktop: ≥1280px 瀑布流三列 (卡片更宽, 统计行一行放得下) ===== */
@media (min-width: 1280px) {
    .timeline { column-count: 3; }

    /* 统计行与右下角操作按钮 (复制为 Markdown 等) 同行对齐: 统计靠左, 按钮靠右,
       5 项统计 nowrap 一行完整展示 */
    .card-tweet-stats {
        flex-wrap: nowrap;
        gap: 0.6rem;
    }
    .card-tweet-stats .stat {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ===== Reading Progress Bar ===== */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--color-blue);
    z-index: 200;
    width: 0%;
    transition: width 100ms linear;
    border-radius: 0 2px 2px 0;
}

/* ===== Article Page ===== */
.article-page {
    max-width: 42rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 2.5rem;
}

/* Breadcrumb */
.article-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-muted);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.article-breadcrumb a {
    color: var(--color-muted);
    transition: var(--transition);
}

.article-breadcrumb a:hover { color: var(--color-blue); }

.article-breadcrumb .breadcrumb-sep {
    color: var(--color-border);
    user-select: none;
}

.article-breadcrumb .breadcrumb-current {
    color: var(--color-primary);
    font-weight: 500;
}

/* Article Header */
.article-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.article-header .category-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-btn);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.article-header .category-badge.draft {
    background: rgba(148, 163, 184, 0.12);
    color: var(--color-muted);
    margin-left: 0.5rem;
}

.article-header h1 {
    font-size: 1.5rem;
    font-weight: 500; /* Kami: serif 标题 500, 不用合成 bold */
    color: var(--color-primary);
    line-height: 1.25; /* Kami 紧凑标题档 */
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

@media (min-width: 768px) { .article-header h1 { font-size: 1.875rem; } }

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.article-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.article-meta .meta-item svg {
    flex-shrink: 0;
    opacity: 0.6;
}

/* Cover image wrapper */
.article-cover-wrapper {
    margin-bottom: 2rem;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.article-cover {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

/* Article Content */
.article-content {
    font-size: 0.9375rem;
    line-height: 1.6; /* Kami 阅读档 */
    color: var(--color-primary);
}

@media (min-width: 768px) { .article-content { font-size: 1rem; } }

.article-content h2 {
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--color-primary);
    margin: 2rem 0 1rem;
    letter-spacing: -0.01em;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.article-content h3 {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-primary);
    margin: 1.5rem 0 0.75rem;
}

.article-content p { margin-bottom: 1rem; }
.article-content ul, .article-content ol { margin: 0 0 1rem 1.5rem; }
.article-content li { margin-bottom: 0.375rem; }

.article-content blockquote {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    color: var(--color-muted);
    font-style: italic;
}

/* 推文引用块 (完整引用推文卡片, 覆盖文章正文与前台详情弹窗) */
.article-content blockquote.tweet-quote,
.tlm-text blockquote.tweet-quote {
    font-style: normal;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0.75rem 0.875rem;
    margin: 0.75rem 0;
    background: rgba(0, 0, 0, 0.02);
}
.article-content .tweet-quote-user,
.tlm-text .tweet-quote-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.article-content .tweet-quote-avatar,
.tlm-text .tweet-quote-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: var(--color-border);
}
.article-content .tweet-quote-user-info,
.tlm-text .tweet-quote-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}
.article-content .tweet-quote-name,
.tlm-text .tweet-quote-name {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.article-content .tweet-quote-badge,
.tlm-text .tweet-quote-badge {
    color: #1d9bf0;
    font-size: 0.8em;
}
.article-content .tweet-quote-handle,
.tlm-text .tweet-quote-handle {
    color: var(--color-muted);
    font-size: 0.8125rem;
}
/* 引用推文发布时间: 显示在引用卡片右上角 (作者行右侧) */
.article-content .tweet-quote-date,
.tlm-text .tweet-quote-date {
    margin-left: auto;
    color: var(--color-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}
.article-content .tweet-quote-text,
.tlm-text .tweet-quote-text {
    color: var(--color-primary);
    font-size: 0.9375rem;
    line-height: 1.55;
    word-break: break-word;
}
.article-content .tweet-quote-text a,
.tlm-text .tweet-quote-text a {
    color: var(--color-x); /* 超链接统一 X 蓝标注 */
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break: break-all;
}
.article-content .tweet-quote-media,
.tlm-text .tweet-quote-media {
    margin-top: 0.5rem;
    width: 100%;
    max-width: 420px;
    border-radius: 10px;
    display: block;
}
.article-content .tweet-quote-meta,
.tlm-text .tweet-quote-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    color: var(--color-muted);
    font-size: 0.8125rem;
}
.article-content .tweet-quote-stat,
.tlm-text .tweet-quote-stat {
    color: var(--color-muted);
    font-size: 0.8125rem;
}
.article-content .tweet-quote-link,
.tlm-text .tweet-quote-link {
    margin-top: 0.5rem;
    font-size: 0.875em;
}
.article-content .tweet-quote-link a,
.tlm-text .tweet-quote-link a {
    color: var(--color-x); /* 推文超链接统一 X 品牌蓝 (原 --color-accent 未定义导致链接无色) */
}

.article-content code {
    font-family: var(--font-mono);
    background: var(--color-bg);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-btn);
    font-size: 0.875em;
    color: var(--color-red);
}

.article-content pre {
    /* Kami Deep Dark 暖炭底代码块 */
    background: var(--color-deep);
    color: #e8e6dc;
    padding: 1.25rem;
    border-radius: var(--radius-btn);
    overflow-x: auto;
    margin: 1.25rem 0;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.article-content pre code { background: none; color: inherit; padding: 0; }
.article-content img { border-radius: var(--radius-btn); margin: 1rem 0; }
.article-content a { text-decoration: underline; text-underline-offset: 2px; }

.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
}

.article-content th, .article-content td {
    border: 1px solid var(--color-border);
    padding: 0.625rem 0.875rem;
    text-align: left;
}

.article-content th { background: var(--color-bg); font-weight: 600; }

/* Article Excerpt */
.article-excerpt {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    color: var(--color-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* 文章页增补内容分隔符 (AI 增补正文 与 推文正文/图片 上下两部分之间) */
.article-supplement-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 2rem 0 1.5rem;
}
.article-supplement-divider .asd-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border, #e3e6ea), transparent);
}
.article-supplement-divider .asd-dot {
    color: var(--color-muted, #9aa0a8);
    font-size: 0.8rem;
    opacity: 0.7;
}
/* 增补正文 (AI 生成, 位于文章上半部分; 下方间距交给分隔符) */
.article-supplement {
    margin: 1.5rem 0 0;
    color: var(--color-text, #1f2329);
    font-size: 0.9625rem;
    line-height: 1.9;
}
.article-supplement h2 {
    font-size: 1.15rem;
    margin: 1.4rem 0 0.6rem;
    padding-left: 10px;
    border-left: 3px solid var(--color-accent, #3b82f6);
    line-height: 1.4;
}
.article-supplement h3 {
    font-size: 1.02rem;
    margin: 1.1rem 0 0.5rem;
}
.article-supplement h4 { font-size: 0.96rem; margin: 1rem 0 0.4rem; }
.article-supplement p { margin: 0.6rem 0; }
.article-supplement ul,
.article-supplement ol { margin: 0.6rem 0; padding-left: 1.4rem; }
.article-supplement li { margin: 0.25rem 0; }
.article-supplement a { color: var(--color-accent, #3b82f6); text-decoration: underline; text-underline-offset: 3px; }
.article-supplement blockquote {
    border-left: 3px solid var(--color-border, #e3e6ea);
    padding: 0.2rem 0 0.2rem 1rem;
    margin: 0.8rem 0;
    color: var(--color-muted, #6b7280);
}
.article-supplement code {
    background: rgba(127,127,127,0.1);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.88em;
}
.article-supplement pre {
    background: rgba(127,127,127,0.08);
    padding: 0.9rem 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0.8rem 0;
}
.article-supplement pre code { background: none; padding: 0; }

/* 增补正文末尾: 官方资源链接区 */
.supplement-resources {
    margin-top: 1.4rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--color-border, rgba(27,54,93,0.12));
    border-radius: 10px;
    background: rgba(127,127,127,0.045);
    font-size: 0.92rem;
    line-height: 1.8;
}
.supplement-resources .sr-label {
    font-weight: 700;
    color: var(--color-primary, #1b365d);
    white-space: nowrap;
}
.supplement-resources .sr-label-block {
    display: block;
    margin: 0 0 0.25rem;
}
.supplement-resources ul.sr-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.supplement-resources ul.sr-list li {
    margin: 0.2rem 0;
    padding-left: 1.05rem;
    position: relative;
}
.supplement-resources ul.sr-list li::before {
    content: "🔗";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.78rem;
}
.supplement-resources .sr-link {
    color: var(--color-accent, #3b82f6);
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break: break-all;
}
.supplement-resources .sr-link:hover { opacity: 0.8; }

/* Tags */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.article-tag {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-btn);
    background: var(--color-bg);
    color: var(--color-muted);
    font-size: 0.8125rem;
    transition: var(--transition);
    text-decoration: none;
}

.article-tag:hover { background: var(--color-blue); color: #fff; }

/* 返回顶部按钮 */
#back-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1200;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.2s;
}
#back-top:hover { background: var(--color-sand); }

/* Share */
.article-share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.article-share .share-label {
    font-size: 0.8125rem;
    color: var(--color-muted);
    margin-right: 0.25rem;
}

.article-share .share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-btn);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 0.8125rem;
    transition: var(--transition);
    cursor: pointer;
    text-decoration: none;
}

.article-share .share-link:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
    background: var(--tag-quiet);
}

/* Article navigation */
.article-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.article-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    background: var(--color-surface);
    transition: var(--transition);
    max-width: 48%;
    text-decoration: none;
    color: inherit;
    flex: 1;
}

.article-nav-link:hover {
    border-color: var(--color-blue);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.article-nav-link.empty {
    visibility: hidden;
    pointer-events: none;
}

.article-nav .nav-label { font-size: 0.75rem; color: var(--color-muted); }
.article-nav .nav-title { font-size: 0.9375rem; font-weight: 600; color: var(--color-primary); line-height: 1.4; }
.article-nav .nav-next { text-align: right; }

/* Back to Top */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 300ms ease-out;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.back-to-top:active { transform: scale(0.95); }

/* ===== Responsive: Time Nav & Separators ===== */
@media (max-width: 1024px) {
    .timeline-layout {
        grid-template-columns: 1fr;
        max-width: 68rem;
    }
    .time-nav {
        display: none;
    }
}

@media (max-width: 767px) {
    .back-to-top {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .year-separator,
    .month-separator,
    .day-separator {
        padding-left: 0;
    }

    .year-separator {
        margin: 2.5rem 0 1.25rem;
        gap: 0.5rem;
        justify-content: center;
    }
    .year-badge-inner {
        padding: 0.3rem 0.875rem;
        font-size: 0.9375rem;
        letter-spacing: 0.06em;
    }
    .year-line {
        flex: 0 0 24px;
    }
    .year-line:last-child {
        flex: 1;
        max-width: 25%;
    }

    .month-separator {
        margin: 1.75rem 0 0.875rem;
    }
    .month-card {
        padding: 0.375rem 0.75rem;
        gap: 0.5rem;
    }
    .month-big {
        font-size: 1.5rem;
    }
    .month-sub-name {
        font-size: 0.8125rem;
    }

    .day-separator {
        margin: 1rem 0 0.5rem;
    }
}

/* ===== Login Page ===== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 透明背景, 让 body 的科技纹理透出 */
    background: transparent;
    padding: 1.25rem;
}

.login-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 24rem;
    box-shadow: var(--shadow-md);
}

.login-logo { text-align: center; margin-bottom: 2rem; }

.login-logo .logo-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-card);
    background: var(--color-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.login-logo h1 { font-size: 1.5rem; font-weight: 600; color: var(--color-primary); letter-spacing: -0.02em; }
.login-logo p { color: var(--color-muted); font-size: 0.875rem; margin-top: 0.25rem; }

.form-group { margin-bottom: 1.25rem; }

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.375rem;
}

.form-group input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    font-size: 0.9375rem;
    color: var(--color-primary);
    transition: var(--transition);
    font-family: var(--font-sans);
    background: var(--color-surface);
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(27, 54, 93, 0.12);
}

.btn-primary {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: var(--radius-btn);
    background: var(--color-blue);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-sans);
}

.btn-primary:hover { background: #142847; transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.95); }

.login-hint {
    text-align: center;
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border-radius: var(--radius-btn);
    font-size: 0.8125rem;
    color: var(--color-muted);
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-btn);
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
}

.alert-error { background: rgba(239, 68, 68, 0.08); color: var(--color-red); border: 1px solid rgba(239, 68, 68, 0.15); }
.alert-success { background: rgba(16, 185, 129, 0.08); color: var(--color-green); border: 1px solid rgba(16, 185, 129, 0.15); }

/* ===== Footer ===== */
.site-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 2.5rem 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.site-footer a { color: var(--color-primary); }
.site-footer .footer-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; }

/* ===== Modal ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease-out, visibility 300ms ease-out;
}

.modal-overlay.active { opacity: 1; visibility: visible; }

.modal {
    background: var(--color-surface);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    width: 100%;
    max-width: 40rem;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.97);
    transition: transform 300ms ease-out;
    box-shadow: var(--shadow-md);
}

.modal-overlay.active .modal { transform: scale(1); }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.modal-header h2 { font-size: 1.125rem; font-weight: 500; color: var(--color-primary); letter-spacing: -0.01em; }

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-muted);
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.modal-close:hover { background: var(--color-bg); color: var(--color-red); }
.modal-body { padding: 1.5rem; }

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border);
}

.btn-secondary {
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-sans);
}

.btn-secondary:hover { border-color: var(--color-muted); background: var(--color-bg); }

.form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    font-size: 0.9375rem;
    color: var(--color-primary);
    transition: var(--transition);
    font-family: var(--font-sans);
    background: var(--color-surface);
    resize: vertical;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(27, 54, 93, 0.12);
}

/* ===== Pagination ===== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem;
    padding: 0.5rem;
}

.pagination a, .pagination span {
    min-width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-btn);
    border: 1px solid var(--color-border);
    /* Kami 平面: ivory 底 */
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 200ms ease-out, border-color 200ms ease-out, background-color 200ms ease-out;
    text-decoration: none;
    padding: 0 0.75rem;
    letter-spacing: 0.01em;
}

.pagination a:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
    background: var(--tag-default);
}

.pagination .current {
    /* 选中分页: 油墨蓝实色 */
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: #faf9f5;
    font-weight: 600;
}

.pagination .current::after { content: none; }

/* ===== Empty State ===== */
.empty-state {
    text-align: center;
    padding: 4rem 1.5rem;
    color: var(--color-muted);
}

.empty-state .empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.3; }
.empty-state h3 { font-size: 1.125rem; font-weight: 600; color: var(--color-muted); margin-bottom: 0.5rem; }

/* ===== Toast ===== */
.toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-btn);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    z-index: 2000;
    transform: translateY(100px);
    opacity: 0;
    transition: var(--transition);
}

.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: var(--color-green); }
.toast.error { background: var(--color-red); }

/* ===== Back Link ===== */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.625rem 1.5rem;
    border-radius: var(--radius-btn);
    background: var(--color-blue);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--transition);
}

.btn-back:hover { background: #142847; transform: translateY(-1px); color: #fff; }
.back-link { text-align: center; margin-top: 1.25rem; }
.back-link a { color: var(--color-muted); font-size: 0.8125rem; }
.back-link a:hover { color: var(--color-blue); }

/* ===== Responsive ===== */
@media (max-width: 767px) {
    .hero h1 { font-size: 1.75rem; }
    .hero { padding: 2.5rem 1.25rem 1.5rem; }

    .site-header-inner { padding: 0 1rem; height: 56px; gap: 0.5rem; }
    .site-logo { font-size: 1rem; }
    .site-logo .logo-icon { width: 1.75rem; height: 1.75rem; }
    .site-nav { gap: 0.25rem; }
    .site-nav a { padding: 0.375rem 0.625rem; font-size: 0.8125rem; }

    .timeline-container { padding: 1rem 0.75rem 2.5rem; }
    .timeline-item { margin-bottom: 1.5rem; padding-left: 2.25rem; }
    .timeline-item .node-dot { left: 0.6875rem; }
    .timeline-item .timeline-card { padding: 1.75rem 0.875rem 0.875rem; }
    .card-title { font-size: 1rem; }
    .card-excerpt { font-size: 0.8125rem; }
    .timeline-item .date-label { top: 0.625rem; left: 0.875rem; font-size: 0.75rem; }
    .card-category { top: 0.625rem; right: 0.875rem; font-size: 0.6875rem; }

    /* 移动端灯箱 */
    .lightbox-nav { width: 36px; height: 36px; font-size: 22px; }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
    .lightbox-close { width: 34px; height: 34px; font-size: 20px; top: 10px; right: 12px; }

    .search-box { max-width: 100%; }
    .filter-chips { gap: 0.375rem; }
    .filter-bar .filter-chip { padding: 0.3125rem 0.75rem; font-size: 0.75rem; }

    .article-page { padding: 1.5rem 1rem 3.75rem; }
    .article-header h1 { font-size: 1.375rem; }
    .article-content { font-size: 0.875rem; }
    .article-content h2 { font-size: 1.125rem; }
    .article-breadcrumb { font-size: 0.75rem; }

    .article-nav { flex-direction: column; }
    .article-nav-link { max-width: 100%; }
    .article-nav .nav-next { text-align: left; }
    .article-nav-link.empty { display: none; }

    .article-meta { gap: 0.625rem; font-size: 0.8125rem; }

    .login-card { padding: 2rem 1.5rem; }

    /* ===== 移动端信息流卡片 + 时间轴分段变色动效 (方案A) ===== */
    /* 卡片密度: 间距收紧 */
    .timeline-item { margin-bottom: 0.875rem; }

    /* 普通文章摘要 4 行 */
    .card-excerpt { -webkit-line-clamp: 4; }

    /* 推文卡不裁剪: 原文多少字显示多少字 (预览定稿; DOM 内文本本就完整, 仅取消行数限制) */
    .card-excerpt.tweet-full {
        -webkit-line-clamp: unset;
        overflow: visible;
    }
    /* 推文已全文直出, "展开全文" 提示失去意义 → 隐藏 (桌面端机制不变) */
    .tweet-more-hint { display: none; }

    /* 触摸反馈: 按压缩放 */
    .timeline-item .timeline-card:active {
        transform: scale(0.975);
        box-shadow: var(--shadow-md);
    }

    /* 节点精确对齐轴线中心 (线 left:1.25rem 宽 2px → 中心 21px; 节点 13px+8px=21px) */
    .timeline-item .node-dot {
        left: 0.8125rem;
        top: 1.375rem;
        width: 0.75rem;
        height: 0.75rem;
        box-shadow: 0 0 0 2px var(--color-surface);
    }

    /* 日期分隔点挂轴 (原 padding-left:0 时贴左缘, 未对齐轴线) */
    .day-separator { padding-left: 0; }
    .day-dot { margin-left: 17px; width: 10px; height: 10px; }

    /* 分段变色填充层 (JS 动态创建, 仅 ≤767px 且 JS 启用时出现) */
    .tl-seg-layer {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }
    .tl-seg-fill {
        position: absolute;
        left: calc(1.25rem + 0.5px);   /* 1px 细线居中于 2px 灰色轨道 */
        top: 0;
        width: 1px;
        height: 0;
        border-radius: 1px;
    }

    /* 节点点亮与填充线同步: 线流到节点中心才点亮 (渐进增强: body.tl-spine-on 由 JS 添加)
       熄灭态用 filter 灰度化而非改 background — 保证 JS 重读分类色不受影响 */
    body.tl-spine-on .timeline-item .node-dot {
        filter: grayscale(1);
        opacity: 0.45;
        animation: none;
    }
    body.tl-spine-on .timeline-item .node-dot.node-lit {
        filter: none;
        opacity: 1;
        animation: tlNodePulse 2.6s ease-in-out infinite;
    }
    @keyframes tlNodePulse {
        0%, 100% {
            box-shadow: 0 0 0 2px var(--color-surface),
                        0 0 0 4px var(--node-halo, rgba(27, 54, 93, 0.14)),
                        0 0 8px var(--node-halo-strong, rgba(27, 54, 93, 0.25));
        }
        50% {
            box-shadow: 0 0 0 2px var(--color-surface),
                        0 0 0 7px var(--node-halo, rgba(27, 54, 93, 0.14)),
                        0 0 14px var(--node-halo-strong, rgba(27, 54, 93, 0.4));
        }
    }
}

/* ===== prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .timeline-item { opacity: 1; transform: none; }

    .timeline-item:hover .timeline-card,
    .timeline-item:nth-child(odd):hover .timeline-card,
    .timeline-item:nth-child(even):hover .timeline-card { transform: none; }

    .timeline-item:hover .node-dot { transform: none; }
}

/* ===== Focus visible ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.filter-chip:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ============================================================
   推文详情弹窗 — 照搬 X Bookmarks【卡片视图】互动界面
   左侧媒体舞台 + 右侧信息面板 (作者/日期/翻译/MD/下载/前往X)
   ============================================================ */
.tl-modal { position: fixed; inset: 0; z-index: 2000; display: none; }
.tl-modal.active { display: block; }
.tlm-backdrop {
    position: absolute; inset: 0;
    background: rgba(24, 22, 16, 0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.tlm-shell {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    pointer-events: none;
}
.tlm-shell > * { pointer-events: auto; }
.tlm-close {
    position: absolute; top: 18px; right: 22px; z-index: 5;
    width: 38px; height: 38px;
    border: none; border-radius: 50%;
    background: rgba(253, 252, 248, 0.92);
    color: var(--color-primary);
    font-size: 22px; line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform 200ms ease, background 200ms ease;
}
.tlm-close:hover { transform: scale(1.08); background: #fff; }

/* ---- 舞台 + 面板容器 ---- */
.tlm-shell::before { content: none; }
.tlm-stage, .tlm-panel { position: relative; }
.tl-modal.active .tlm-shell { pointer-events: none; }
.tl-modal.active .tlm-stage,
.tl-modal.active .tlm-panel,
.tl-modal.active .tlm-close { pointer-events: auto; }

@media (min-width: 861px) {
    .tlm-stage {
        width: min(60%, 880px);
        height: min(90vh, 900px);
        background: var(--color-deep);
        border-radius: 12px 0 0 12px;
        display: flex; align-items: center; justify-content: center;
        overflow: hidden;
        box-shadow: var(--shadow-float);
    }
    .tlm-panel {
        width: min(38%, 500px);
        height: min(90vh, 900px);
        background: var(--color-surface);
        border-radius: 0 12px 12px 0;
        display: flex; flex-direction: column;
        box-shadow: var(--shadow-float);
    }
}
@media (max-width: 860px) {
    .tlm-shell { padding: 0; align-items: stretch; }
    .tlm-stage {
        flex: 0 0 50vh;
        width: 100%;
        background: var(--color-deep);
        display: flex; align-items: center; justify-content: center;
        overflow: hidden;
    }
    .tlm-panel {
        flex: 1;
        width: 100%;
        background: var(--color-surface);
        display: flex; flex-direction: column;
        border-radius: 12px 12px 0 0;
        margin-top: -12px;
    }
    .tlm-close { top: 10px; right: 12px; }
    /* 移动端纯文字推文: 面板高度自适应内容, 不撑满整屏 */
    .tl-modal.tlm-text-only .tlm-panel {
        flex: 0 1 auto;
        max-height: 90vh;
    }
    .tl-modal.tlm-text-only .tlm-scroll {
        flex: 0 1 auto;
        max-height: calc(90vh - 120px);
    }
}

/* ---- 纯文字推文 (无媒体/无视频): 详情弹窗只展示文字面板 ---- */
.tl-modal.tlm-text-only .tlm-stage { display: none; }
@media (min-width: 861px) {
    .tl-modal.tlm-text-only .tlm-panel {
        width: min(94vw, 760px);
        height: auto;              /* 纯文字内容短, 不再固定 90vh 撑出底部空白 */
        max-height: min(90vh, 900px);
        border-radius: 12px;
    }
    /* 纯文字模式下滚动区不强制 flex:1 撑满, 按内容高度自适应 */
    .tl-modal.tlm-text-only .tlm-scroll {
        flex: 0 1 auto;
        max-height: calc(min(90vh, 900px) - 140px);
    }
}

/* ---- 媒体舞台 ---- */
.tlm-main {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.tlm-main img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    user-select: none;
}
/* 16:9 视频盒由 JS 等比适配舞台大小, 内容填满盒子, 不拉伸不裁切 */
.tlm-video {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.tlm-video img { width: 100%; height: 100%; object-fit: contain; }
.tlm-video video, .tlm-video iframe { width: 100%; height: 100%; border: 0; background: #000; }
.tlm-video-brand { color: rgba(255,255,255,0.5); font-size: 1.1rem; letter-spacing: 2px; }
.tlm-play {
    position: absolute;
    width: 74px; height: 74px;
    border: none; border-radius: 50%;
    background: rgba(253, 252, 248, 0.92);
    color: var(--color-x);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
    transition: transform 200ms ease;
}
.tlm-play:hover { transform: scale(1.08); }
.tlm-play svg { margin-left: 4px; }

.tlm-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
    /* 深色半透明底 + 白描边 + 阴影: 白色媒体背景上也能看清 */
    border: 2px solid rgba(255,255,255,0.85); border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 26px; line-height: 1;
    font-weight: 700;
    padding-bottom: 3px; /* ‹ › 字形偏上, 视觉居中 */
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.45);
    transition: background 200ms ease;
    z-index: 3;
}
.tlm-nav:hover { background: rgba(0,0,0,0.8); }
.tlm-prev { left: 12px; }
.tlm-next { right: 12px; }

.tlm-counter {
    position: absolute; bottom: 66px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.9);
    font-size: 0.8rem;
    background: rgba(0,0,0,0.4);
    padding: 3px 12px;
    border-radius: 999px;
    pointer-events: none;
}

.tlm-thumbs {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; gap: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    background: linear-gradient(transparent, rgba(0,0,0,0.55));
}
.tlm-thumb {
    flex: 0 0 52px; width: 52px; height: 52px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.55;
    border: 2px solid transparent;
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    transition: opacity 200ms ease, border-color 200ms ease;
}
.tlm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tlm-thumb.active { opacity: 1; border-color: var(--color-x); }
.tlm-thumb:hover { opacity: 1; }
/* 视频缩略图 (有封面): 封面铺满 + 播放角标, 多视频时可与图片缩略图区分 */
.tlm-thumb.is-video { position: relative; }
.tlm-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
}

/* ---- 信息面板 ---- */
.tlm-pub {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 18px 8px;
}
.tlm-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #efeadd, #e3dfd0);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-x);
    font-weight: 700;
}
.tlm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tlm-pub-info { display: flex; flex-direction: column; min-width: 0; }
.tlm-name { font-weight: 600; color: var(--color-primary); font-size: 1rem; } /* = 插件详情作者名 16px/w600 */
.tlm-handle { display: none; } /* 前台不展示作者 @账号 */
.tlm-cat {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--chip-color, var(--color-blue));
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.tlm-date-row {
    display: flex; align-items: center; gap: 7px;
    padding: 4px 18px 12px;
    color: var(--color-secondary);
    font-size: 0.8125rem; /* = 插件详情日期行 13px */
    border-bottom: 1px solid var(--color-border-subtle);
}
.tlm-date-label {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
}
/* 前台隐藏「在 X 中打开」按钮 */
.tl-modal .tlm-act-x { display: none !important; }
/* 前台推文详情弹窗隐藏「翻译 / 还原」与「下载媒体文件」按钮 */
.tl-modal #tlm-tr, .tl-modal #tlm-dl { display: none !important; }
.tlm-acts { margin-left: auto; display: flex; gap: 6px; }
.tlm-act {
    min-width: 32px; height: 32px; /* = 插件详情按钮 32px */
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-secondary);
    font-size: 0.875rem; /* = 插件详情按钮文字 14px */
    font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 200ms ease;
}
.tlm-act:hover { color: var(--color-x); border-color: var(--color-x); background: rgba(29, 155, 240, 0.06); transform: translateY(-1px); }
.tlm-act.active { color: #fff; background: var(--color-x); border-color: var(--color-x); }
.tlm-act:disabled { opacity: 0.5; cursor: wait; }
.tlm-act-x { font-weight: 700; }

.tlm-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px 18px;
}
.tlm-text {
    color: var(--color-primary);
    font-size: 1.0625rem; /* = 插件详情正文 17px */
    line-height: 1.6; /* Kami 阅读行距 1.5-1.55 档 */
    white-space: pre-wrap;
    word-break: break-word;
}
/* 服务端 content 内无 class 链接兜底: 推文超链接统一 X 蓝标注 */
.tlm-text a {
    color: var(--color-x);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tlm-text .tlm-link-url {
    color: var(--color-x);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: linear-gradient(transparent 62%, rgba(29, 155, 240, 0.14) 0);
    border-radius: 3px;
    padding: 0 2px;
}
.tlm-stats {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-secondary);
    font-size: 0.8125rem; /* = 插件详情统计 13px */
}

/* 推文卡片可点击态 */
.timeline-card.tweet-card { cursor: pointer; }
.tl-act-md.done, .tl-act-dl.done { color: #fff; background: var(--color-x); border-color: var(--color-x); }

/* ===== Selection ===== */
::selection { background: rgba(27, 54, 93, 0.14); color: var(--color-primary); }

/* ============================================================
   视频占位符 (需求 C): 推文视频未同步, 空占位提示待补 B 站视频
   ============================================================ */
/* 卡片/文章内空占位: 海报置灰 + 待补充角标 */
.card-video.ph-empty .card-video-poster { filter: grayscale(0.7) brightness(0.72); }

.card-video-ph-note {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #ffb4b4;
    background: rgba(120, 20, 20, 0.78);
    border: 1px solid rgba(255, 140, 140, 0.45);
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

.card-video-ph-note::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff8787;
    box-shadow: 0 0 6px rgba(255, 135, 135, 0.9);
}

/* 详情弹窗内空占位视频位: 海报 + 待补充提示 */
.tlm-video.ph-empty { position: relative; overflow: hidden; }
.tlm-video.ph-empty img { filter: grayscale(0.7) brightness(0.72); }

.tlm-ph-note {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #ffb4b4;
    background: rgba(120, 20, 20, 0.78);
    border: 1px solid rgba(255, 140, 140, 0.45);
    white-space: nowrap;
}

/* 弹窗缩略图条: 占位符 "待补" 角标 */
.tlm-thumb.is-ph { position: relative; }
.tlm-thumb.is-ph img { filter: grayscale(0.7) brightness(0.7); }
.tlm-thumb-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #ffb4b4;
    background: rgba(60, 10, 10, 0.45);
}

/* ===== 已阅角标: 用户点开过的推文卡片, 绿色勾选三角完美贴合左上角 (localStorage 记录) ===== */
.read-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border-top-left-radius: var(--radius-card, 8px); /* 与卡片左上圆角完全重合 */
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
    transform-origin: top left;
    animation: read-badge-in 260ms ease-out;
}

.read-badge svg {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes read-badge-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .read-badge { animation: none; }
}

/* ===== 画廊模式 (拓展端 GalleryView 迁移, 暗色主题适配为站点 Kami 亮色) ===== */

/* 切换按钮 — 复用筛选 chip 视觉语言 */
.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 1rem;
    border-radius: var(--radius-btn);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 350ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 350ms cubic-bezier(0.4, 0, 0.2, 1),
                color 350ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.view-toggle-btn:hover {
    color: var(--color-blue);
    border-color: var(--color-blue);
    box-shadow: var(--shadow-md);
}
body.gallery-mode .view-toggle-btn {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: #fff;
}

/* 画廊模式: 隐藏时间轴网格与左侧月份导航, 时间轴区域让瀑布流独占全宽;
   timeline-container 的 margin:0 auto 会以 auto 边距吃掉网格自由空间、抑制 stretch 拉伸,
   画廊内容 (container-type 组 + flex-basis:0 行) 固有宽度≈0 → 容器收缩成 26px 细条,
   故画廊模式下必须清除 auto 边距让网格项恢复拉伸占满轨道 */
body.gallery-mode .timeline-alternating,
body.gallery-mode .time-nav { display: none; }
body.gallery-mode .timeline-layout { grid-template-columns: minmax(0, 1fr); }
body.gallery-mode .timeline-container { margin: 0; }

/* 瀑布流容器 — column-count 多列瀑布流 (拓展端同款结构)
   列数由 JS 按媒体组数自适应 (g1/g2/g3/g4): 组少时降列保证错落感, 组多时回到拓展端 4 列 */
.gallery-masonry {
    column-count: 4;
    column-gap: 6px;
    padding: 2px 0;
}
.gallery-masonry.g1 { column-count: 1; }
.gallery-masonry.g2 { column-count: 2; }
.gallery-masonry.g3 { column-count: 3; }
.gallery-masonry.g4 { column-count: 4; }

/* 分组 = 一条推文的"相框" — 组内 justified 等高行拼图 (与卡片宫格同算法):
   行内格子等高、宽度按媒体真实比例分配恰好拼满 → 保持原比例且无留白无裁切;
   描边用 --color-border (比全站卡片深一档: 组内贴图无留白, 需清晰可辨的框线);
   hover 描边转油墨蓝 + 阴影浮起, 与卡片模式 hover 语言完全一致;
   container-type: inline-size 约束组固有宽度 (多列瀑布流的列宽平衡依赖此约束, 见上方 gallery-mode 说明) */
.gallery-group {
    break-inside: avoid;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--color-surface);
    border-radius: var(--radius-card);
    padding: 4px;
    border: 1px solid var(--color-border);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    box-shadow: var(--shadow-sm);
    container-type: inline-size;
    transition:
        border-color 300ms ease-out,
        box-shadow 300ms ease-out;
}
.gallery-group:hover {
    border-color: var(--color-blue);
    box-shadow: var(--shadow-md);
}

/* 组内拼图行: 行内等高、格子宽度按媒体真实比例 (--g-ar) 分配, 恰好拼满一行;
   选择器带 .gallery-masonry (0-3-0): 必须压过下方 .gallery-masonry .gallery-item
   的 aspect-ratio:auto 重置 (0-2-0, 同优先级靠后的规则会赢), 否则格子比例失效、行高塌 0 */
.gallery-group-row {
    display: flex;
    gap: 4px;
}
.gallery-masonry .gallery-group-row .gallery-item {
    flex: var(--g-ar, 1.5) 1 0%;    /* AR 作为 flex-grow → 行内宽度按比例分配 */
    aspect-ratio: var(--g-ar, 1.5); /* 盒子比例 = 媒体真实比例 → 图片完整显示不被裁剪 */
    min-height: 0;                  /* 覆盖基础样式的 min-height:80px, 行高完全由比例决定 */
}
/* 图片填满格子: 盒子比例已等于媒体真实比例, cover 仅消除亚像素缝隙不产生裁切
   (0-3-0 > .gallery-masonry .gallery-item img 的 0-2-1, 压过 height:auto 隔离规则) */
.gallery-masonry .gallery-group-row .gallery-item .gallery-thumb {
    height: 100%;
}

/* 单媒体推文: 图片不拉伸, 保持原始比例 */
.gallery-group-single .gallery-item {
    flex: 0 1 auto;
    max-width: 100%;
}

.gallery-item {
    flex: 1 1 0;
    min-width: 0;
    /* 4px = 组框圆角 8px - 内衬 4px, 与外框完全同心 (画框细节) */
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: var(--color-bg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: block;
    min-height: 80px;
}
.gallery-item:hover,
.gallery-item:focus-visible {
    transform: scale(1.03);
    box-shadow: var(--shadow-float);
    z-index: 1;
    outline: none;
}

.gallery-thumb {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 关键隔离: 文章卡片宫格 (L1300 起) 与画廊模式共用 .gallery-item 类名,
   其 aspect-ratio:1.5 + img height:100% 会把瀑布流压成整齐等高网格 — 在此重置,
   让图片恢复原始宽高比, 瀑布流才有拓展端那种参差错落感 */
.gallery-masonry .gallery-item { aspect-ratio: auto; }
.gallery-masonry .gallery-item img {
    height: auto;      /* 压过 .gallery-item img { height:100% } (0-2-1 > 0-1-1) */
    transform: none;   /* 抵消宫格 hover 的 img 放大, 避免与容器 hover 缩放叠加 */
}
.gallery-masonry .gallery-item:hover img { transform: none; }

/* 无海报视频的品牌占位 (海报兜底失败时) */
.gallery-thumb-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: var(--color-sand);
    color: var(--color-muted);
    font-size: 0.85rem;
}

/* 视频播放图标覆盖层 */
.gallery-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.gallery-play-icon {
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* hover 显示 @handle — 图片上的深色渐变在亮色主题下同样适用 */
.gallery-item-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 8px 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.gallery-item:hover .gallery-item-footer,
.gallery-item:focus-visible .gallery-item-footer {
    opacity: 1;
}
.gallery-user {
    color: white;
    font-size: 11px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 空状态 */
.gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--color-muted);
    text-align: center;
}
.gallery-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* 响应式列数 (拓展端同款断点) — 需带上 g1-g4 类选择器, 否则被更高优先级的自适应列数规则覆盖 */
@media (max-width: 1600px) {
    .gallery-masonry, .gallery-masonry.g4 { column-count: 3; }
}
@media (max-width: 1200px) {
    .gallery-masonry, .gallery-masonry.g3, .gallery-masonry.g4 { column-count: 2; }
}
@media (max-width: 700px) {
    .gallery-masonry, .gallery-masonry.g2, .gallery-masonry.g3, .gallery-masonry.g4 { column-count: 1; }
    .gallery-group { flex-wrap: wrap; }
    .gallery-item { flex: 1 1 calc(50% - 4px); }
}