/* ==================== 页内样式覆盖层（theme-fin） ====================
   适用页面：templates/jiaoyidianjie.html、templates/usercenter.html
   管辖范围：只管这两页**页内**自有元素（.pj_* / .uc_*）的颜色、圆角、阴影与布局稳定。
   全站公共件一律不覆盖，由 menu.css / content.css 原样生效，保证 6 个页面完全一致：
     - 顶栏 .menu_chunk / .menu_bar 及菜单项下划线 ::after / .search 输入框与按钮
     - Logo .logo_name（快乐体 22px + 珊瑚橙 #ff7f50 的 em + 问号装饰）
     - 页尾 .trailer_page（content.css 全站近黑 #1b1d20）
     - body 字体与底色（其他页无 body 规则 = 浏览器默认中文字体 + 白底）
   色板（仅用于页内元素，全部取站内既有值，不自创新色相）：
     --fin-primary #3498db / --fin-primary-d #2980b9 / --fin-primary-l #eaf3fb
     --fin-accent #1a5276（正文里的深蓝强调）/ --fin-line #dfe5ec（细边框）
     --fin-brand #ff7f50（品牌橙，与 logo em、首帧轮播同值）
     --fin-gold #f39c12 / --fin-gold-d #d68910 / --fin-gold-l #ffd77a / --fin-amber #f5b041
     --fin-copper #e67e22 / --fin-silver #c9d6e4
     后六个只用于右侧栏的奖牌与金数字，都是站内已有的橙金警示色及其同色相明暗派生。
   右侧栏（鲜艳版）：用户卡走品牌橙金、「我」最亮；排名卡走亮蓝青（数据）；大佬榜走金铜（荣誉）。
     三张卡各有一条顶部饰条和一团右上装饰光晕（几何在 jiaoyidianjie.css，颜色在本文件），
     前三名改金/银/铜奖牌，行底加「占榜首比例」热度条；顶栏、页尾、body 仍然一律不碰。
   历史：最初本文件是「藏蓝 + 鎏金」整套换肤，连顶栏、页尾、body 字体一起改了，
         导致只有这两页的字体、字号、导航下划线、搜索框形状和其他页不一样，现已全部交还原生。
   回滚：删除本文件引用即可恢复这两页的原「玻璃气泡」风格（新增胶囊/饰条会退回无底色，但不错位）。
   ============================================================ */

:root {
    --fin-primary: #3498db;
    --fin-primary-d: #2980b9;
    --fin-primary-l: #eaf3fb;
    --fin-accent: #1a5276;
    --fin-accent-l: #e8f0f6;
    --fin-line: #dfe5ec;
    --fin-brand: #ff7f50;
    --fin-gold: #f39c12;
    --fin-gold-d: #d68910;
    --fin-gold-l: #ffd77a;
    --fin-amber: #f5b041;
    --fin-copper: #e67e22;
    --fin-silver: #c9d6e4;
}

/* ---------- 全站公共件：一律不覆盖（本层唯一的禁区） ----------
   以下元素在 6 个页面上结构完全相同，样式必须由 menu.css / content.css 统一给：
     body 字体与底色、.logo / .logo_name / .logo_name em / .logo_name::after、
     .menu_chunk（包含底边框 #eef0f3）、.menu_bar ul li a 及 :hover/.active/::after
     （menu.css 原样：#3498db 字色 + 3px 圆角渐变下划线）、
     .search input / .search button（原样：12px 圆角、hover 上浮 1px）、
     .no（content.css 胶囊按钮，且本页无此元素）、.trailer_page（页尾 #1b1d20）。
   之前这些全被我改过（字体、下划线 2px 方角、按钮 6px 方角、页尾深藏蓝），
   是「只有社区页/个人中心页不一样」和「跳页撞色」的根本原因，现整段删除。 */

/* ---------- 轮播三帧底色：刻意不覆盖 ----------
   jiaoyidianjie.css 原生就是全站既有的色语言：橙 #ff7f50（品牌）/ 蓝 #3498db（链接）/ 绿 #2f9e6e（跌），
   与首页 .home_mod 标签胶囊、menu.css 同值。之前压成整套深蓝，成了本页最扎眼的差异块，现恢复。
   后端 /api/community/banners 恒定返回 3 帧，nth-child(1~3) 覆盖完整，不会露透明底。 */
.pj_carousel {
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(15, 35, 60, 0.12);
}

.pj_slide_txt h2 { font-weight: 600; letter-spacing: 2px; }
.pj_slide_txt h2::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    background: #ff7f50;
    margin-bottom: 12px;
}

/* ---------- 卡片统一质感：16px 大气泡 → 8px 直角卡片 + 细边框 + 浅阴影 ---------- */
.pj_rules,
.pj_list_toolbar,
.pj_feed_item,
.pj_userinfo,
.pj_rank,
.pj_master,
.pj_modal_box {
    border-radius: 8px;
    border: 1px solid var(--fin-line);
    box-shadow: 0 1px 4px rgba(23, 43, 65, 0.06);
}

.pj_feed_item:hover {
    box-shadow: 0 6px 18px rgba(23, 43, 65, 0.10);
    transform: translateY(-1px);
    border-color: #c9d6e4;
}

/* ---------- 图标块：规则用主亮蓝，榜单用金色（与大佬榜的荣誉色同一口径） ---------- */
.pj_rules_icon { background: linear-gradient(135deg, #5dade2, #2e86c1); }

.pj_master_icon {
    background: linear-gradient(135deg, var(--fin-amber), var(--fin-gold-d));
    box-shadow: 0 3px 10px rgba(243, 156, 18, 0.35);
}

/* ---------- 规则序号、品种标签、底纹：橙系 → 蓝灰系 ---------- */
.pj_rules_list li i {
    background: var(--fin-primary-l);
    border-color: #c9d9ea;
    color: var(--fin-primary);
}

.pj_feed_sym {
    background: #f2f5f9;
    color: #5b6b80;
    border: 1px solid #e3e9f0;
}

.pj_detail_tag { background: #f2f5f9; color: #5b6b80; }

/* ---------- 页签 / 排序 / 分页 / 头像：主色替换 ---------- */
.pj_list_tabs span:hover,
.pj_list_sort span:hover { color: var(--fin-primary); }

.pj_list_tabs span.active,
.pj_list_sort span.active {
    background: var(--fin-primary-l);
    color: var(--fin-primary);
}

.pj_list_tabs span,
.pj_list_sort span { border-radius: 4px; }

/* ---------- 头像：原来压成一片雾蓝，现按 jiaoyidianjie.css 本来的 8 个色相提调成渐变 ----------
   （三榜行、内容列表、评论、用户卡头像共用这一套，不会出现「同一个人两列不同色」） */
.pj_avatar.av1, .pj_mavatar.av1 { background: linear-gradient(135deg, #ff8a5c, var(--fin-brand)); }
.pj_avatar.av2, .pj_mavatar.av2 { background: linear-gradient(135deg, #f0a35f, #e07b39); }
.pj_avatar.av3, .pj_mavatar.av3 { background: linear-gradient(135deg, #5dade2, #2e86c1); }
.pj_avatar.av4, .pj_mavatar.av4 { background: linear-gradient(135deg, #52c47a, #2f9e6e); }
.pj_avatar.av5, .pj_mavatar.av5 { background: linear-gradient(135deg, #a79ae0, #8f6ed5); }
.pj_avatar.av6, .pj_mavatar.av6 { background: linear-gradient(135deg, #e6c79a, #d5a86e); }
.pj_avatar.av7, .pj_mavatar.av7 { background: linear-gradient(135deg, #7fc4bb, #5ca8a0); }
.pj_avatar.av8, .pj_mavatar.av8 { background: linear-gradient(135deg, #e07f95, #c9586e); }

/* ---------- 板块标签三色：橙蓝绿 → 亮蓝/钢青/墨绿（保留三个板块的区分度） ---------- */
.pj_feed_cat.cat-review { background: var(--fin-primary-l); color: var(--fin-primary); }
.pj_feed_cat.cat-view   { background: #e6f0f4; color: #3a6b85; }
.pj_feed_cat.cat-dry    { background: #e9f2ec; color: #3e6b4f; }

/* ---------- 按钮：实心蓝 → 蓝青渐变 + 光晕（发帖 / 个人中心入口 / 登录 / 弹窗提交） ---------- */
.pj_user_btn,
.pj_pub_btn {
    background: linear-gradient(135deg, var(--fin-primary), #2e86c1);
    border-radius: 6px;
    letter-spacing: 1px;
    box-shadow: 0 3px 10px rgba(52, 152, 219, 0.22);
}

.pj_user_btn:hover,
.pj_pub_btn:hover {
    background: linear-gradient(135deg, #5dade2, var(--fin-primary-d));
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.36);
}

.pj_user_btn--ghost {
    background: #ffffff;
    color: #5b6b80;
    border: 1px solid var(--fin-line);
}

.pj_user_btn--ghost:hover {
    background: var(--fin-primary-l);
    border-color: #c9d9ea;
    color: var(--fin-primary);
}

/* ==================== 右侧栏鲜艳版 ====================
   顶部饰条与光晕只上色，尺寸/裁切在 jiaoyidianjie.css 的「装饰层几何」。 */
.pj_userinfo::before {
    background: linear-gradient(90deg, #ff8a5c, var(--fin-brand) 42%, var(--fin-gold));
}

.pj_rank::before {
    background: linear-gradient(90deg, var(--fin-primary), #5dade2 55%, #2e86c1);
}

.pj_master::before {
    background: linear-gradient(90deg, var(--fin-gold-l), var(--fin-gold) 45%, var(--fin-gold-d));
}

.pj_rank::after {
    background: radial-gradient(circle, rgba(52, 152, 219, 0.16), rgba(52, 152, 219, 0));
}

.pj_master::after {
    background: radial-gradient(circle, rgba(243, 156, 18, 0.18), rgba(243, 156, 18, 0));
}

.pj_userinfo,
.pj_rank,
.pj_master { transition: box-shadow 0.2s ease, border-color 0.2s ease; }

.pj_userinfo:hover,
.pj_rank:hover,
.pj_master:hover {
    border-color: var(--fin-silver);
    box-shadow: 0 8px 24px rgba(23, 43, 65, 0.10);
}

/* ---------- 用户卡的身份横幅：登录=品牌橙金，游客=亮蓝（状态一眼可辨） ---------- */
.pj_user_hero {
    background: linear-gradient(120deg, #ff8a5c 0%, var(--fin-brand) 46%, var(--fin-gold) 100%);
    box-shadow: 0 6px 18px rgba(255, 127, 80, 0.22);
}

.pj_user_hero--guest {
    background: linear-gradient(120deg, var(--fin-primary) 0%, #5dade2 56%, #2e86c1 100%);
    box-shadow: 0 6px 18px rgba(52, 152, 219, 0.22);
}

/* 横幅右上角的一团白光，和首页 .home_mod::before 同一个手法 */
.pj_user_hero::after {
    content: "";
    position: absolute;
    top: -46px;
    right: -34px;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.pj_user_hero .pj_user_name { color: #ffffff; }
.pj_user_hero .pj_user_name b { color: rgba(255, 255, 255, 0.88); }

/* 头像：自己的头像沿用 av 色渐变（.pj_mavatar.avN 在后面统一改鲜艳），只补一圈白环；
   游客头像没有 av 类，所以单独给一个浅蓝实心 */
.pj_user_avatar {
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.pj_user_hero--guest .pj_user_avatar {
    background: linear-gradient(135deg, #ffffff, #dceaf7);
    color: var(--fin-primary-d);
}

/* ---------- 等级 / 积分胶囊：白底 + 等级色文字 ----------
   7 档色相与后台 admin.css 的 .um_lv.lv1..lv7、个人中心 .uc_lv.lv1..lv7 是同一口径，
   三处看到的是同一个身份，不会出现「后台红、前台蓝」的分叉。 */
.pj_user_lv,
.pj_user_pts {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.pj_user_lv.lv1 { color: #718096; }
.pj_user_lv.lv2 { color: #2b7cb3; }
.pj_user_lv.lv3 { color: #1a5276; }
.pj_user_lv.lv4 { color: #b9770e; }
.pj_user_lv.lv5 { color: #8e44ad; }
.pj_user_lv.lv6 { color: #c0392b; }
.pj_user_lv.lv7 { color: #1a202c; }

/* ---------- 帖子作者身份胶囊（列表 / 详情作者名后面那枚） ----------
   只在平台助理及以上（角色号 ≥ 5）画，色相与上面 .pj_user_lv 同一套，
   所以官方账号在用户卡、帖子列表、帖子详情里看到的是同一个颜色。
   字号 11px、不换行：它只是“身份角标”，不能把作者名拼到下一行。 */
.pj_feed_role {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    border-radius: 8px;
    vertical-align: 1px;
    white-space: nowrap;
}

.pj_feed_role.lv5 { color: #8e44ad; background: rgba(142, 68, 173, 0.10); box-shadow: inset 0 0 0 1px rgba(142, 68, 173, 0.26); }
.pj_feed_role.lv6 { color: #c0392b; background: rgba(192, 57, 43, 0.10); box-shadow: inset 0 0 0 1px rgba(192, 57, 43, 0.26); }
.pj_feed_role.lv7 { color: #1a202c; background: rgba(26, 32, 44, 0.08); box-shadow: inset 0 0 0 1px rgba(26, 32, 44, 0.22); }

.pj_user_pts {
    color: var(--fin-gold-d);
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.pj_user_pts b {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    color: var(--fin-gold-d);
}

.pj_user_tip {
    color: #b9770e;
    background: rgba(243, 156, 18, 0.10);
    border: 1px dashed rgba(243, 156, 18, 0.34);
    border-radius: 6px;
    padding: 6px 8px;
}

/* ---------- 排名页签：浅灰槽 → 淡蓝槽，选中项变蓝青渐变胶囊 ---------- */
.pj_rank_tabs { background: linear-gradient(135deg, #eaf3fb, #f7fbfe); }

.pj_rank_tabs span {
    color: #5b6b80;
    font-weight: 600;
    border-radius: 6px;
}

.pj_rank_tabs span.active {
    background: linear-gradient(135deg, var(--fin-primary), #2e86c1);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.32);
}

/* ---------- 名次徽章：普通位淡蓝，前三名金/银/铜奖牌 ---------- */
.pj_rank_list li i,
.pj_master_list li i {
    background: var(--fin-primary-l);
    color: #5b6b80;
    font-weight: 700;
}

/* 榜首那一行的淡底跟每张卡自己的色相：排名卡走蓝，大佬榜走金 */
.pj_rank_list li.top1 {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.09), rgba(255, 255, 255, 0));
}

.pj_master_list li.top1 {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.10), rgba(255, 255, 255, 0));
}

.pj_rank_list li.top1 i,
.pj_master_list li.top1 i {
    background: linear-gradient(135deg, var(--fin-gold-l), var(--fin-gold));
    color: #7a4a00;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.42);
}

.pj_rank_list li.top2 i,
.pj_master_list li.top2 i {
    background: linear-gradient(135deg, #f6f9fc, var(--fin-silver));
    color: #5b6b80;
    box-shadow: 0 2px 8px rgba(120, 140, 165, 0.32);
}

.pj_rank_list li.top3 i,
.pj_master_list li.top3 i {
    background: linear-gradient(135deg, #f5c08a, var(--fin-copper));
    color: #7a3d00;
    box-shadow: 0 2px 8px rgba(230, 126, 34, 0.34);
}

/* ---------- 行 hover：整行淡蓝/淡金扫过（写在 top1 之后，悬停才压得住底色） ---------- */
.pj_rank_list li:hover {
    background: linear-gradient(90deg, rgba(52, 152, 219, 0.10), rgba(52, 152, 219, 0));
}

.pj_master_list li:hover {
    background: linear-gradient(90deg, rgba(243, 156, 18, 0.12), rgba(243, 156, 18, 0));
}

/* ---------- 热度条：排名走蓝青，大佬榜走金；榜首换成品牌橙金 ---------- */
.pj_rank_list li::after {
    background: linear-gradient(90deg, var(--fin-primary), #5dade2);
}

.pj_rank_list li.top1::after {
    background: linear-gradient(90deg, var(--fin-gold), var(--fin-amber));
}

.pj_master_list li::after {
    background: linear-gradient(90deg, var(--fin-gold), var(--fin-amber));
}

.pj_master_list li.top1::after {
    background: linear-gradient(90deg, var(--fin-brand), var(--fin-gold));
}

/* ---------- 数值列：等宽粗体，榜首大一档 ---------- */
.pj_rank_list li .v,
.pj_master_list li .v {
    font-family: Consolas, "Courier New", monospace;
    font-weight: 700;
}

.pj_rank_list li .v { color: var(--fin-primary-d); }
.pj_master_list li .v { color: var(--fin-gold-d); }

.pj_rank_list li.top1 .v,
.pj_master_list li.top1 .v { font-size: 13px; }

/* ---------- 大佬榜说明行：从一片浅灰改成一条淡金注脚 ---------- */
.pj_master_note {
    color: #b9770e;
    background: rgba(243, 156, 18, 0.07);
    border-top-color: rgba(243, 156, 18, 0.28);
}

/* ---------- 统计四格：发帖蓝 / 点赞橙 / 浏览绿 / 贡献金，数字放大一档 ---------- */
.pj_user_stats b {
    font-family: Consolas, "Courier New", monospace;
    font-size: 18px;
}

.pj_user_stats > div:nth-child(1) b { color: #2e86c1; }
.pj_user_stats > div:nth-child(2) b { color: var(--fin-brand); }
.pj_user_stats > div:nth-child(3) b { color: #27ae60; }
.pj_user_stats > div:nth-child(4) b { color: var(--fin-gold-d); }

.pj_user_stats span { color: #8f9bb0; }

/* ---------- 分页 ---------- */
.pj_pg_btn, .pj_pg_num { border-radius: 6px; }

.pj_pg_btn:hover:not(:disabled),
.pj_pg_num:hover {
    border-color: var(--fin-primary);
    color: var(--fin-primary);
}

.pj_pg_num.on {
    background: var(--fin-primary);
    border-color: var(--fin-primary);
}

/* ---------- 详情 / 表单焦点 / toast ---------- */
.pj_detail_bio { border-left-color: var(--fin-accent); }

.pj_act_btn {
    border-color: var(--fin-line);
    background: #f7f9fb;
    color: #4a5568;
}

.pj_act_btn:hover,
.pj_act_btn.on {
    background: var(--fin-primary);
    border-color: var(--fin-primary);
    color: #ffffff;
}

.pj_fld input:focus,
.pj_fld select:focus,
.pj_fld textarea:focus,
.pj_cmt_text:focus {
    border-color: var(--fin-primary);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.pj_auth_tabs span.active {
    background: var(--fin-primary-l);
    color: var(--fin-primary);
}

.pj_feed_liked { color: var(--fin-primary); }
.pj_link_btn:hover { color: var(--fin-primary); }

/* 弹窗关闭按钮：原生是橙色 hover，补齐后本页交互色才不留存橙色孤儿 */
.pj_modal_close:hover { color: var(--fin-primary); }

.toast_item { border-left-color: var(--fin-primary); }

/* ---------- 页尾：刻意不覆盖 ----------
   .trailer_page 一律沿用 content.css 的全站近黑 #1b1d20 与原字距，与其他页逐字相同。 */

/* ---------- 进入页面时的「整页弹动」治理 ----------
   本页 #pj_feed / #pj_userinfo / 三榜 / 大佬榜 在 HTML 里全是空容器，数据回来才撑开：
   页面高度从很矮一路变高，滚动条「无 → 有」，1200~1400px 的居中内容会整体横移约一根滚动条宽度，
   这就是点进社区页时看到的弹动。这里先把滚动条槽常驻，再给异步区留最小高度，减少塌陷。 */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

.pj_feed { min-height: 200px; }

/* 重拉列表时旧内容先变淡而不塌陷（配 jiaoyidianjie.js 的 is_loading） */
.pj_feed.is_loading { opacity: 0.55; transition: opacity 0.15s ease; }

.pj_rank_list,
.pj_master_list { min-height: 96px; }