/* =========================================================
   首页两列布局
   ========================================================= */
.my-home-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
}

@media (max-width: 900px) {
    .my-home-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   🟣 透明背景 + 渐变边框 + 高端未来风卡片
   ========================================================= */
.my-card {
    background: transparent;
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,0.10);
    transition: all .25s ease;
}

/* Hover 时出现渐变边框 */
.my-card:hover {
    border: 1px solid transparent;
}

.my-card:hover::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 18px;
    background: linear-gradient(135deg, #6a8dff, #9e67ff, #4cd8ff);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}


/* =========================================================
   顶部 Meta（pill 标签 + 半透明背景）
   ========================================================= */
.my-top-meta {
    padding: 15px 18px;
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* pill 标签 */
.my-top-meta a.mylink {
    background: rgba(120,150,255,0.15);
    color: #ffffff !important;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease;
}

.my-top-meta a.mylink:hover {
    background: rgba(140,170,255,0.25);
    color: #d0d0d0 !important;
}


/* =========================================================
   标题区（透明背景下分区显示）
   ========================================================= */
.my-title-zone {
    padding: 2px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* 副标题 */
.my-title-zone .t-cn a {
    font-size: 16px;
    color: #00deff !important;
    line-height: 2;
    display: inline-block;
}

/* 主标题 */
.my-title-zone .t-en a {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff !important;
    line-height: 2;
    display: inline-block;
    transition: transform .25s ease;
}

/* Hover 主标题浮动 */
.my-card:hover .my-title-zone .t-en a {
    transform: translateY(-3px);
}


/* =========================================================
   图片模块：16:9 + hover 缩放
   ========================================================= */
.my-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    position: relative;
}

.my-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.my-card:hover .my-thumb img {
    transform: scale(1.08);
}


/* =========================================================
   底部 info：透明背景 + 分割线
   ========================================================= */
.my-info-bar {
    padding: 10px 16px;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.10);
    color: #c7c7c7;
}

.my-info-bar a {
    color: #8cb6ff !important;
}

.my-info-bar span:nth-child(2) {
    color: #ddd !important;
}


/* =========================================================
   链接统一
   ========================================================= */
.my-card a,
.my-card a:hover,
.my-card a:focus {
    text-decoration: none !important;
    color: inherit !important;
}


/* =========================================================
   蓝色链接（非 pill 的其他链接，如作者）
   ========================================================= */
.my-card .mylink {
    color: #3A7AFE !important;
    transition: color 0.2s ease;
}

.my-card .mylink:hover {
    color: #1E5FFF !important;
}


/* 标题 hover：轻微变深，不跳色 */
.my-title-zone .t-en a:hover {
    color: #a8a8a8 !important;
}

.my-title-zone .t-cn a:hover {
    color: #b3f3fd !important;
}



.cat-level-1 {
    background: #d97706 !important;  /* Amber-600 */
    color: #ffffff !important;
    padding: 4px 14px;
    border-radius: 50px;
    font-weight: 600;
}
.cat-level-1:hover {
    background: #b45309 !important;
}


.cat-level-2 {
    background: #2563eb !important;  /* Blue-600 */
    color: #ffffff !important;
    padding: 4px 14px;
    border-radius: 50px;
    font-weight: 600;
}
.cat-level-2:hover {
    background: #1d4ed8 !important;
}


.cat-level-3 {
    background: #059669 !important;  /* Green-600 */
    color: #ffffff !important;
    padding: 4px 14px;
    border-radius: 50px;
    font-weight: 600;
}
.cat-level-3:hover {
    background: #047857 !important;
}


.topic-tag {
    background: #7c3aed !important;  /* Purple-600 */
    color: #ffffff !important;
    padding: 4px 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 12px;
}
.topic-tag:hover {
    background: #6d28d9 !important;
}

/* 更 Tiffany 的青色（看起来更贵） */
.topic-cyan {
    background: #2dd4bf !important;  /* Emerald/Cyan 混合 高级绿松石色 */
    color: #ffffff !important;
}

.topic-cyan:hover {
    background: #14b8a6 !important;
}

.my-title-zone .t-cn {
    margin: 0 !important;
    padding: 0 !important;
}

.my-title-zone .t-en {
    margin: 0 !important;
    padding: 0 !important;
}




/* ===========================================
   ☀️ Zibll 日间模式（body 上没有 dark-theme）
   =========================================== */
body:not(.dark-theme) .my-card {
    background: #f7f7f7 !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
}

body:not(.dark-theme) .my-top-meta {
    background: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    color: #555 !important;
}
body:not(.dark-theme) .my-top-meta a,
body:not(.dark-theme) .my-top-meta span {
    color: #555 !important;
}

body:not(.dark-theme) .my-title-zone {
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* 主标题 */
body:not(.dark-theme) .my-title-zone .t-en a {
    color: #222 !important;
}

/* 副标题 */
body:not(.dark-theme) .my-title-zone .t-cn a {
    color: #01a7ad !important;
}

/* 链接颜色（如标题可点击的那种） */
body:not(.dark-theme) .my-title-zone a {
    color: #666 !important;
}

body:not(.dark-theme) .my-title-zone a:hover {
    color: #01a7ad !important;
}

body:not(.dark-theme) .my-info-bar {
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    color: #555 !important;
}
body:not(.dark-theme) .info-container,
body:not(.dark-theme) .info-item {
    color: #333 !important;
}


/* ===========================================
   🌙 Zibll 夜间模式（body.dark-theme）
   =========================================== */
body.dark-theme .my-card {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
}

/* 顶部 meta */
body.dark-theme .my-top-meta {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    color: #cfd8dc !important;
}
body.dark-theme .my-top-meta a,
body.dark-theme .my-top-meta span {
    color: #ffffff !important;
}

/* 标题：主标题白色，副标题青色（你原本样式） */
body.dark-theme .my-title-zone .t-en a {
    color: #ffffff !important;
}
body.dark-theme .my-title-zone .t-cn a {
    color: #00deff !important;
}
body.dark-theme .my-title-zone .t-en a:hover {
    color: #e0e0e0 !important;
}
body.dark-theme .my-title-zone .t-cn a:hover {
    color: #b3f3fd !important;
}

/* 底部 info */
body.dark-theme .info-container,
body.dark-theme .info-item,
body.dark-theme .my-info-bar span {
    color: #ffffff !important;
}

/* 分类、专题 pill 文字保持白色 */
body.dark-theme .cat-level-1,
body.dark-theme .cat-level-2,
body.dark-theme .cat-level-3,
body.dark-theme .topic-tag,
body.dark-theme .topic-cyan {
    color: #ffffff !important;
}



/* =========================================================
   ☀️ 强制覆盖 Zibll 日间模式给分类加的 inline 字体颜色
   ========================================================= */

/* 覆盖所有分类 pill（Zibll 会在 inline style 写 color:#333） */
.my-card .cat-level-1[style],
.my-card .cat-level-2[style],
.my-card .cat-level-3[style],
.my-card .topic-tag[style],
.my-card .topic-cyan[style] {
    color: #ffffff !important;
}

/* 再提高一层权重，确保 100% 覆盖 */
body:not(.dark) .my-card .cat-level-1,
body:not(.dark) .my-card .cat-level-2,
body:not(.dark) .my-card .cat-level-3,
body:not(.dark) .my-card .topic-tag,
body:not(.dark) .my-card .topic-cyan {
    color: #ffffff !important;
}


/* =========================================================
   📌 文章信息条（首页 + 文章页统一视觉效果）
   ========================================================= */

.info-container {
    text-align: center;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.5px;

    /* 默认日间模式背景（浅→深→浅） */
    background: linear-gradient(
        to right,
        rgba(0,0,0,0),
        rgba(0,0,0,0.12),
        rgba(0,0,0,0.18),
        rgba(0,0,0,0.12),
        rgba(0,0,0,0)
    );

    color: #333 !important;   /* 日间文字颜色 */
}

/* 子元素也跟着变 */
.info-container * {
    color: inherit !important;
}

/* =========================================================
   🌙 夜间模式：深灰 → 黑色 → 深灰（对比更适合深色背景）
   ========================================================= */
body.dark-theme .info-container,
body.theme-dark .info-container,
body.dark .info-container,
body.dark-theme-active .info-container {
    background: linear-gradient(
        to right,
        rgba(255,255,255,0),
        rgba(255,255,255,0.07),
        rgba(255,255,255,0.15),
        rgba(255,255,255,0.07),
        rgba(255,255,255,0)
    );

    color: #f3f3f3 !important; /* 夜间白字 */
}

body.dark-theme .info-container *,
body.theme-dark .info-container *,
body.dark .info-container *,
body.dark-theme-active .info-container * {
    color: inherit !important;
}




body.dark-theme .info-container {
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.80) 50%,
        rgba(0,0,0,0) 100%
    ) !important;
    color: #f2f2f2 !important;
}

body.dark-theme .info-item {
    color: #f2f2f2 !important;
}


body:not(.dark-theme) .info-container {
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.12) 50%,
        rgba(0,0,0,0) 100%
    ) !important;
    color: #333 !important;
}

body:not(.dark-theme) .info-item {
    color: #333 !important;
}


/* ===== 轻量浏览量+评论数条 ===== */

.info-stats {
    margin-top: 8px;
    text-align: center;
    font-size: 13px;
    opacity: 0.75;
    display: flex;
    justify-content: center;
    gap: 18px;
}

/* 图标文字统一灰度 */
.info-stats span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 日间模式文本颜色 */
body:not(.dark-theme) .info-stats span {
    color: #555;
}

/* 夜间模式文本颜色 */
body.dark-theme .info-stats span {
    color: #ccc;
}