/* ====================================================
   Aneiang 品牌统一风格 · 完整最终版 v3.1
   代码块：极简干净 · 浅色背景 · 深色文字
   ==================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root {
    --brand-primary: #1a1a2e;
    --brand-accent: #4f46e5;
    --brand-accent-light: #818cf8;
    --brand-accent-bg: #eef2ff;
    --brand-gold: #c9a84c;
    --brand-gold-light: #e8d5a3;
    --brand-cyan: #0891b2;
    --bg: #f8f9fa;
    --card-bg: #ffffff;
    --card-border: #e9edf4;
    --text: #1a1a2e;
    --text-light: #5a6a7a;
    --text-muted: #94a3b8;
    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 2px 12px rgba(0,0,0,0.05);
    --shadow-hover: 0 12px 40px rgba(79,70,229,0.10);
    --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
    --sidebar-width: 300px;
    --gap: 36px;
    --font-sans: 'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-mono: 'JetBrains Mono','Fira Code','SF Mono','Consolas','Liberation Mono',monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    padding: 24px;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    animation: pageFadeIn 0.8s ease-out both;
}
@keyframes pageFadeIn {
    from { opacity:0; transform:translateY(16px); }
    to { opacity:1; transform:translateY(0); }
}

#home { max-width:1280px; margin:0 auto; }
/* ====================================================
   头部 · 高级质感版
   ==================================================== */

/* ---------- 1. 头部容器 ---------- */
#header {
    background: linear-gradient(145deg, #15152a 0%, #1a1a2e 50%, #1f1f3a 100%) !important;
    border-radius: 16px !important;
    padding: 0 !important;
    padding-left: 36px !important;
    padding-right: 40px !important;
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* 背景光晕（左上角） */
#header::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(79,70,229,0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* 背景光晕（右下角） */
#header::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(201,168,76,0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* 顶部金色细线（保留原有的流动动画，但更精致） */
#header .gold-line {
    display: none;  /* 改用更精致的方式 */
}

/* ---------- 2. 顶部细装饰条（用伪元素实现） ---------- */
#header::before,
#header::after {
    /* 这里的 before/after 已被光晕占用，改用新增元素方式 */
}
/* 改用额外伪元素无法直接加，我们通过 #blogTitle 的伪元素来实现 */


/* ---------- 3. 品牌区（左侧） ---------- */
#blogTitle {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 18px 0 !important;
    position: relative;
    z-index: 1;
}

/* Logo 图片 */
#blogTitle #lnkBlogLogo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
#blogTitle #blogLogo {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: url('//pic.cnblogs.com/face/1511303/20260630164222.png') !important;
    padding: 6px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
}
#blogTitle #blogLogo:hover {
    transform: scale(1.05) rotate(-2deg) !important;
    border-color: rgba(201,168,76,0.3) !important;
}

/* 标题文字组 */
#blogTitle h1 {
    margin: 0 !important;
    line-height: 1 !important;
}
#blogTitle h1 a {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-decoration: none !important;
    letter-spacing: -0.5px !important;
    background: linear-gradient(135deg, #ffffff 0%, #c9a84c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    transition: transform 0.3s ease !important;
    display: inline-block !important;
}
#blogTitle h1 a:hover {
    transform: scale(1.02) !important;
}

/* 副标题（如果 H2 有内容） */
#blogTitle h2 {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.35) !important;
    margin: 4px 0 0 0 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    display: none !important;  /* 默认隐藏，如果你有副标题可以改 display:block */
}

/* 品牌装饰分隔线（竖线） */
#blogTitle .brand-divider {
    display: none;  /* 用伪元素替代 */
}
/* 用伪元素在品牌右侧加一条细分隔线 */
#blogTitle::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 32px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.10), transparent);
}


/* ---------- 4. 导航区域（右侧） ---------- */
#navigator {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    padding: 18px 0 !important;
    position: relative;
    z-index: 1;
    flex-wrap: wrap !important;
}

/* 导航列表 */
#navList {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#navList li {
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}

#navList li a {
    display: inline-block !important;
    color: rgba(255,255,255,0.55) !important;
    text-decoration: none !important;
    padding: 6px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    letter-spacing: 0.3px !important;
}

/* 导航链接：下划线滑动动画 */
#navList li a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 50% !important;
    width: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, var(--brand-gold), var(--brand-accent-light)) !important;
    border-radius: 2px !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateX(-50%) !important;
    opacity: 0 !important;
}

#navList li a:hover::after {
    width: 60% !important;
    opacity: 1 !important;
}

#navList li a:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.06) !important;
    transform: translateY(-1px) !important;
}

/* 当前活动页（如果有） */
#navList li a.current,
#navList li a.active {
    color: #ffffff !important;
    background: rgba(201,168,76,0.12) !important;
}
#navList li a.current::after,
#navList li a.active::after {
    width: 60% !important;
    opacity: 1 !important;
}

/* 特殊：RSS 订阅按钮 */
#navList li a[data-rss] {
    background: rgba(201,168,76,0.10) !important;
    border: 1px solid rgba(201,168,76,0.15) !important;
    color: var(--brand-gold) !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
}
#navList li a[data-rss]::after {
    display: none !important;
}
#navList li a[data-rss]:hover {
    background: var(--brand-gold) !important;
    color: #1a1a2e !important;
    border-color: var(--brand-gold) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(201,168,76,0.25) !important;
}


/* ---------- 5. 统计信息 ---------- */
.blogStats {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    font-size: 12px !important;
    color: rgba(255,255,255,0.35) !important;
    padding: 4px 0 !important;
}

.blogStats span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* 统计数字标签样式 */
.blogStats span[id*="stats_"] {
    background: rgba(255,255,255,0.04) !important;
    padding: 2px 12px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    font-size: 11px !important;
    color: rgba(255,255,255,0.45) !important;
    transition: all 0.3s ease !important;
}
.blogStats span[id*="stats_"]:hover {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.7) !important;
    border-color: rgba(201,168,76,0.15) !important;
}

/* 阅读数特殊样式 */
.blogStats #stats-total-view-count {
    background: rgba(79,70,229,0.12) !important;
    border-color: rgba(79,70,229,0.10) !important;
    color: rgba(255,255,255,0.6) !important;
}
.blogStats #stats-total-view-count:hover {
    background: rgba(79,70,229,0.20) !important;
    border-color: rgba(79,70,229,0.20) !important;
}

.blogStats span span[title] {
    color: #c9a84c !important;
    font-weight: 600 !important;
}


/* ---------- 6. 顶部金色装饰条（替代之前的 flow 动画） ---------- */
/* 在 #header 顶部加一条细金线，用额外元素无法添加，用 #header 的伪元素已被光晕占用，
   我们使用 #header 的 box-shadow 内阴影来模拟顶部的金色光晕 */
#header {
    box-shadow: 
        0 4px 20px rgba(0,0,0,0.25),
        inset 0 2px 0 rgba(201,168,76,0.15),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
}


/* ---------- 7. 响应式适配 ---------- */
@media (max-width: 900px) {
    #header {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px 24px !important;
        min-height: auto !important;
        gap: 4px !important;
    }

    #blogTitle {
        padding: 4px 0 !important;
        width: 100% !important;
    }
    #blogTitle #blogLogo {
        width: 40px !important;
        height: 40px !important;
    }
    #blogTitle h1 a {
        font-size: 22px !important;
    }
    #blogTitle::after {
        display: none !important;
    }

    #navigator {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 8px 0 12px 0 !important;
        width: 100% !important;
        gap: 12px !important;
    }

    #navList {
        flex-wrap: wrap !important;
        gap: 2px !important;
        width: 100% !important;
    }
    #navList li a {
        padding: 4px 12px !important;
        font-size: 12px !important;
    }

    .blogStats {
        font-size: 11px !important;
        gap: 4px !important;
        padding-top: 4px !important;
        border-top: 1px solid rgba(255,255,255,0.04) !important;
        width: 100% !important;
    }
    .blogStats span[id*="stats_"] {
        padding: 1px 10px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 480px) {
    #header {
        padding: 16px 16px !important;
        border-radius: 12px !important;
    }
    #blogTitle h1 a {
        font-size: 18px !important;
    }
    #blogTitle #blogLogo {
        width: 32px !important;
        height: 32px !important;
    }
    #navList li a {
        font-size: 11px !important;
        padding: 3px 10px !important;
    }
    .blogStats span[id*="stats_"] {
        font-size: 9px !important;
        padding: 1px 8px !important;
    }
}

/* ====================================================
   两栏布局
   ==================================================== */
#main { display:flex; flex-direction:row; align-items:flex-start; gap:var(--gap); margin-top:28px; }
#mainContent { flex:1; min-width:0; }
#sideBar {
    flex:0 0 var(--sidebar-width); width:var(--sidebar-width);
    background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius);
    padding:28px 26px; align-self:flex-start; position:sticky; top:28px;
    box-shadow:var(--shadow); animation:fadeInUp 0.7s ease-out 0.2s both;
}
@keyframes fadeInUp { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }

/* ====================================================
   文章列表 · 针对 .day 结构重新设计
   ==================================================== */

/* ---------- 1. 每日文章容器（卡片） ---------- */
.day {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius) !important;
    padding: 28px 32px 20px 32px !important;
    margin-bottom: 32px !important;           /* 卡片之间大间距 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.02) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

.day:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 32px rgba(79,70,229,0.08), 0 4px 16px rgba(0,0,0,0.04) !important;
    border-color: var(--brand-accent-light) !important;
}

/* ---------- 2. 卡片之间的分隔装饰线 ---------- */
.day + .day {
    position: relative !important;
}
.day + .day::before {
    content: '' !important;
    position: absolute !important;
    top: -16px !important;
    left: 15% !important;
    right: 15% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, var(--brand-gold-light), var(--brand-accent-light), transparent) !important;
    opacity: 0.5 !important;
    border-radius: 2px !important;
}
.day + .day::after {
    content: '◆' !important;
    position: absolute !important;
    top: -24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: var(--brand-gold) !important;
    font-size: 9px !important;
    background: var(--bg) !important;
    padding: 0 12px !important;
    opacity: 0.4 !important;
}

/* ---------- 3. 日期标题 ---------- */
.day .dayTitle {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--brand-accent) !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--brand-accent-bg) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.day .dayTitle a {
    color: var(--brand-accent) !important;
    text-decoration: none !important;
}
.day .dayTitle::before {
    content: '📅 ' !important;
    font-size: 14px !important;
}

/* ---------- 4. 文章标题 ---------- */
.day .postTitle {
    margin-top: 14px !important;              /* 标题与日期/上一篇的间距 */
    margin-bottom: 6px !important;            /* 标题与摘要的间距 */
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}
.day .postTitle a {
    color: var(--text) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}
.day .postTitle a:hover {
    color: var(--brand-accent) !important;
}

/* ---- 置顶徽章 ---- */
.day .postTitle .pinned-post-mark {
    display: inline-block !important;
    background: linear-gradient(135deg, var(--brand-gold), #b8952e) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 1px 14px !important;
    border-radius: 20px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    box-shadow: 0 2px 8px rgba(201,168,76,0.25) !important;
}

/* ---------- 5. 文章摘要 ---------- */
.day .postCon {
    margin: 0 !important;
    padding: 0 !important;
}
.day .c_b_p_desc {
    color: var(--text-light) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    opacity: 0.85 !important;
    margin: 4px 0 8px 0 !important;
}
.day .c_b_p_desc .desc_img {
    display: none !important;                 /* 隐藏摘要图片，更干净 */
}
.day .c_b_p_desc .c_b_p_desc_readmore {
    color: var(--brand-accent) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    border-bottom: 2px solid rgba(79,70,229,0.15) !important;
    padding-bottom: 2px !important;
    transition: all 0.3s ease !important;
    margin-left: 6px !important;
}
.day .c_b_p_desc .c_b_p_desc_readmore:hover {
    color: var(--brand-gold) !important;
    border-bottom-color: var(--brand-gold) !important;
}

/* ---------- 6. 元信息（posted @ ... 编辑） ---------- */
.day .postDesc {
    margin-top: 10px !important;              /* 与摘要的间距，紧凑 */
    padding-top: 10px !important;
    border-top: 1px solid var(--card-border) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 14px !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
}
.day .postDesc a {
    color: var(--brand-accent) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}
.day .postDesc a:hover {
    color: var(--brand-gold) !important;
}
/* 编辑按钮特殊样式 */
.day .postDesc a[rel="nofollow"] {
    background: var(--brand-accent-bg) !important;
    padding: 1px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
.day .postDesc a[rel="nofollow"]:hover {
    background: var(--brand-accent) !important;
    color: #fff !important;
}

/* ---------- 7. 同一天多篇文章的分隔线 ---------- */
.day .postSeparator {
    display: block !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--brand-gold-light), var(--brand-accent-light), transparent) !important;
    margin: 20px 0 18px 0 !important;         /* 上下间距，明显分隔 */
    opacity: 0.5 !important;
    border: none !important;
    position: relative !important;
}
/* 分隔线上加一个小装饰点 */
.day .postSeparator::after {
    content: '●' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: var(--brand-gold) !important;
    font-size: 6px !important;
    background: var(--card-bg) !important;
    padding: 0 12px !important;
    opacity: 0.6 !important;
}

/* 同一天多篇文章时，第二篇及之后的标题需要额外上边距 */
.day .postSeparator + .postTitle {
    margin-top: 0 !important;                 /* 分隔线已经提供了间距 */
}

/* ---------- 8. 置顶卡片特殊标识 ---------- */
.day.pinned {
    border-left: 4px solid var(--brand-gold) !important;
    background: linear-gradient(135deg, var(--card-bg), rgba(201,168,76,0.02)) !important;
}
.day.pinned .dayTitle {
    border-bottom-color: rgba(201,168,76,0.2) !important;
}

/* ---------- 9. 响应式 ---------- */
@media (max-width: 900px) {
    .day {
        padding: 20px 20px 16px 20px !important;
        margin-bottom: 24px !important;
        border-radius: 12px !important;
    }
    .day .postTitle {
        font-size: 19px !important;
        margin-top: 10px !important;
    }
    .day .c_b_p_desc {
        font-size: 14px !important;
    }
    .day .postDesc {
        font-size: 12px !important;
        gap: 4px 10px !important;
        margin-top: 8px !important;
        padding-top: 8px !important;
    }
    .day .postSeparator {
        margin: 14px 0 12px 0 !important;
    }
    .day + .day::before {
        top: -12px !important;
        left: 8% !important;
        right: 8% !important;
        height: 1px !important;
    }
    .day + .day::after {
        top: -19px !important;
        font-size: 7px !important;
        padding: 0 8px !important;
    }
    .day.pinned {
        border-left-width: 3px !important;
    }
}

@media (max-width: 480px) {
    .day {
        padding: 14px 14px 12px 14px !important;
        margin-bottom: 16px !important;
        border-radius: 10px !important;
    }
    .day .dayTitle {
        font-size: 12px !important;
        margin-bottom: 8px !important;
        padding-bottom: 6px !important;
    }
    .day .postTitle {
        font-size: 17px !important;
        margin-top: 8px !important;
    }
    .day .c_b_p_desc {
        font-size: 13px !important;
    }
    .day .postDesc {
        font-size: 11px !important;
        gap: 4px 8px !important;
        flex-wrap: wrap !important;
        margin-top: 6px !important;
        padding-top: 6px !important;
    }
    .day .postDesc a[rel="nofollow"] {
        font-size: 10px !important;
        padding: 0 8px !important;
    }
    .day .postSeparator {
        margin: 10px 0 8px 0 !important;
    }
    .day .postSeparator::after {
        font-size: 5px !important;
        padding: 0 6px !important;
    }
    .day + .day::before,
    .day + .day::after {
        display: none !important;
    }
    .day.pinned {
        border-left-width: 3px !important;
        padding-left: 12px !important;
    }
}
/* ====================================================
   置顶文章 · 隐藏空日期区域
   ==================================================== */

/* 置顶文章隐藏日期区域（因为它是空的） */
.day.pinned .dayTitle {
    display: none !important;
}

/* 置顶文章的第一篇标题上边距调整为 0（因为日期被隐藏了） */
.day.pinned .postTitle:first-of-type {
    margin-top: 0 !important;
}

/* 置顶文章的卡片内边距调整（让标题与顶部更协调） */
.day.pinned {
    padding-top: 24px !important;   /* 原来 28px，稍微减少一点 */
}

/* 如果置顶文章有多篇，第二篇及之后的标题与分隔线的间距不变 */
.day.pinned .postSeparator + .postTitle {
    margin-top: 0 !important;
}
/* ====================================================
   文章正文（#cnblogs_post_body）
   ==================================================== */
#cnblogs_post_body {
    font-size:16px; line-height:1.85; color:var(--text);
}
#cnblogs_post_body h1 {
    font-size:30px; font-weight:700; margin:40px 0 20px;
    color:var(--brand-primary); letter-spacing:-0.3px;
}
#cnblogs_post_body h2 {
    font-size:26px; font-weight:600; margin:42px 0 18px;
    padding-bottom:12px; border-bottom:2px solid var(--brand-gold-light);
    color:var(--brand-primary);
}
#cnblogs_post_body h2::before { content:"◆ "; color:var(--brand-gold); font-size:16px; }
#cnblogs_post_body h3 {
    font-size:22px; font-weight:600; margin:32px 0 14px;
    color:var(--brand-primary);
}
#cnblogs_post_body h3::before { content:"▸ "; color:var(--brand-accent); }
#cnblogs_post_body h4 {
    font-size:18px; font-weight:600; margin:26px 0 12px;
    color:var(--brand-primary);
}
#cnblogs_post_body h5 {
    font-size:16px; font-weight:600; margin:22px 0 10px;
    color:var(--text-light);
}
#cnblogs_post_body p { margin:0 0 20px; line-height:1.85; }
#cnblogs_post_body a {
    color:var(--brand-accent); text-decoration:none;
    border-bottom:1px solid rgba(79,70,229,0.2); transition:var(--transition);
    font-weight:500;
}
#cnblogs_post_body a:hover { color:var(--brand-gold); border-bottom-color:var(--brand-gold); }
#cnblogs_post_body strong,#cnblogs_post_body b { color:var(--brand-primary); font-weight:600; }

/* ---- 表格 ---- */
#cnblogs_post_body table {
    width:100%; border-collapse:separate; border-spacing:0; margin:24px 0;
    border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow);
    font-size:14px;
}
#cnblogs_post_body table thead tr { background:var(--brand-primary); color:#fff; }
#cnblogs_post_body table th { padding:12px 18px; text-align:left; font-weight:600; letter-spacing:0.3px; font-size:13px; }
#cnblogs_post_body table td { padding:11px 18px; border-bottom:1px solid var(--card-border); vertical-align:top; }
#cnblogs_post_body table tbody tr { background:var(--card-bg); transition:var(--transition); }
#cnblogs_post_body table tbody tr:nth-child(even) { background:var(--brand-accent-bg); }
#cnblogs_post_body table tbody tr:hover { background:var(--brand-gold-light); }
#cnblogs_post_body table tbody tr:last-child td { border-bottom:none; }

/* ---- 引用块 ---- */
#cnblogs_post_body blockquote {
    border-left:4px solid var(--brand-gold);
    background:var(--brand-accent-bg);
    padding:18px 24px; margin:24px 0;
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    color:var(--text); font-style:italic; font-size:15.5px; line-height:1.8;
    box-shadow:var(--shadow);
}
#cnblogs_post_body blockquote p { margin-bottom:6px; }
#cnblogs_post_body blockquote p:last-child { margin-bottom:0; }
#cnblogs_post_body blockquote code { font-style:normal; }
#cnblogs_post_body blockquote:first-child {
    border-left-color:var(--brand-accent);
    background:linear-gradient(135deg,var(--brand-accent-bg),#f8f9fa);
    font-size:16px; padding:20px 28px;
}

/* ---- 列表 ---- */
#cnblogs_post_body ul,#cnblogs_post_body ol { padding-left:24px; margin:16px 0 20px; line-height:1.85; }
#cnblogs_post_body ul li,#cnblogs_post_body ol li { margin-bottom:6px; }
#cnblogs_post_body ul li::marker { color:var(--brand-gold); }
#cnblogs_post_body ol li::marker { color:var(--brand-accent); font-weight:600; }
#cnblogs_post_body ul ul,#cnblogs_post_body ol ol { margin-top:6px; margin-bottom:6px; }

/* ---- 图片 ---- */
#cnblogs_post_body img {
    max-width:100%; height:auto; border-radius:var(--radius-sm);
    border:1px solid var(--card-border); box-shadow:var(--shadow);
    margin:16px 0; transition:var(--transition); display:block;
}
#cnblogs_post_body img:hover { transform:scale(1.005); box-shadow:var(--shadow-hover); }

/* ---- 分割线 ---- */
#cnblogs_post_body hr {
    border:none; height:2px;
    background:linear-gradient(90deg,transparent,var(--brand-gold-light),var(--brand-accent-light),transparent);
    margin:36px 0; border-radius:2px;
}

/* ---- 目录 TOC ---- */
#cnblogs_post_body .toc,#cnblogs_post_body #toc {
    background:var(--brand-accent-bg); border-radius:var(--radius-sm);
    padding:18px 22px; margin:24px 0;
    border:1px solid var(--card-border);
}
#cnblogs_post_body .toc-title,#cnblogs_post_body #toc-title {
    font-size:16px; font-weight:600; color:var(--brand-primary); margin-bottom:10px;
}
#cnblogs_post_body .toc-title::before,#cnblogs_post_body #toc-title::before {
    content:"◆ "; color:var(--brand-gold);
}
#cnblogs_post_body .toc ul,#cnblogs_post_body #toc ul { list-style:none; padding-left:8px; }
#cnblogs_post_body .toc ul li,#cnblogs_post_body #toc ul li { padding:4px 0; }
#cnblogs_post_body .toc ul li a,#cnblogs_post_body #toc ul li a {
    color:var(--text); text-decoration:none; border-bottom:none; font-weight:400; transition:var(--transition);
}
#cnblogs_post_body .toc ul li a:hover,#cnblogs_post_body #toc ul li a:hover {
    color:var(--brand-accent); padding-left:4px;
}



/* ====================================================
   侧边栏
   ==================================================== */
#sideBar .catList,#blog-sidecolumn .catList { margin-bottom:32px !important; }
#sideBar .catListTitle,#blog-sidecolumn .catListTitle,#sidebar_news .catListTitle {
    font-size:14px !important; font-weight:600 !important;
    color:var(--brand-primary) !important;
    border-bottom:2px solid var(--brand-gold-light) !important;
    padding-bottom:10px !important; margin-bottom:16px !important;
    display:block !important; letter-spacing:0.5px; text-transform:uppercase;
}
#sideBar .catListTitle::before,#blog-sidecolumn .catListTitle::before,#sidebar_news .catListTitle::before {
    content:"◆" !important; color:var(--brand-gold) !important; margin-right:8px !important; font-size:10px !important;
}
#sideBar ul,#blog-sidecolumn ul { list-style:none !important; padding-left:0 !important; margin:0 !important; }
#sideBar ul li,#blog-sidecolumn ul li {
    padding:7px 12px !important; border-radius:6px !important;
    margin-bottom:2px !important; transition:var(--transition) !important;
    border-bottom:none !important;
}
#sideBar ul li:hover,#blog-sidecolumn ul li:hover { background:var(--brand-accent-bg) !important; }
#sideBar ul li a,#blog-sidecolumn ul li a {
    color:var(--text) !important; text-decoration:none !important;
    transition:var(--transition) !important; display:block !important;
    border-bottom:none !important; font-size:14px !important;
}
#sideBar ul li a:hover,#blog-sidecolumn ul li a:hover { color:var(--brand-accent) !important; transform:translateX(4px) !important; }

#sideBar .catListTag ul,#blog-sidecolumn .catListTag ul {
    display:flex !important; flex-wrap:wrap !important; gap:8px !important;
}
#sideBar .catListTag ul li,#blog-sidecolumn .catListTag ul li {
    background:transparent !important; padding:0 !important; margin:0 !important; border-radius:0 !important;
}
#sideBar .catListTag ul li a,#blog-sidecolumn .catListTag ul li a {
    background:var(--brand-accent-bg) !important; padding:4px 14px !important;
    border-radius:30px !important; font-size:12px !important;
    color:var(--brand-primary) !important; transition:var(--transition) !important;
    border:1px solid transparent !important;
}
#sideBar .catListTag ul li a:hover,#blog-sidecolumn .catListTag ul li a:hover {
    background:linear-gradient(135deg,var(--brand-accent),var(--brand-cyan)) !important;
    color:#fff !important; transform:scale(1.06) !important;
    box-shadow:0 4px 20px rgba(79,70,229,0.25) !important;
}

#sideBar .catListRanking ol,#blog-sidecolumn .catListRanking ol {
    counter-reset:item !important; list-style:none !important; padding-left:0 !important;
}
#sideBar .catListRanking ol li,#blog-sidecolumn .catListRanking ol li {
    padding:7px 12px 7px 32px !important; position:relative !important;
}
#sideBar .catListRanking ol li::before,#blog-sidecolumn .catListRanking ol li::before {
    content:counter(item) "." !important; counter-increment:item !important;
    position:absolute !important; left:8px !important;
    color:var(--brand-gold) !important; font-weight:700 !important; font-size:13px !important;
}

#sideBar .catListComment ul li,#blog-sidecolumn .catListComment ul li { padding:7px 12px !important; }
#sideBar .catListComment ul li a,#blog-sidecolumn .catListComment ul li a {
    color:var(--brand-accent) !important; font-weight:500 !important;
}
#sideBar .catListComment ul li .comment_body,#blog-sidecolumn .catListComment ul li .comment_body {
    color:var(--text-light) !important; font-size:13px !important;
    margin-top:4px !important; padding-left:12px !important;
    border-left:2px solid var(--brand-gold-light) !important;
}

#sidebar_news .sidebar-news { color:var(--text) !important; font-size:14px !important; line-height:1.8 !important; }

/* ====================================================
   文章底部元信息
   ==================================================== */
.postDesc {
    color:var(--text-light) !important; font-size:13px !important;
    margin-top:12px !important; padding-top:14px !important;
    border-top:1px solid var(--card-border) !important;
    display:flex !important; flex-wrap:wrap !important; gap:16px !important; align-items:center !important;
}
.postDesc a { color:var(--brand-accent) !important; text-decoration:none !important; transition:var(--transition) !important; }
.postDesc a:hover { color:var(--brand-gold) !important; }
.postDesc a[rel="nofollow"] {
    background:var(--brand-accent-bg) !important; color:var(--brand-accent) !important;
    padding:2px 14px !important; border-radius:20px !important; font-size:12px !important;
    border:none !important; transition:var(--transition) !important;
}
.postDesc a[rel="nofollow"]:hover { background:var(--brand-gold) !important; color:#fff !important; transform:scale(1.04) !important; }


/* ====================================================
   评论区 · 全新简洁版
   ==================================================== */

/* ---------- 1. 评论列表容器 ---------- */
#blog-comments-placeholder {
    margin-top: 40px !important;
}

/* ---------- 2. 标题栏 ---------- */
.feedback_area_title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--brand-primary) !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid var(--brand-gold-light) !important;
}

/* ---------- 3. 排序选项卡 ---------- */
#comment_sort {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 13px !important;
}
#comment_sort .comment-order-tab {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}
#comment_sort .comment-sort-label {
    cursor: pointer !important;
    padding: 2px 12px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    transition: all 0.25s ease !important;
}
#comment_sort .comment-sort-label:hover {
    color: var(--brand-accent) !important;
    background: var(--brand-accent-bg) !important;
}
#comment_sort .comment-sort-label.active {
    color: #fff !important;
    background: var(--brand-accent) !important;
}
#comment_sort .comment-order-tab span:not(.comment-sort-label) {
    color: var(--card-border) !important;
}
#comment_sort svg {
    fill: var(--text-muted) !important;
    cursor: pointer !important;
    width: 16px !important;
    height: 16px !important;
    transition: fill 0.3s ease !important;
}
#comment_sort svg:hover {
    fill: var(--brand-accent) !important;
}

/* ---------- 4. 无评论 ---------- */
.feedbackNoItems {
    text-align: center !important;
    padding: 30px 20px !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    background: #f8f9fa !important;
    border-radius: 10px !important;
    border: 1px dashed #e9edf4 !important;
}

/* ---------- 5. 单条评论 ---------- */
.feedbackItem {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    margin-bottom: 10px !important;
    transition: all 0.3s ease !important;
}
.feedbackItem:hover {
    border-color: var(--brand-accent-light) !important;
    box-shadow: 0 2px 12px rgba(79,70,229,0.06) !important;
}
.feedbackItem:last-child {
    margin-bottom: 0 !important;
}

/* 楼主评论 */
.feedbackItem:has(.louzhu) {
    border-left: 3px solid var(--brand-gold) !important;
}

/* ---------- 6. 评论头部 ---------- */
.feedbackListSubtitle {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 10px !important;
    margin-bottom: 4px !important;
}
.feedbackListSubtitle .layer {
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    background: var(--bg) !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
}
.feedbackListSubtitle .louzhu {
    background: var(--brand-gold) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 1px 12px !important;
    border-radius: 12px !important;
}
.feedbackListSubtitle a[href^="https://www.cnblogs.com/"] {
    color: var(--brand-accent) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: color 0.3s ease !important;
}
.feedbackListSubtitle a[href^="https://www.cnblogs.com/"]:hover {
    color: var(--brand-gold) !important;
}
.feedbackListSubtitle .comment_date {
    color: var(--text-muted) !important;
    font-size: 12px !important;
}

/* ---------- 7. 管理按钮 ---------- */
.feedbackManage {
    margin-left: auto !important;
}
.feedbackManage .comment_actions {
    display: flex !important;
    gap: 2px !important;
}
.feedbackManage .comment_actions a {
    color: var(--text-muted) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    padding: 1px 10px !important;
    border-radius: 12px !important;
    transition: all 0.25s ease !important;
}
.feedbackManage .comment_actions a:hover {
    color: var(--brand-accent) !important;
    background: var(--brand-accent-bg) !important;
}
.feedbackManage .comment_actions a[onclick*="DelComment"]:hover {
    color: #e74c3c !important;
    background: #fde8e8 !important;
}
.feedbackManage .comment_actions a[onclick*="GetCommentBody"]:hover {
    color: var(--brand-gold) !important;
    background: rgba(201,168,76,0.08) !important;
}

/* ---------- 8. 评论内容 ---------- */
.feedbackCon {
    margin-top: 4px !important;
    padding-left: 14px !important;
    border-left: 2px solid var(--brand-gold-light) !important;
}
.feedbackCon .blog_comment_body {
    font-size: 14px !important;
    line-height: 1.75 !important;
    color: var(--text) !important;
}
.feedbackCon .blog_comment_body p {
    margin: 4px 0 !important;
}
.feedbackCon .blog_comment_body a {
    color: var(--brand-accent) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(79,70,229,0.15) !important;
    transition: all 0.3s ease !important;
}
.feedbackCon .blog_comment_body a:hover {
    color: var(--brand-gold) !important;
    border-bottom-color: var(--brand-gold) !important;
}
.feedbackCon .blog_comment_body blockquote {
    background: var(--bg) !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    margin: 4px 0 !important;
    border-left: 3px solid var(--brand-accent) !important;
    color: var(--text-light) !important;
    font-size: 13px !important;
}
.feedbackCon .blog_comment_body code {
    background: var(--brand-accent-bg) !important;
    color: var(--brand-primary) !important;
    padding: 1px 8px !important;
    border-radius: 4px !important;
    font-size: 0.9em !important;
    font-family: var(--font-mono) !important;
}

/* ---------- 9. 支持/反对 ---------- */
.comment_vote {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid var(--card-border) !important;
    font-size: 12px !important;
    color: var(--text-muted) !important;
}
.comment_vote .comment_error {
    color: #e74c3c !important;
}
.comment_vote a {
    color: var(--text-muted) !important;
    text-decoration: none !important;
    padding: 1px 10px !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}
.comment_vote a:hover {
    color: var(--brand-accent) !important;
    background: var(--brand-accent-bg) !important;
}
.comment_vote a.comment_digg:hover {
    color: #22c55e !important;
    background: #dcfce7 !important;
}
.comment_vote a.comment_bury:hover {
    color: #e74c3c !important;
    background: #fde8e8 !important;
}

/* ---------- 10. 分页 ---------- */
#comment_pager_bottom,
#comment_pager_top {
    margin-top: 16px !important;
}
#comment_pager_bottom .pager,
#comment_pager_top .pager {
    display: flex !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 12px 0 !important;
    border-top: 1px solid var(--card-border) !important;
}
#comment_pager_bottom .pager a,
#comment_pager_top .pager a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 14px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    text-decoration: none !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    transition: all 0.3s ease !important;
}
#comment_pager_bottom .pager a:hover,
#comment_pager_top .pager a:hover {
    background: var(--brand-accent) !important;
    color: #fff !important;
    border-color: var(--brand-accent) !important;
}
#comment_pager_bottom .pager span,
#comment_pager_top .pager span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 14px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: var(--brand-accent) !important;
    border: 1px solid var(--brand-accent) !important;
}

/* ====================================================
   评论表单 · 全新简洁版
   ==================================================== */

/* ---------- 1. 表单整体容器 ---------- */
#comment_form {
    margin-top: 32px !important;
    padding-top: 28px !important;
    border-top: 2px solid var(--brand-gold-light) !important;
}

/* ---------- 2. 顶部操作栏 ---------- */
.comment-nav-right {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
}
.comment-nav-right a {
    color: var(--text-muted) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    padding: 3px 14px !important;
    border-radius: 14px !important;
    background: var(--bg) !important;
    border: 1px solid var(--card-border) !important;
    transition: all 0.3s ease !important;
}
.comment-nav-right a:hover {
    color: var(--brand-accent) !important;
    background: var(--brand-accent-bg) !important;
    border-color: var(--brand-accent-light) !important;
}
.comment-nav-right a[href="#top"] {
    background: var(--brand-primary) !important;
    color: #fff !important;
    border-color: var(--brand-primary) !important;
}
.comment-nav-right a[href="#top"]:hover {
    background: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
}

/* ---------- 3. 表单主体 ---------- */
#comment_form_container {
    background: var(--bg) !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    border: 1px solid var(--card-border) !important;
    margin-top: 6px !important;
}

/* 表单标题 */
#commentform_title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--brand-primary) !important;
    margin-bottom: 12px !important;
}
#commentform_title label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
#commentform_title a[href*="vip"] {
    font-size: 12px !important;
    color: var(--brand-gold) !important;
    text-decoration: none !important;
    margin-left: 12px !important;
    padding: 1px 12px !important;
    border-radius: 12px !important;
    background: rgba(201,168,76,0.08) !important;
    border: 1px solid rgba(201,168,76,0.15) !important;
    transition: all 0.3s ease !important;
}
#commentform_title a[href*="vip"]:hover {
    background: var(--brand-gold) !important;
    color: #fff !important;
}

/* 编辑器工具栏 */
.commentbox_title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
}
.commentbox_title_left {
    display: flex !important;
    gap: 4px !important;
}
.commentbox_tab {
    cursor: pointer !important;
    padding: 3px 12px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: all 0.25s ease !important;
}
.commentbox_tab:hover {
    color: var(--brand-accent) !important;
    background: var(--brand-accent-bg) !important;
}
.commentbox_tab.active {
    color: #fff !important;
    background: var(--brand-accent) !important;
}
.commentbox_title_right {
    display: flex !important;
    gap: 2px !important;
}
.comment_icon {
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    color: var(--text-muted) !important;
    transition: all 0.25s ease !important;
}
.comment_icon:hover {
    background: var(--brand-accent-bg) !important;
    color: var(--brand-accent) !important;
}
.comment_svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
}
.comment_svg_stroke {
    stroke: currentColor !important;
}

/* 文本框 */
#tbCommentBody {
    border: 1px solid var(--card-border) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    background: var(--card-bg) !important;
    color: var(--text) !important;
    width: 100% !important;
    min-height: 90px !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}
#tbCommentBody:focus {
    border-color: var(--brand-accent) !important;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.08) !important;
    outline: none !important;
}
#tbCommentBody::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.5 !important;
}

/* 预览 */
#tbCommentBodyPreview {
    border: 1px solid var(--card-border) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    min-height: 90px !important;
    background: var(--card-bg) !important;
}

/* 底部 */
.commentbox_footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
}
#ubb_auto_completion {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    color: var(--text-muted) !important;
    padding: 2px 10px !important;
    border-radius: 12px !important;
    transition: all 0.25s ease !important;
}
#ubb_auto_completion:hover {
    background: var(--brand-accent-bg) !important;
    color: var(--brand-accent) !important;
}
#ubb_auto_completion svg {
    width: 14px !important;
    height: 14px !important;
    fill: currentColor !important;
}

/* 提交区域 */
#commentbox_opt {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px !important;
}
#btn_comment_submit {
    background: linear-gradient(135deg, var(--brand-accent), var(--brand-cyan)) !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 32px !important;
    border-radius: 30px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: var(--font-sans) !important;
    transition: all 0.3s ease !important;
}
#btn_comment_submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(79,70,229,0.3) !important;
}
#span_comment_canceledit a,
#commentbox_opt a[onclick*="logout"] {
    color: var(--text-muted) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    padding: 3px 12px !important;
    border-radius: 14px !important;
    transition: all 0.3s ease !important;
}
#span_comment_canceledit a:hover {
    color: var(--brand-accent) !important;
    background: var(--brand-accent-bg) !important;
}
#commentbox_opt a[onclick*="logout"]:hover {
    color: #e74c3c !important;
    background: #fde8e8 !important;
}

/* 快捷键提示 */
#comment_form p:last-child {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    margin-top: 6px !important;
    opacity: 0.5 !important;
}

/* ---------- 4. 推荐区域 ---------- */
#cnblogs_ch {
    margin-top: 16px !important;
    padding: 10px 16px !important;
    background: var(--brand-accent-bg) !important;
    border-radius: 8px !important;
    border-left: 3px solid var(--brand-gold) !important;
}
#cnblogs_ch a {
    display: block !important;
    color: var(--text) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    transition: color 0.3s ease !important;
}
#cnblogs_ch a:hover {
    color: var(--brand-accent) !important;
}

/* ---------- 5. 编辑推荐 ---------- */
.under-post-card {
    margin-top: 16px !important;
    padding: 14px 18px !important;
    background: var(--bg) !important;
    border-radius: 10px !important;
    border: 1px solid var(--card-border) !important;
}
.under-post-card header {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--brand-primary) !important;
    margin-bottom: 6px !important;
}
.under-post-card header::before {
    content: '📌 ' !important;
}
.under-post-card ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.under-post-card ul li {
    padding: 3px 0 !important;
    border-bottom: 1px solid var(--card-border) !important;
}
.under-post-card ul li:last-child {
    border-bottom: none !important;
}
.under-post-card ul li a {
    color: var(--text) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    transition: color 0.3s ease !important;
}
.under-post-card ul li a:hover {
    color: var(--brand-accent) !important;
}

/* ---------- 6. 响应式 ---------- */
@media (max-width: 768px) {
    .feedback_area_title {
        font-size: 15px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    #comment_sort {
        font-size: 12px !important;
    }
    #comment_sort .comment-sort-label {
        font-size: 12px !important;
        padding: 1px 10px !important;
    }
    .feedbackItem {
        padding: 12px 14px !important;
        border-radius: 8px !important;
    }
    .feedbackListSubtitle {
        font-size: 12px !important;
        gap: 3px 8px !important;
    }
    .feedbackCon {
        padding-left: 10px !important;
    }
    .feedbackCon .blog_comment_body {
        font-size: 13px !important;
    }
    .feedbackManage {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 2px !important;
    }
    #comment_form_container {
        padding: 14px 14px !important;
        border-radius: 8px !important;
    }
    #tbCommentBody {
        min-height: 70px !important;
        font-size: 13px !important;
    }
    .commentbox_tab {
        font-size: 12px !important;
        padding: 2px 10px !important;
    }
    .comment_icon {
        width: 24px !important;
        height: 24px !important;
    }
    .comment_svg {
        width: 14px !important;
        height: 14px !important;
    }
    #btn_comment_submit {
        width: 100% !important;
    }
    #comment_pager_bottom .pager a,
    #comment_pager_top .pager a,
    #comment_pager_bottom .pager span,
    #comment_pager_top .pager span {
        min-width: 28px !important;
        height: 28px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
    .under-post-card {
        padding: 10px 14px !important;
    }
}

@media (max-width: 480px) {
    .feedbackItem {
        padding: 10px 12px !important;
        border-radius: 6px !important;
        margin-bottom: 8px !important;
    }
    .feedbackItem:has(.louzhu) {
        border-left-width: 2px !important;
    }
    .feedback_area_title {
        font-size: 14px !important;
        padding-bottom: 8px !important;
        margin-bottom: 14px !important;
    }
    #comment_sort .comment-sort-label {
        font-size: 11px !important;
        padding: 1px 8px !important;
    }
    .feedbackListSubtitle {
        font-size: 11px !important;
        gap: 2px 6px !important;
    }
    .feedbackListSubtitle .layer {
        font-size: 10px !important;
        padding: 0 6px !important;
    }
    .feedbackListSubtitle .louzhu {
        font-size: 9px !important;
        padding: 0 8px !important;
    }
    .feedbackListSubtitle a[href^="https://www.cnblogs.com/"] {
        font-size: 12px !important;
    }
    .feedbackCon {
        padding-left: 8px !important;
        border-left-width: 2px !important;
    }
    .feedbackCon .blog_comment_body {
        font-size: 12.5px !important;
        line-height: 1.7 !important;
    }
    .feedbackCon .blog_comment_body blockquote {
        font-size: 12px !important;
        padding: 4px 10px !important;
    }
    .feedbackManage .comment_actions a {
        font-size: 10px !important;
        padding: 0 6px !important;
    }
    .comment_vote {
        font-size: 11px !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
    .comment_vote a {
        padding: 0 6px !important;
    }
    #comment_form_container {
        padding: 10px 10px !important;
        border-radius: 6px !important;
    }
    #tbCommentBody {
        min-height: 60px !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
    #commentform_title {
        font-size: 14px !important;
    }
    .commentbox_tab {
        font-size: 11px !important;
        padding: 2px 8px !important;
    }
    .comment_icon {
        width: 22px !important;
        height: 22px !important;
    }
    .comment_svg {
        width: 13px !important;
        height: 13px !important;
    }
    #btn_comment_submit {
        font-size: 13px !important;
        padding: 7px 20px !important;
    }
    #comment_pager_bottom .pager,
    #comment_pager_top .pager {
        gap: 3px !important;
        flex-wrap: wrap !important;
    }
    #comment_pager_bottom .pager a,
    #comment_pager_top .pager a,
    #comment_pager_bottom .pager span,
    #comment_pager_top .pager span {
        min-width: 24px !important;
        height: 24px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
        border-radius: 4px !important;
    }
    .feedbackNoItems {
        padding: 16px 12px !important;
        font-size: 13px !important;
    }
    .comment-nav-right a {
        font-size: 11px !important;
        padding: 2px 10px !important;
    }
    .under-post-card {
        padding: 8px 12px !important;
        border-radius: 6px !important;
    }
    .under-post-card ul li a {
        font-size: 12px !important;
    }
    #cnblogs_ch {
        padding: 8px 12px !important;
    }
    #cnblogs_ch a {
        font-size: 12px !important;
    }
}


/* ====================================================
   页脚
   ==================================================== */
#footer {
    text-align:center; padding:32px 0 16px;
    color:var(--text-muted); font-size:14px;
    border-top:1px solid var(--card-border); margin-top:40px;
}
#footer a { color:var(--brand-accent); text-decoration:none; transition:var(--transition); }
#footer a:hover { color:var(--brand-gold); }
#footer .footer-brand { font-weight:600; color:var(--brand-primary); }

/* ====================================================
   滚动条
   ==================================================== */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--brand-accent),var(--brand-cyan)); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--brand-gold); }

/* ====================================================
   响应式
   ==================================================== */
@media (max-width:900px) {
    body { padding:16px; }
    #main { flex-direction:column; }
    #sideBar { flex:1 1 auto; width:100%; position:static; }
    #header { padding:20px 24px; }
    #header h1 a { font-size:22px; }
    .post { padding:20px; }
    .postTitle { font-size:20px; }
    #sideBar { padding:18px; }
    #navList li a { padding:4px 12px; font-size:12px; }
    .post { animation:none !important; opacity:1 !important; transform:none !important; }
    #sideBar { animation:none !important; opacity:1 !important; transform:none !important; }
    #cnblogs_post_body { font-size:15px; line-height:1.8; }
    #cnblogs_post_body h1 { font-size:24px; }
    #cnblogs_post_body h2 { font-size:21px; }
    #cnblogs_post_body h3 { font-size:18px; }
    #cnblogs_post_body h4 { font-size:16px; }
    #cnblogs_post_body table { font-size:13px; display:block; overflow-x:auto; white-space:nowrap; }
    #cnblogs_post_body table th,#cnblogs_post_body table td { padding:8px 12px; }
    #cnblogs_post_body blockquote { padding:14px 18px; font-size:14.5px; }
    .cnblogs_code,.hljs { padding:12px 14px !important; font-size:13px !important; line-height:1.7 !important; border-radius:4px !important; }
    #comment_form { padding:16px 14px !important; }
    #comment_form input[type="submit"] { width:100% !important; margin-right:0 !important; margin-bottom:8px !important; }
    #comment_form input[type="button"][value="退出"] { width:100% !important; text-align:center !important; }
    #blog-comments-placeholder .feedbackItem { padding:14px 16px; }
    .feedbackListSubtitle { font-size:14px; gap:4px 10px; }
    .feedbackCon .blog_comment_body { font-size:13.5px; }
    .feedbackManage .comment_actions a { font-size:11px; padding:1px 10px; }
    .feedback_area_title { flex-wrap:wrap; gap:8px; }
}
/* ====================================================
   代码块 · 精致阅读版（优化配色 + 细节）
   ==================================================== */

/* ---------- 1. 主容器 ---------- */
.cnblogs_code,
.hljs,
.cnblogs-markdown .hljs,
.cnblogs-post-body .hljs,
#cnblogs_post_body .cnblogs_code,
#cnblogs_post_body .hljs {
    background: #fcfcfd !important;              /* 极浅灰白底，比纯白更护眼 */
    color: #1e293b !important;                   /* 深灰蓝正文，更柔和 */
    padding: 22px 26px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;        /* 更柔和的边框 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.02) !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace !important;
    font-size: 15px !important;
    line-height: 1.8 !important;                 /* 行距稍宽，更透气 */
    overflow-x: auto !important;
    margin: 20px 0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* 容器悬浮效果（可选） */
.cnblogs_code:hover,
.hljs:hover,
#cnblogs_post_body .cnblogs_code:hover,
#cnblogs_post_body .hljs:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04) !important;
}

/* ---------- 2. 表格（行号支持） ---------- */
.cnblogs_code table,
.hljs table,
.cnblogs-markdown .hljs table,
#cnblogs_post_body .cnblogs_code table,
#cnblogs_post_body .hljs table {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    table-layout: auto !important;
}

.cnblogs_code table tbody,
.cnblogs_code table tr,
.hljs table tbody,
.hljs table tr,
.cnblogs-markdown .hljs table tbody,
.cnblogs-markdown .hljs table tr,
#cnblogs_post_body .cnblogs_code table tbody,
#cnblogs_post_body .cnblogs_code table tr,
#cnblogs_post_body .hljs table tbody,
#cnblogs_post_body .hljs table tr {
    display: table-row-group !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cnblogs_code table td,
.hljs table td,
.cnblogs-markdown .hljs table td,
#cnblogs_post_body .cnblogs_code table td,
#cnblogs_post_body .hljs table td {
    display: table-cell !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    vertical-align: top !important;
    box-shadow: none !important;
    text-align: left !important;
}

/* ---------- 3. 行号列 ---------- */
.cnblogs_code table td:first-child,
.hljs table td:first-child,
.cnblogs-markdown .hljs table td:first-child,
#cnblogs_post_body .cnblogs_code table td:first-child,
#cnblogs_post_body .hljs table td:first-child {
    width: 1% !important;
    white-space: nowrap !important;
    padding-right: 22px !important;
    text-align: right !important;
    color: #94a3b8 !important;                /* 更柔和的行号 */
    font-size: 13px !important;
    user-select: none !important;
    vertical-align: top !important;
    background: transparent !important;
    border: none !important;
    border-right: 1px solid #f1f5f9 !important;  /* 极淡分隔线 */
    padding-right: 18px !important;
    margin-right: 4px !important;
}

/* 行号列在响应式下隐藏分隔线 */
@media (max-width: 900px) {
    .cnblogs_code table td:first-child,
    .hljs table td:first-child,
    #cnblogs_post_body .cnblogs_code table td:first-child,
    #cnblogs_post_body .hljs table td:first-child {
        border-right: none !important;
        padding-right: 14px !important;
    }
}

.cnblogs_code table td:last-child,
.hljs table td:last-child,
.cnblogs-markdown .hljs table td:last-child,
#cnblogs_post_body .cnblogs_code table td:last-child,
#cnblogs_post_body .hljs table td:last-child {
    width: 100% !important;
    white-space: pre !important;
    word-break: break-word !important;
    overflow-x: auto !important;
    background: transparent !important;
    border: none !important;
    padding-left: 4px !important;
}

/* ---------- 4. 代码块内部滚动条 ---------- */
.cnblogs_code::-webkit-scrollbar,
.hljs::-webkit-scrollbar,
#cnblogs_post_body .cnblogs_code::-webkit-scrollbar,
#cnblogs_post_body .hljs::-webkit-scrollbar {
    height: 6px !important;
}
.cnblogs_code::-webkit-scrollbar-track,
.hljs::-webkit-scrollbar-track,
#cnblogs_post_body .cnblogs_code::-webkit-scrollbar-track,
#cnblogs_post_body .hljs::-webkit-scrollbar-track {
    background: transparent !important;
    border-radius: 10px !important;
}
.cnblogs_code::-webkit-scrollbar-thumb,
.hljs::-webkit-scrollbar-thumb,
#cnblogs_post_body .cnblogs_code::-webkit-scrollbar-thumb,
#cnblogs_post_body .hljs::-webkit-scrollbar-thumb {
    background: #d1d5db !important;
    border-radius: 10px !important;
}
.cnblogs_code::-webkit-scrollbar-thumb:hover,
.hljs::-webkit-scrollbar-thumb:hover,
#cnblogs_post_body .cnblogs_code::-webkit-scrollbar-thumb:hover,
#cnblogs_post_body .hljs::-webkit-scrollbar-thumb:hover {
    background: #9ca3af !important;
}

/* ---------- 5. 无行号后备 ---------- */
.cnblogs_code pre,
.hljs pre,
#cnblogs_post_body .cnblogs_code pre,
#cnblogs_post_body .hljs pre {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: pre !important;
}

/* ---------- 6. 行内代码 ---------- */
code:not(.hljs):not(.cnblogs_code code) {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    padding: 2px 10px !important;
    border-radius: 6px !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace !important;
    font-size: 0.88em !important;
    border: 1px solid #e2e8f0 !important;
    transition: background 0.15s ease !important;
}

/* ---------- 7. 高亮配色（精致版） ---------- */
/* 关键字、标签 — 用深邃蓝，不刺眼 */
.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr,
.hljs-built_in,
.hljs-class .hljs-title,
.hljs-meta-keyword,
.hljs-tag {
    color: #2563eb !important;              /* 宝石蓝 */
    font-weight: 600 !important;
}

/* 字符串 — 用暖橙红，比纯红更舒服 */
.hljs-string,
.hljs-type,
.hljs-literal,
.hljs-regexp,
.hljs-variable,
.hljs-template-variable,
.hljs-attribute,
.hljs-symbol,
.hljs-bullet {
    color: #dc2626 !important;              /* 正红，清晰但不刺眼 */
}

/* 注释 — 浅灰绿，降低干扰 */
.hljs-comment,
.hljs-deletion,
.hljs-meta {
    color: #94a3b8 !important;              /* 中性灰 */
    font-style: italic !important;
}

/* 数字 — 用紫罗兰，醒目且优雅 */
.hljs-number,
.hljs-char {
    color: #7c3aed !important;              /* 紫罗兰 */
}

/* 函数/方法名 — 用翠绿，清新易认 */
.hljs-function,
.hljs-title,
.hljs-section,
.hljs-selector-id,
.hljs-selector-class {
    color: #0d9488 !important;              /* 翠绿青 */
    font-weight: 600 !important;
}

/* 类型/类 — 用深海蓝，沉稳 */
.hljs-type,
.hljs-class .hljs-title {
    color: #1d4ed8 !important;              /* 深海蓝 */
}

/* 运算符/标点 — 深灰，不抢戏 */
.hljs-operator,
.hljs-punctuation {
    color: #334155 !important;
}

/* 参数 — 正文色 */
.hljs-params {
    color: #1e293b !important;
}

/* 预处理/元数据 */
.hljs-preprocessor,
.hljs-meta {
    color: #2563eb !important;
}

/* 变量 */
.hljs-variable {
    color: #dc2626 !important;
}

/* 链接 */
.hljs-link {
    color: #2563eb !important;
}

/* ---------- 8. 选中文本颜色 ---------- */
.cnblogs_code ::selection,
.hljs ::selection,
#cnblogs_post_body .cnblogs_code ::selection,
#cnblogs_post_body .hljs ::selection {
    background: #bfdbfe !important;          /* 淡蓝高亮 */
    color: #1e293b !important;
}

/* ---------- 9. 响应式 ---------- */
@media (max-width: 900px) {
    .cnblogs_code,
    .hljs,
    .cnblogs-markdown .hljs,
    .cnblogs-post-body .hljs,
    #cnblogs_post_body .cnblogs_code,
    #cnblogs_post_body .hljs {
        padding: 16px 18px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        line-height: 1.75 !important;
        margin: 16px 0 !important;
    }
    .cnblogs_code table td:first-child,
    .hljs table td:first-child,
    #cnblogs_post_body .cnblogs_code table td:first-child,
    #cnblogs_post_body .hljs table td:first-child {
        padding-right: 14px !important;
        font-size: 12px !important;
        border-right: none !important;
    }
    code:not(.hljs):not(.cnblogs_code code) {
        font-size: 0.85em !important;
        padding: 1px 8px !important;
    }
}
/* ====================================================
   不同语言专属高亮（追加到现有样式末尾）
   ==================================================== */

/* 确保所有代码块基础样式不变，但下面会覆盖特定语言的配色 */

/* ----- C# 语言 ----- */
#cnblogs_post_body [class*="language-csharp"] .hljs-keyword,
#cnblogs_post_body [class*="language-cs"] .hljs-keyword {
    color: #7c3aed !important;   /* 紫色 – C# 关键字（class, public 等） */
    font-weight: 700 !important;
}
#cnblogs_post_body [class*="language-csharp"] .hljs-string,
#cnblogs_post_body [class*="language-cs"] .hljs-string {
    color: #b91c1c !important;   /* 深红 – C# 字符串 */
}

/* ----- JavaScript 语言 ----- */
#cnblogs_post_body [class*="language-javascript"] .hljs-keyword,
#cnblogs_post_body [class*="language-js"] .hljs-keyword {
    color: #0d9488 !important;   /* 青色 – JS 关键字（const, let, function） */
    font-weight: 600 !important;
}
#cnblogs_post_body [class*="language-javascript"] .hljs-string,
#cnblogs_post_body [class*="language-js"] .hljs-string {
    color: #d97706 !important;   /* 琥珀色 – JS 字符串 */
}

/* ----- Python 语言 ----- */
#cnblogs_post_body [class*="language-python"] .hljs-keyword,
#cnblogs_post_body [class*="language-py"] .hljs-keyword {
    color: #2563eb !important;   /* 亮蓝 – Python 关键字（def, if, import） */
    font-weight: 700 !important;
}
#cnblogs_post_body [class*="language-python"] .hljs-string {
    color: #059669 !important;   /* 翠绿 – Python 字符串 */
}

/* ----- Bash / Shell ----- */
#cnblogs_post_body [class*="language-bash"] .hljs-keyword,
#cnblogs_post_body [class*="language-shell"] .hljs-keyword {
    color: #d97706 !important;   /* 橙色 – 命令关键字 */
    font-weight: 600 !important;
}
#cnblogs_post_body [class*="language-bash"] .hljs-string {
    color: #2563eb !important;   /* 蓝色 – 字符串 */
}

/* ----- JSON ----- */
#cnblogs_post_body [class*="language-json"] .hljs-attr {
    color: #7c3aed !important;   /* 紫色 – JSON 键名 */
    font-weight: 600 !important;
}
#cnblogs_post_body [class*="language-json"] .hljs-string {
    color: #b91c1c !important;   /* 深红 – JSON 字符串值 */
}
/* ====================================================
   代码块 · 背景气泡动画（极淡装饰）
   ==================================================== */

/* 确保代码块容器能裁剪气泡溢出部分，且保持水平滚动 */
.cnblogs_code,
.hljs,
.cnblogs-markdown .hljs,
.cnblogs-post-body .hljs,
#cnblogs_post_body .cnblogs_code,
#cnblogs_post_body .hljs {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;  /* 垂直方向裁剪气泡，不让它们溢出容器 */
}

/* 气泡层 —— 位于背景与文字之间 */
.cnblogs_code::before,
.hljs::before,
.cnblogs-markdown .hljs::before,
.cnblogs-post-body .hljs::before,
#cnblogs_post_body .cnblogs_code::before,
#cnblogs_post_body .hljs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;   /* 不干扰鼠标操作 */
    z-index: 0;             /* 放在背景层 */
    border-radius: inherit; /* 继承容器圆角 */

    /* 10 个极其淡雅的小气泡，大小 1.5～4px，颜色取自品牌色（蓝紫 & 金色），透明度极低 */
    background-image:
        radial-gradient(circle at 8% 90%, rgba(79,70,229,0.10) 2px, transparent 2px),
        radial-gradient(circle at 25% 80%, rgba(201,168,76,0.08) 3px, transparent 3px),
        radial-gradient(circle at 55% 95%, rgba(79,70,229,0.12) 1.5px, transparent 1.5px),
        radial-gradient(circle at 80% 70%, rgba(201,168,76,0.10) 2.5px, transparent 2.5px),
        radial-gradient(circle at 12% 60%, rgba(79,70,229,0.08) 4px, transparent 4px),
        radial-gradient(circle at 45% 50%, rgba(201,168,76,0.06) 3px, transparent 3px),
        radial-gradient(circle at 72% 40%, rgba(79,70,229,0.10) 2px, transparent 2px),
        radial-gradient(circle at 18% 30%, rgba(201,168,76,0.09) 3px, transparent 3px),
        radial-gradient(circle at 88% 20%, rgba(79,70,229,0.07) 2.5px, transparent 2.5px),
        radial-gradient(circle at 35% 10%, rgba(201,168,76,0.08) 2px, transparent 2px);

    background-repeat: no-repeat;
    background-size: 100% 100%;  /* 使每个渐变的坐标基于容器尺寸 */

    /* 动画：每个气泡从底部（y: 90%～10%）向上移动到顶部（y: -10%～-50%） */
    animation: bubbleFloat 14s linear infinite;
}

@keyframes bubbleFloat {
    0% {
        background-position:
            8% 90%, 25% 80%, 55% 95%, 80% 70%, 12% 60%,
            45% 50%, 72% 40%, 18% 30%, 88% 20%, 35% 10%;
    }
    100% {
        background-position:
            8% -10%, 25% -20%, 55% -5%, 80% -30%, 12% -15%,
            45% -25%, 72% -40%, 18% -35%, 88% -10%, 35% -20%;
    }
}

/* ====================================================
   文章列表 · 强化分隔（解决卡片粘连问题）
   ==================================================== */

/* ---------- 1. 文章卡片 —— 加大间距 + 强化阴影 ---------- */
.post {
    margin-bottom: 36px !important;           /* 增大卡片间距 */
    border-radius: 14px !important;
    border: 1px solid var(--card-border) !important;  /* 恢复边框，让卡片边界清晰 */
    background: var(--card-bg) !important;
    padding: 32px 36px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.02) !important;
    position: relative !important;
}

/* 卡片悬停时阴影加深，增强层次感 */
.post:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 32px rgba(79,70,229,0.08), 0 4px 16px rgba(0,0,0,0.04) !important;
    border-color: var(--brand-accent-light) !important;
}

/* ---------- 2. 卡片之间的分隔装饰线 ---------- */
.post + .post {
    position: relative !important;
}

/* 在两张卡片之间插入一条精致的装饰分隔线 */
.post + .post::before {
    content: '' !important;
    position: absolute !important;
    top: -18px !important;                    /* 正好在两张卡片中间 */
    left: 15% !important;
    right: 15% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--brand-gold-light), var(--brand-accent-light), transparent) !important;
    opacity: 0.4 !important;
    border-radius: 2px !important;
}

/* 中间的装饰小点 */
.post + .post::after {
    content: '◆' !important;
    position: absolute !important;
    top: -25px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: var(--brand-gold) !important;
    font-size: 10px !important;
    background: var(--bg) !important;
    padding: 0 12px !important;
    opacity: 0.5 !important;
}

/* ---------- 3. 置顶文章特殊标识 ---------- */
.post .postTitle .postTop {
    display: inline-block !important;
    background: linear-gradient(135deg, var(--brand-gold), #b8952e) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 14px !important;
    border-radius: 20px !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 8px rgba(201,168,76,0.25) !important;
}

/* 如果置顶是通过其他方式标记的，也可以兼容 */
.post .postTitle a:first-child::before {
    /* 如果标题里有 [置顶] 文字，给标题加个前缀装饰 */
}
/* 更通用的方式：检测标题是否包含 [置顶] */
.post .postTitle a:first-child {
    position: relative !important;
}

/* ---------- 4. 文章元信息（日期、分类等）与卡片底部保持距离 ---------- */
.postDesc {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--card-border) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px 20px !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
}

/* 阅读更多按钮右对齐 */
.postDesc .post-readmore,
.postDesc a[rel="bookmark"] {
    margin-left: auto !important;
    font-weight: 500 !important;
    color: var(--brand-accent) !important;
    text-decoration: none !important;
    border-bottom: 2px solid rgba(79,70,229,0.15) !important;
    padding-bottom: 2px !important;
    transition: all 0.3s ease !important;
}
.postDesc .post-readmore:hover,
.postDesc a[rel="bookmark"]:hover {
    color: var(--brand-gold) !important;
    border-bottom-color: var(--brand-gold) !important;
    transform: translateX(4px) !important;
}

/* ---------- 5. 分类标签美化 ---------- */
.postDesc .post-categories a,
.postDesc a[rel="category tag"] {
    background: var(--brand-accent-bg) !important;
    color: var(--brand-accent) !important;
    padding: 2px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
}
.postDesc .post-categories a:hover,
.postDesc a[rel="category tag"]:hover {
    background: var(--brand-accent) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(79,70,229,0.25) !important;
}

/* ---------- 6. 响应式 ---------- */
@media (max-width: 900px) {
    .post {
        padding: 24px 20px !important;
        margin-bottom: 24px !important;
        border-radius: 12px !important;
    }
    .post + .post::before {
        left: 10% !important;
        right: 10% !important;
        top: -12px !important;
    }
    .post + .post::after {
        top: -19px !important;
        font-size: 8px !important;
        padding: 0 8px !important;
    }
    .postDesc .post-readmore,
    .postDesc a[rel="bookmark"] {
        margin-left: 0 !important;
        width: 100% !important;
        text-align: right !important;
    }
}

@media (max-width: 480px) {
    .post {
        padding: 18px 16px !important;
        margin-bottom: 18px !important;
        border-radius: 10px !important;
    }
    .post + .post::before {
        display: none !important;
    }
    .post + .post::after {
        display: none !important;
    }
    .post .postTitle a:first-child {
        font-size: 17px !important;
    }
    .postDesc {
        font-size: 12px !important;
        gap: 8px 12px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .postDesc .post-readmore,
    .postDesc a[rel="bookmark"] {
        text-align: left !important;
    }
}
/* ====================================================
   文章列表 · 修复元信息间距 + 强化分隔
   ==================================================== */

/* ---------- 1. 文章卡片容器 ---------- */
#mainContent .post,
#home .post {
    margin-bottom: 40px !important;           /* 卡片之间加大间距 */
    padding: 28px 32px 20px 32px !important;  /* 底部 padding 减小，让元信息贴近内容 */
    border-radius: 14px !important;
    border: 1px solid var(--card-border) !important;
    background: var(--card-bg) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

#mainContent .post:hover,
#home .post:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 32px rgba(79,70,229,0.08), 0 4px 16px rgba(0,0,0,0.04) !important;
    border-color: var(--brand-accent-light) !important;
}

/* ---------- 2. 文章标题 ---------- */
#mainContent .postTitle,
#home .postTitle {
    margin-bottom: 8px !important;            /* 标题与摘要间距缩小 */
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

#mainContent .postTitle a,
#home .postTitle a {
    color: var(--text) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}
#mainContent .postTitle a:hover,
#home .postTitle a:hover {
    color: var(--brand-accent) !important;
}

/* ---------- 3. 文章摘要 ---------- */
#mainContent .postBody,
#mainContent .post-summary,
#mainContent .entry-summary,
#home .postBody,
#home .post-summary,
#home .entry-summary {
    margin: 6px 0 10px 0 !important;          /* 摘要上下间距紧凑 */
    color: var(--text-light) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    opacity: 0.85 !important;
}

/* ---------- 4. 元信息（posted @ ... 编辑）—— 紧贴摘要 ---------- */
#mainContent .postDesc,
#home .postDesc {
    margin-top: 8px !important;               /* 关键：减小与摘要的距离 */
    padding-top: 10px !important;             /* 关键：减小内边距 */
    border-top: 1px solid var(--card-border) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 16px !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
}

/* ---------- 5. 元信息中的链接（作者、编辑等） ---------- */
#mainContent .postDesc a,
#home .postDesc a {
    color: var(--brand-accent) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}
#mainContent .postDesc a:hover,
#home .postDesc a:hover {
    color: var(--brand-gold) !important;
}

/* ---------- 6. "阅读全文"按钮 ---------- */
#mainContent .postDesc .post-readmore,
#mainContent .postDesc a[rel="bookmark"],
#home .postDesc .post-readmore,
#home .postDesc a[rel="bookmark"] {
    margin-left: auto !important;
    font-weight: 500 !important;
    color: var(--brand-accent) !important;
    border-bottom: 2px solid rgba(79,70,229,0.15) !important;
    padding-bottom: 2px !important;
    transition: all 0.3s ease !important;
}
#mainContent .postDesc .post-readmore:hover,
#mainContent .postDesc a[rel="bookmark"]:hover,
#home .postDesc .post-readmore:hover,
#home .postDesc a[rel="bookmark"]:hover {
    color: var(--brand-gold) !important;
    border-bottom-color: var(--brand-gold) !important;
    transform: translateX(4px) !important;
}

/* ---------- 7. 分类标签 ---------- */
#mainContent .postDesc .post-categories a,
#mainContent .postDesc a[rel="category tag"],
#home .postDesc .post-categories a,
#home .postDesc a[rel="category tag"] {
    background: var(--brand-accent-bg) !important;
    color: var(--brand-accent) !important;
    padding: 1px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}
#mainContent .postDesc .post-categories a:hover,
#mainContent .postDesc a[rel="category tag"]:hover,
#home .postDesc .post-categories a:hover,
#home .postDesc a[rel="category tag"]:hover {
    background: var(--brand-accent) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

/* ---------- 8. 文章之间的分隔线（强化隔离） ---------- */
#mainContent .post + .post,
#home .post + .post {
    position: relative !important;
}

/* 卡片之间加一条精致的装饰分隔线 */
#mainContent .post + .post::before,
#home .post + .post::before {
    content: '' !important;
    position: absolute !important;
    top: -20px !important;                    /* 正好在两张卡片中间 */
    left: 10% !important;
    right: 10% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, var(--brand-gold-light), var(--brand-accent-light), transparent) !important;
    opacity: 0.6 !important;
    border-radius: 2px !important;
}

/* 中间的装饰小菱形 */
#mainContent .post + .post::after,
#home .post + .post::after {
    content: '◆' !important;
    position: absolute !important;
    top: -28px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: var(--brand-gold) !important;
    font-size: 10px !important;
    background: var(--bg) !important;
    padding: 0 12px !important;
    opacity: 0.4 !important;
}

/* ---------- 9. 置顶徽章 ---------- */
#mainContent .post .postTop,
#home .post .postTop {
    display: inline-block !important;
    background: linear-gradient(135deg, var(--brand-gold), #b8952e) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 14px !important;
    border-radius: 20px !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    box-shadow: 0 2px 8px rgba(201,168,76,0.25) !important;
}

/* ---------- 10. 响应式 ---------- */
@media (max-width: 900px) {
    #mainContent .post,
    #home .post {
        padding: 20px 20px 16px 20px !important;
        margin-bottom: 28px !important;
        border-radius: 12px !important;
    }
    #mainContent .postTitle,
    #home .postTitle {
        font-size: 19px !important;
    }
    #mainContent .postBody,
    #mainContent .post-summary,
    #mainContent .entry-summary,
    #home .postBody,
    #home .post-summary,
    #home .entry-summary {
        font-size: 14px !important;
    }
    #mainContent .postDesc,
    #home .postDesc {
        font-size: 12px !important;
        gap: 6px 12px !important;
    }
    #mainContent .post + .post::before,
    #home .post + .post::before {
        top: -14px !important;
        left: 5% !important;
        right: 5% !important;
        height: 1px !important;
    }
    #mainContent .post + .post::after,
    #home .post + .post::after {
        top: -21px !important;
        font-size: 8px !important;
        padding: 0 8px !important;
    }
    #mainContent .postDesc .post-readmore,
    #mainContent .postDesc a[rel="bookmark"],
    #home .postDesc .post-readmore,
    #home .postDesc a[rel="bookmark"] {
        margin-left: 0 !important;
        width: 100% !important;
        text-align: right !important;
    }
}

@media (max-width: 480px) {
    #mainContent .post,
    #home .post {
        padding: 16px 14px 12px 14px !important;
        margin-bottom: 20px !important;
        border-radius: 10px !important;
    }
    #mainContent .postTitle,
    #home .postTitle {
        font-size: 17px !important;
    }
    #mainContent .postBody,
    #mainContent .post-summary,
    #mainContent .entry-summary,
    #home .postBody,
    #home .post-summary,
    #home .entry-summary {
        font-size: 13px !important;
        margin: 4px 0 6px 0 !important;
    }
    #mainContent .postDesc,
    #home .postDesc {
        font-size: 11px !important;
        gap: 4px 10px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-top: 6px !important;
        padding-top: 8px !important;
    }
    #mainContent .postDesc .post-readmore,
    #mainContent .postDesc a[rel="bookmark"],
    #home .postDesc .post-readmore,
    #home .postDesc a[rel="bookmark"] {
        text-align: left !important;
    }
    #mainContent .post + .post::before,
    #mainContent .post + .post::after,
    #home .post + .post::before,
    #home .post + .post::after {
        display: none !important;
    }
}
/* ====================================================
   评论按钮对齐修复
   ==================================================== */

/* 1. 评论头部管理按钮右对齐 + 垂直居中 */
.feedbackManage {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
}

.feedbackManage .comment_actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* 2. 提交区域按钮水平对齐 */
#commentbox_opt {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 12px !important;
}

#commentbox_opt #btn_comment_submit,
#commentbox_opt #span_comment_canceledit,
#commentbox_opt a {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

/* 3. 楼层号与作者名垂直居中（可选） */
.feedbackListSubtitle {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 10px !important;
}
/* ====================================================
   提交评论区域 · 完整样式修复
   ==================================================== */

/* ---------- 1. 整个评论表单容器 ---------- */
#comment_form {
    margin-top: 32px !important;
    padding-top: 28px !important;
    border-top: 2px solid #e8d5a3 !important;
}

#comment_form_container {
    background: #f8f9fa !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    border: 1px solid #e9edf4 !important;
    margin-top: 6px !important;
}

/* ---------- 2. 标题行 ---------- */
#commentform_title {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #e9edf4 !important;
}

#commentform_title label {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
}

#commentform_title a[href*="vip"] {
    font-size: 12px !important;
    color: #c9a84c !important;
    text-decoration: none !important;
    padding: 2px 14px !important;
    border-radius: 20px !important;
    background: rgba(201,168,76,0.08) !important;
    border: 1px solid rgba(201,168,76,0.15) !important;
    transition: all 0.3s ease !important;
    margin-left: auto !important;
}

#commentform_title a[href*="vip"]:hover {
    background: #c9a84c !important;
    color: #fff !important;
}

/* ---------- 3. 工具栏 ---------- */
.commentbox_title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

.commentbox_title_left {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.commentbox_tab {
    cursor: pointer !important;
    padding: 4px 16px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: all 0.3s ease !important;
}

.commentbox_tab:hover {
    color: #4f46e5 !important;
    background: #eef2ff !important;
}

.commentbox_tab.active {
    color: #fff !important;
    background: #4f46e5 !important;
}

.commentbox_title_right {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}

.comment_icon {
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 6px !important;
    color: #94a3b8 !important;
    transition: all 0.25s ease !important;
    border: none !important;
    background: transparent !important;
}

.comment_icon:hover {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

.comment_svg {
    width: 17px !important;
    height: 17px !important;
    fill: currentColor !important;
}

/* ---------- 4. 文本框 ---------- */
#tbCommentBody {
    border: 1px solid #e9edf4 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    background: #ffffff !important;
    color: #1a1a2e !important;
    width: 100% !important;
    min-height: 100px !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    resize: vertical !important;
}

#tbCommentBody:focus {
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 4px rgba(79,70,229,0.06) !important;
    outline: none !important;
}

#tbCommentBody::placeholder {
    color: #94a3b8 !important;
    opacity: 0.5 !important;
}

/* 预览区域 */
#tbCommentBodyPreview {
    border: 1px solid #e9edf4 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    min-height: 100px !important;
    background: #ffffff !important;
}

/* ---------- 5. 底部选项 ---------- */
.commentbox_footer {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-top: 10px !important;
}

#ubb_auto_completion {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    transition: all 0.25s ease !important;
    border: 1px solid transparent !important;
}

#ubb_auto_completion:hover {
    background: #eef2ff !important;
    color: #4f46e5 !important;
    border-color: #818cf8 !important;
}

#ubb_auto_completion svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
}

/* ---------- 6. 提交按钮区域（核心修复） ---------- */
#commentbox_opt {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid #e9edf4 !important;
}

/* 提交评论按钮 */
#btn_comment_submit {
    background: linear-gradient(135deg, #4f46e5, #0891b2) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 40px !important;
    border-radius: 30px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15) !important;
    line-height: 1.5 !important;
    height: auto !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

#btn_comment_submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(79, 70, 229, 0.30) !important;
    background: linear-gradient(135deg, #4338ca, #0e7490) !important;
}

#btn_comment_submit:active {
    transform: translateY(0px) !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15) !important;
}

/* 取消编辑按钮（动态出现的） */
#span_comment_canceledit {
    display: inline-flex !important;
    align-items: center !important;
}

#span_comment_canceledit a {
    color: #94a3b8 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 20px !important;
    border-radius: 30px !important;
    border: 1px solid #e9edf4 !important;
    transition: all 0.3s ease !important;
    background: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.5 !important;
    min-height: 44px !important;
}

#span_comment_canceledit a:hover {
    color: #4f46e5 !important;
    border-color: #818cf8 !important;
    background: #eef2ff !important;
}

/* 退出登录按钮 */
#commentbox_opt a[onclick*="logout"] {
    color: #94a3b8 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 20px !important;
    border-radius: 30px !important;
    border: 1px solid #e9edf4 !important;
    transition: all 0.3s ease !important;
    background: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.5 !important;
    min-height: 44px !important;
}

#commentbox_opt a[onclick*="logout"]:hover {
    color: #e74c3c !important;
    border-color: #e74c3c !important;
    background: #fde8e8 !important;
}

/* 错误提示 */
#tip_comment,
#tip_comment2 {
    color: #e74c3c !important;
    font-size: 13px !important;
    margin: 6px 0 !important;
    display: block !important;
    width: 100% !important;
}

/* ---------- 7. 快捷键提示 ---------- */
#comment_form p:last-child {
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin-top: 8px !important;
    opacity: 0.4 !important;
    text-align: right !important;
}

/* ---------- 8. 响应式 ---------- */
@media (max-width: 768px) {
    #comment_form_container {
        padding: 14px 14px !important;
    }

    #commentform_title {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
    #commentform_title a[href*="vip"] {
        margin-left: 0 !important;
    }

    .commentbox_title {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }
    .commentbox_title_left {
        justify-content: center !important;
    }
    .commentbox_title_right {
        justify-content: center !important;
    }

    #commentbox_opt {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    #btn_comment_submit {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px 20px !important;
        min-height: 48px !important;
    }

    #span_comment_canceledit a,
    #commentbox_opt a[onclick*="logout"] {
        width: 100% !important;
        justify-content: center !important;
        min-height: 44px !important;
        padding: 8px 16px !important;
    }

    #comment_form p:last-child {
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    #comment_form_container {
        padding: 10px 10px !important;
        border-radius: 8px !important;
    }

    #commentform_title {
        font-size: 14px !important;
    }
    #commentform_title label {
        font-size: 14px !important;
    }

    .commentbox_tab {
        font-size: 12px !important;
        padding: 3px 12px !important;
    }

    .comment_icon {
        width: 26px !important;
        height: 26px !important;
    }
    .comment_svg {
        width: 15px !important;
        height: 15px !important;
    }

    #tbCommentBody {
        min-height: 70px !important;
        font-size: 13px !important;
        padding: 10px 12px !important;
    }

    #btn_comment_submit {
        font-size: 13px !important;
        padding: 8px 16px !important;
        min-height: 44px !important;
        border-radius: 24px !important;
    }

    #span_comment_canceledit a,
    #commentbox_opt a[onclick*="logout"] {
        font-size: 12px !important;
        padding: 6px 14px !important;
        min-height: 40px !important;
    }
}
.comment_btn
{
    width: auto !important;
}
.comment_textarea
{
    width: auto !important;
}