/* ============================================================ */
/* 作者 · keai.cn                                  */
/* 日期 · 2026.10.08~2026.10.10                                  */
/* 地点 · 杭州 / 厦门                                  */
/* 可爱风格 · 帖子页样式总集                                     */
/* 来源：viewthread_node.htm 内多个内联 <style> 合并               */
/* 保存编码：ANSI / GB2312                                      */
/* ============================================================ */

/* ============================================================ */
/* 作者 · keai.cn                                  */
/* 日期 · 2026.10.08~2026.10.10                                  */
/* 地点 · 杭州 / 厦门                                  */
/* 【区块 1】TAG 区域（可爱的人们还喜欢看）                        */
/* 作用：标题“可爱的人们还喜欢看：”、TAG 词小胶囊、相关内容列表    */
/* ============================================================ */

/* 新增：TAG 区块容器 */
.keai-tag-area {
    margin: 20px 0;
    padding: 1px 1px 1px 1px; /* 18:02 2026.10.08 TAG 区块容器原16px 18px */
    background: #fafbfc;
    border-radius: 10px;
    border: 1px solid #eef0f3;
}
/* 新增：区块标题“可爱的人们还喜欢看：” */
.keai-tag-area > h3,
.keai-tag-area .keai-tag-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin: 0 0 10px;
    padding: 0;
    border: none;
    letter-spacing: 1px;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}
.keai-tag-area > h3::before,
.keai-tag-area .keai-tag-title::before {
    content: "\2756 ";
    font-size: 13px;
}
/* 新增：TAG 词小胶囊 */
.keai-tag-pills {
    margin: 0 0 12px;
    padding: 0;
    line-height: 2.2;
}
.keai-tag-pills a,
.keai-tag-pills .keai-tag-pill {
    display: inline-block;
    padding: 3px 14px;
    margin: 0 6px 6px 0;
    background: linear-gradient(135deg, #e8f5e9, #d4edda);
    color: #2E7D32;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.6;
    text-decoration: none;
    transition: all .25s ease;
    border: 1px solid transparent;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}
.keai-tag-pills a:hover {
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(76,175,80,.28);
    border-color: #2E7D32;
}
/* 新增：TAG 对应的相关内容列表 */
.keai-tag-area .keai-tag-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.keai-tag-area .keai-tag-list li {
    position: relative;
    padding: 6px 0 6px 20px;
    font-size: 13px;
    line-height: 1.7;
    color: #555;
    border-bottom: 1px dashed #eef0f3;
    transition: color .2s ease;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}
.keai-tag-area .keai-tag-list li:last-child {
    border-bottom: none;
}
.keai-tag-area .keai-tag-list li::before {
    content: "\2022";
    position: absolute;
    left: 6px;
    top: 5px;
    color: #4CAF50;
    font-weight: 700;
    font-size: 14px;
}
.keai-tag-area .keai-tag-list li:hover {
    color: #2E7D32;
}
.keai-tag-area .keai-tag-list li a {
    color: inherit;
    text-decoration: none;
}

/* ============================================================ */
/* 作者 · keai.cn                                  */
/* 日期 · 2026.10.08~2026.10.10                                  */
/* 地点 · 杭州 / 厦门                                  */
/* 【区块 2】三栏上下篇导航（上篇 | 栏目 | 下篇）                  */
/* 作用：TAG 下方、热门上方的三栏导航卡片                          */
/* ============================================================ */

/* 新增：三栏上下篇导航容器 */
.thread-nav {
    display: flex;
    gap: 10px;
    margin: 18px 0;
    font-size: 13px;
    align-items: stretch;
}
.thread-nav .nav-cell {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}
/* 新增：单张导航卡片 */
.thread-nav .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 11px 14px;
    border-radius: 10px;
    background: #fafafa;
    border: 1px solid #ececec;
    text-decoration: none;
    color: #333;
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    min-width: 0;
    gap: 6px;
}
/* 新增：卡片左右竖条 */
.thread-nav .nav-item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    transition: width .25s ease;
    z-index: 3;
}
.thread-nav .nav-prev::before {
    left: 0;
    background: linear-gradient(180deg, #4CAF50, #2E7D32);
}
.thread-nav .nav-next::before {
    right: 0;
    background: linear-gradient(180deg, #a855f7, #8800EE);
}
/* 新增：上篇 → 光从右往左扫 */
.thread-nav .nav-prev::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60%;
    background: linear-gradient(90deg, transparent, rgba(76,175,80,0.28), transparent);
    transform: translateX(220%);
    animation: shine-right-to-left 3.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes shine-right-to-left {
    0%   { transform: translateX(220%); }
    60%  { transform: translateX(-100%); }
    100% { transform: translateX(-100%); }
}
/* 新增：下篇 → 光从左往右扫 */
.thread-nav .nav-next::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60%;
    background: linear-gradient(90deg, transparent, rgba(136,0,238,0.30), transparent);
    transform: translateX(-100%);
    animation: shine-left-to-right 3.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes shine-left-to-right {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(220%); }
    100% { transform: translateX(220%); }
}
/* 新增：悬停浮起 */
.thread-nav a.nav-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    background: #fff;
}
.thread-nav a.nav-item:hover::before {
    width: 6px;
}
/* 新增：圈圈（上篇 / 下篇 / 栏目） */
.thread-nav .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 300;
    color: #fff;
    letter-spacing: 3px;
    line-height: 1.5;
    position: relative;
    z-index: 2;
}
.thread-nav .nav-prev .nav-icon {
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
    box-shadow: 0 2px 8px rgba(76,175,80,.35);
}
.thread-nav .nav-next .nav-icon {
    background: linear-gradient(135deg, #a855f7, #8800EE);
    box-shadow: 0 2px 8px rgba(136,0,238,.35);
}
/* 新增：标题（最多两行） */
.thread-nav .nav-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #333;
    line-height: 1.5;
    transition: color .25s ease;
    word-break: break-all;
    position: relative;
    z-index: 2;
}
.thread-nav .nav-prev:hover .nav-title { color: #2E7D32; }
.thread-nav .nav-next:hover .nav-title { color: #8800EE; }
/* 新增：中间“栏目”卡片 - 渐变动画 */
.thread-nav .nav-forum {
    background: linear-gradient(135deg, #fff0f6, #ffe4ef 52%, #ffd6e8);
    background-size: 220% 220%;
    border-color: #ffd5e5;
    animation: btnFlow 5s ease infinite;
}
@keyframes btnFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.thread-nav .nav-forum::before,
.thread-nav .nav-forum::after { display: none; }
.thread-nav .nav-forum .nav-icon {
    background: linear-gradient(135deg, #ff8ab5, #E74C9C);
    box-shadow: 0 2px 8px rgba(231,76,156,.35);
}
.thread-nav .nav-forum .nav-title {
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #E74C9C;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.thread-nav a.nav-forum:hover { border-color: #E74C9C; }
.thread-nav a.nav-forum:hover .nav-title { color: #c0392b; }
/* 新增：空状态（首帖 / 末帖） */
.thread-nav .nav-empty {
    background: #f8f8f8;
    color: #bbb;
    cursor: default;
    font-size: 13px;
}
.thread-nav .nav-empty::before,
.thread-nav .nav-empty::after { display: none; }

/* 新增：移动端（上篇 / 下篇一行，栏目整行） */
@media (max-width: 640px) {
    .thread-nav { flex-wrap: wrap; gap: 8px; }
    .thread-nav .nav-cell { flex: 1 1 calc(50% - 4px); min-width: 0; }
    .thread-nav .nav-cell.forum-cell { flex: 1 1 100%; order: 3; }
    .thread-nav .nav-item { padding: 10px 12px; gap: 5px; }
    .thread-nav .nav-icon { font-size: 11px; padding: 2px 10px; letter-spacing: 2px; }
    .thread-nav .nav-title { font-size: 13px; line-height: 1.45; }
    .thread-nav .nav-forum .nav-title { font-size: 14px; }
}

/* ============================================================ */
/* 作者 · keai.cn                                  */
/* 日期 · 2026.10.08~2026.10.10                                  */
/* 地点 · 杭州 / 厦门                                  */
/* 【区块 3】全站热门                                             */
/* 作用：标题“全站热门”、每条热门帖子的卡片                       */
/* ============================================================ */

/* 新增：热门区域容器 */
.keai-hot-area {
    margin: 20px 0;
    padding: 16px 18px;
    background: #fafbfc;
    border-radius: 10px;
    border: 1px solid #eef0f3;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}
/* 新增：热门标题 */
.keai-hot-area .keai-hot-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin: 0 0 10px;
    letter-spacing: 1px;
}
.keai-hot-area .keai-hot-title::before {
    content: "\2756 ";
    color: #E74C9C;
    font-size: 12px;
}
/* 新增：热门列表 */
.keai-hot-area .keai-hot-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.keai-hot-area .keai-hot-item {
    position: relative;
    padding: 8px 12px 8px 26px;
    margin-bottom: 4px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: #444;
    background: #fafafa;
    transition: all .25s ease;
}
.keai-hot-area .keai-hot-item::before {
    content: "\2756";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #E74C9C;
    font-size: 10px;
}
.keai-hot-area .keai-hot-item:hover {
    background: #fff0f6;
    transform: translateX(3px);
    color: #E74C9C;
}
.keai-hot-area .keai-hot-item a {
    color: inherit;
    text-decoration: none;
}

/* ============================================================ */
/* 作者 · keai.cn                                  */
/* 日期 · 2026.10.08~2026.10.10                                  */
/* 地点 · 杭州 / 厦门                                  */
/* 【区块 4】固定说明                                             */
/* 作用：编辑、编审、合作、标识三行说明                            */
/* ============================================================ */

/* 新增：固定说明区域 */
.keai-info-area {
    margin: 18px 0;
    padding: 14px 18px;
    background: linear-gradient(135deg, #f8f9fa, #f0f2f5);
    border-radius: 10px;
    border-left: 4px solid #B0BEC5;
    border-right: 4px solid #717c0c;
    font-size: 13px;
    color: #666;
    line-height: 1.9;
    letter-spacing: 0.5px;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}
.keai-info-area p {
    margin: 0;
}
.keai-info-area p + p {
    margin-top: 4px;
}
.keai-info-area a {
    color: #8800EE;
    text-decoration: none;
}
.keai-info-area a:hover {
    color: #E74C9C;
    text-decoration: underline;
}

/* ============================================================ */
/* 作者 · keai.cn                                  */
/* 日期 · 2026.10.08~2026.10.10                                  */
/* 地点 · 杭州 / 厦门                                  */
/* 【区块 5】发布信息（点评 / 回复 / 编辑 等） + 楼层徽章          */
/* 作用：帖子底部的操作条（默认灰、hover 加深），以及右下角徽章    */
/* ============================================================ */

/* 新增：发布信息区域默认灰色、hover 加深 */
.keai-post-meta {
    color: #bbb;
    font-size: 13px;
    transition: color .25s ease;
}
.keai-post-meta a,
.keai-post-meta .pipe {
    color: #bbb;
    text-decoration: none;
    transition: color .25s ease;
}
.keai-post-meta a:hover {
    color: #666;
    text-decoration: underline;
}
.keai-post-meta:hover {
    color: #999;
}

/* 新增：楼层徽章定位参照 */
.pob.cl.keai-post-meta { position: relative; }

/* 新增：楼层徽章（右下角光晕小圆圈） */
.keai-floor-badge {
    position: absolute;
    right: 10px;
    bottom: 8px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #8800EE;
    background: radial-gradient(circle at center,
        rgba(136,0,238,0.10) 0%,
        rgba(136,0,238,0.04) 55%,
        rgba(136,0,238,0.00) 100%);
    box-shadow:
        0 0 10px rgba(136,0,238,0.18),
        0 0 22px rgba(136,0,238,0.10),
        inset 0 0 6px rgba(136,0,238,0.05);
    border: 1px solid rgba(136,0,238,0.10);
    opacity: 0.55;
    pointer-events: none;
    z-index: 3;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}
.keai-floor-badge.wide {
    width: auto;
    min-width: 38px;
    padding: 0 8px;
    border-radius: 19px;
}

/* 新增：移动端楼层徽章缩小 */
@media (max-width: 640px) {
    .keai-floor-badge { right: 6px; bottom: 6px; width: 32px; height: 32px; font-size: 12px; }
    .keai-floor-badge.wide { min-width: 32px; padding: 0 6px; border-radius: 16px; }
}

/* ============================================================ */
/* 作者 · keai.cn                                  */
/* 日期 · 2026.10.08~2026.10.10                                  */
/* 地点 · 杭州 / 厦门                                  */
/* 完                                                             */
/* ============================================================ */