/* ==================== 交易点解社区 ====================
   布局按手绘稿：
   [导航栏-通栏(menu.css)] [左列:滚动图区/社区规则/内容区列表 | 右列:用户基本信息/排名区] [尾页-通栏(content.css .trailer_page)]
*/

.pj_wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 20px 30px;
    box-sizing: border-box;
}

.pj_layout {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

/* ==================== 左主列（约72%） ==================== */
.pj_left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- 滚动图区：横幅轮播 ---------- */
.pj_carousel {
    position: relative;
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
}

.pj_slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.pj_slide.active {
    opacity: 1;
    pointer-events: auto;
}

/* 三张横幅底色（占位渐变，后续可替换为图片） */
.pj_slide:nth-child(1) { background: linear-gradient(120deg, #ff8a5c 0%, #ff7f50 45%, #e8653a 100%); }
.pj_slide:nth-child(2) { background: linear-gradient(120deg, #2b5876 0%, #3498db 60%, #4aa3e0 100%); }
.pj_slide:nth-child(3) { background: linear-gradient(120deg, #134e5e 0%, #2f9e6e 60%, #3cb371 100%); }

.pj_slide_txt {
    padding: 0 0 34px 40px;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.pj_slide_txt h2 {
    font-size: 30px;
    letter-spacing: 4px;
    margin-bottom: 8px;
}

.pj_slide_txt p {
    font-size: 15px;
    opacity: 0.92;
    letter-spacing: 1px;
}

/* 轮播箭头 */
.pj_car_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pj_car_btn:hover { background: rgba(255, 255, 255, 0.5); }
.pj_car_btn.prev { left: 14px; }
.pj_car_btn.next { right: 14px; }

/* 轮播圆点 */
.pj_car_dots {
    position: absolute;
    bottom: 12px;
    left: 40px;
    display: flex;
    gap: 8px;
}

.pj_car_dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pj_car_dots i.on {
    background: #ffffff;
    width: 22px;
    border-radius: 999px;
}

/* ---------- 社区规则 ---------- */
.pj_rules {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    padding: 18px 22px;
}

.pj_rules_head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.pj_rules_icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff9a76, #ff7f50);
    color: #ffffff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pj_rules_head h3 {
    font-size: 16px;
    color: #1a202c;
    letter-spacing: 1px;
}

.pj_rules_list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pj_rules_list li {
    font-size: 13px;
    color: #6b7487;
    line-height: 1.7;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.pj_rules_list li i {
    font-style: normal;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff1ea;
    border: 1px solid #ffd8c4;
    color: #b0633e;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(3px);
}

/* ---------- 内容区列表 ---------- */
.pj_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 工具条：板块筛选 + 排序 */
.pj_list_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    padding: 8px 14px;
}

.pj_list_tabs,
.pj_list_sort {
    display: flex;
    gap: 6px;
}

.pj_list_tabs span,
.pj_list_sort span {
    font-size: 13px;
    color: #6b7487;
    padding: 5px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.pj_list_tabs span:hover,
.pj_list_sort span:hover { color: #ff7f50; }

.pj_list_tabs span.active,
.pj_list_sort span.active {
    background: #fff1ea;
    color: #ff7f50;
    font-weight: 600;
}

.pj_list_sort {
    border-left: 1px solid #eef0f3;
    padding-left: 14px;
}

/* 文章卡片流 */
.pj_feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pj_feed_item {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    padding: 18px 22px 14px;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pj_feed_item:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

.pj_feed_top {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 板块标签三色 */
.pj_feed_cat {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
}

.pj_feed_cat.cat-review { background: #fff1ea; color: #e8653a; }
.pj_feed_cat.cat-view   { background: #eef6fc; color: #2c7fb8; }
.pj_feed_cat.cat-dry    { background: #effaf1; color: #2f9e44; }

.pj_feed_top h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1a202c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pj_feed_sum {
    font-size: 13px;
    color: #7a8499;
    line-height: 1.8;
    margin: 8px 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* meta 行：作者 / 日期 / 浏览 / 点赞 / 评论 */
.pj_feed_meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: #9aa3b5;
    border-top: 1px dashed #eef0f3;
    padding-top: 10px;
}

.pj_author {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #4a5568;
    font-weight: 600;
}

.pj_avatar {
    font-style: normal;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pj_avatar.av1 { background: #ff7f50; }
.pj_avatar.av2 { background: #e07b39; }
.pj_avatar.av3 { background: #3498db; }
.pj_avatar.av4 { background: #2f9e6e; }
.pj_avatar.av5 { background: #8f6ed5; }
.pj_avatar.av6 { background: #d5a86e; }
.pj_avatar.av7 { background: #5ca8a0; }
.pj_avatar.av8 { background: #c9586e; }

/* 大佬榜头像与内容列表头像共用配色 */
.pj_mavatar.av1 { background: #ff7f50; }
.pj_mavatar.av2 { background: #e07b39; }
.pj_mavatar.av3 { background: #3498db; }
.pj_mavatar.av4 { background: #2f9e6e; }
.pj_mavatar.av5 { background: #8f6ed5; }
.pj_mavatar.av6 { background: #d5a86e; }
.pj_mavatar.av7 { background: #5ca8a0; }
.pj_mavatar.av8 { background: #c9586e; }

/* ==================== 右侧栏（约26%） ==================== */
.pj_right {
    width: 26%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- 右侧栏卡片的装饰层几何 ----------
   三张卡都留一条顶部饰条（::before）和一团右上装饰光晕（::after），
   这里只给位置与尺寸，颜色一律在 theme-fin.css 的「右侧栏」章节里给：
   饰条要贴在 8px 圆角内，所以卡片必须 overflow:hidden + position:relative。 */
.pj_userinfo::before,
.pj_rank::before,
.pj_master::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.pj_rank::after,
.pj_master::after {
    content: "";
    position: absolute;
    top: -54px;
    right: -54px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    pointer-events: none;
}

/* ---------- 用户基本信息区 ---------- */
.pj_userinfo {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    padding: 20px 18px 16px;
}

/* 顶部身份条：一整块内嵌横幅，底色与渐变见 theme-fin.css；
   第一行放头像与昵称，等级/积分胶囊（.pj_user_tags）靠 flex-basis:100% 换到第二行 */
.pj_user_hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 12px;
    margin: 0 0 10px;
    border-radius: 10px;
}

.pj_user_avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c9ced8, #9aa3b5);
    color: #ffffff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pj_user_name {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.4;
}

.pj_user_name b {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #9aa3b5;
}

/* 身份等级 + 积分胶囊（在横幅内）、游客引导语（在横幅外的白卡上）：
   这里只给几何，配色见 theme-fin.css。flex-basis:100% 把胶囊标到横幅的第二行。
   等级胶囊的 7 档 lv1..lv7 由 jiaoyidianjie.js 按后端 role_no 拼接，前端不维护等级名 */
.pj_user_tags {
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.pj_user_lv,
.pj_user_pts {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.pj_user_uid {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.22);
    font-family: Consolas, "Courier New", monospace;
    letter-spacing: 0.4px;
}

.pj_user_tip {
    margin: 0 0 12px;
    font-size: 11px;
    text-align: center;
    letter-spacing: .5px;
}

.pj_user_btn {
    width: 100%;
    padding: 10px 0;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff9a76, #ff7f50);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.pj_user_btn:hover { opacity: 0.88; }

/* 登录后用户卡并排放两个动作：个人中心（<a>）+ 退出登录（<button>）。
   .pj_user_btn 本来是 width:100%，放进 flex 行里要改成等分，
   并让链接与按钮的字体/对齐/去下划线表现一致 */
.pj_user_acts { display: flex; gap: 8px; }

.pj_user_acts .pj_user_btn {
    flex: 1;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
}

.pj_user_stats {
    display: flex;
    margin-top: 14px;
    border-top: 1px dashed #eef0f3;
    padding-top: 12px;
}

.pj_user_stats > div {
    flex: 1;
    text-align: center;
}

.pj_user_stats b {
    display: block;
    font-size: 17px;
    color: #1a202c;
}

.pj_user_stats span {
    font-size: 12px;
    color: #9aa3b5;
}

/* ---------- 文章、点赞、浏览量排名区 ---------- */
.pj_rank {
    position: relative;
    overflow: hidden;
    flex: 1;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
}

.pj_rank_tabs {
    display: flex;
    gap: 4px;
    background: #f4f6fa;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 12px;
}

.pj_rank_tabs span {
    flex: 1;
    text-align: center;
    font-size: 13px;
    color: #6b7487;
    padding: 6px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.pj_rank_tabs span.active {
    background: #ffffff;
    color: #ff7f50;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pj_rank_list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pj_rank_list li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

/* 热度条：宽度由 jiaoyidianjie.js 按「占榜首比例」写进 --w，
   没有 --w（空态行、旧接口）时宽 0 不可见；颜色见 theme-fin.css */
.pj_rank_list li::after,
.pj_master_list li::after {
    content: "";
    position: absolute;
    left: 6px;
    bottom: 2px;
    height: 3px;
    width: var(--w, 0%);
    border-radius: 999px;
    opacity: .7;
    transition: width .35s ease;
}

.pj_rank_list li:hover { background: #fafbfd; }

.pj_rank_list li i {
    font-style: normal;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #eef0f3;
    color: #9aa3b5;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 前三名高亮 */
.pj_rank_list li.top1 i { background: #ff7f50; color: #ffffff; }
.pj_rank_list li.top2 i { background: #ff9a76; color: #ffffff; }
.pj_rank_list li.top3 i { background: #ffb38a; color: #ffffff; }

.pj_rank_list li .t {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #4a5568;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pj_rank_list li .v {
    flex-shrink: 0;
    font-size: 12px;
    color: #9aa3b5;
}

/* ---------- 内容区分页条 ---------- */
.pj_pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 4px 0 2px;
}

.pj_pg_btn,
.pj_pg_num {
    border: 1px solid #e3e6ec;
    background: #ffffff;
    color: #4a5568;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pj_pg_btn:hover:not(:disabled),
.pj_pg_num:hover {
    border-color: #ff7f50;
    color: #ff7f50;
}

.pj_pg_btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pj_pg_num.on {
    background: #ff7f50;
    border-color: #ff7f50;
    color: #ffffff;
    font-weight: 600;
}

/* ---------- 大佬贡献值排名 ---------- */
.pj_master {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    padding: 16px 18px;
}

.pj_master_head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.pj_master_icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff9a76, #ff7f50);
    color: #ffffff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pj_master_head h3 {
    font-size: 16px;
    color: #1a202c;
    letter-spacing: 1px;
}

.pj_master_list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pj_master_list li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 4px 9px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.pj_master_list li:hover { background: #fafbfd; }

.pj_master_list li i {
    font-style: normal;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #eef0f3;
    color: #9aa3b5;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pj_master_list li.top1 i { background: #ff7f50; color: #ffffff; }
.pj_master_list li.top2 i { background: #ff9a76; color: #ffffff; }
.pj_master_list li.top3 i { background: #ffb38a; color: #ffffff; }

.pj_mavatar {
    font-style: normal;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 用户卡头像为了取 av 颜色同时带了 pj_mavatar，而 .pj_mavatar 定义在 .pj_user_avatar 之后、
   同特异度会把它压回 26px（登录前后头像一大一小），所以用两类选择器把尺寸补回来 */
.pj_userinfo .pj_user_avatar {
    box-sizing: border-box;
    width: 52px;
    height: 52px;
    font-size: 22px;
}

.pj_master_list li .t {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #4a5568;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pj_master_list li .v {
    flex-shrink: 0;
    font-size: 12px;
    color: #e8653a;
    font-weight: 600;
}

.pj_master_note {
    font-size: 11px;
    color: #b3bac7;
    border-top: 1px dashed #eef0f3;
    margin-top: 8px;
    padding-top: 8px;
    text-align: center;
}

/* ---------- 工具条右侧：排序 + 发帖按钮 ---------- */
.pj_list_right {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.pj_pub_btn {
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff9a76, #ff7f50);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pj_pub_btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255, 127, 80, 0.35);
}

.pj_pub_btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- 列表补充元素 ---------- */
.pj_feed_sym {
    flex-shrink: 0;
    font-size: 11px;
    color: #7a8499;
    background: #f3f5f9;
    border-radius: 6px;
    padding: 2px 8px;
}

.pj_feed_liked { color: #ff7f50; font-weight: 600; }

.pj_empty {
    padding: 40px 16px;
    text-align: center;
    color: #9aa3b5;
    font-size: 13px;
    line-height: 1.9;
}

.pj_link_btn {
    border: none;
    background: none;
    color: #3498db;
    font-size: 13px;
    padding: 0 2px;
    cursor: pointer;
    text-decoration: underline;
}

.pj_link_btn:hover { color: #ff7f50; }

.pj_pg_total {
    margin-left: 10px;
    font-size: 12px;
    color: #9aa3b5;
}

.pj_rank_list li.pj_rank_empty,
.pj_master_list li.pj_rank_empty {
    justify-content: center;
    color: #b3bac7;
    font-size: 12px;
    cursor: default;
}

.pj_rank_list li.pj_rank_empty:hover,
.pj_master_list li.pj_rank_empty:hover { background: transparent; }

/* ==================== 弹窗（登录注册 / 发帖 / 详情） ==================== */
.pj_modal {
    position: fixed;
    inset: 0;
    display: none;              /* JS 通过 style.display = flex 打开 */
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(26, 32, 44, 0.55);
    z-index: 9000;
}

.pj_modal--full { padding: 24px; }

.pj_modal_box {
    width: min(560px, 100%);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    animation: pjModalIn 0.22s ease;
}

.pj_modal_box--sm { width: min(400px, 100%); overflow-y: auto; }
.pj_modal_box--detail { width: min(860px, 100%); }

@keyframes pjModalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.pj_modal_head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f3f7;
}

.pj_modal_head h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1a202c;
    letter-spacing: 1px;
}

.pj_modal_close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    color: #9aa3b5;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}

.pj_modal_close:hover { background: #f3f5f9; color: #ff7f50; }

.pj_modal_body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px;
    font-size: 14px;
}

.pj_modal_foot {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
}

.pj_modal_body + .pj_modal_foot { border-top: 1px solid #f1f3f7; }

.pj_modal_foot .pj_user_btn { width: auto; min-width: 104px; padding: 10px 20px; }

/* ---------- 表单控件 ---------- */
.pj_auth_tabs { display: flex; gap: 8px; }

.pj_auth_tabs span {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    border-radius: 8px;
    font-size: 14px;
    color: #6b7487;
    background: #f3f5f9;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pj_auth_tabs span.active { background: #fff1ea; color: #ff7f50; font-weight: 600; }

.pj_fld {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.pj_fld > span {
    font-size: 12px;
    font-weight: 600;
    color: #7a8499;
    letter-spacing: 1px;
}

.pj_fld input,
.pj_fld select,
.pj_fld textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid #e3e7ee;
    border-radius: 10px;
    background: #fafbfd;
    color: #1a202c;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: all 0.15s ease;
}

.pj_fld textarea {
    line-height: 1.8;
    resize: vertical;
    min-height: 90px;
}

.pj_fld input:focus,
.pj_fld select:focus,
.pj_fld textarea:focus {
    border-color: #ff7f50;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 127, 80, 0.12);
}

.pj_fld_row { display: flex; gap: 12px; }
.pj_fld_row .pj_fld--sm { flex: 1; min-width: 0; }

.pj_form_err {
    min-height: 18px;
    font-size: 12px;
    line-height: 1.5;
    color: #e74c3c;
    word-break: break-all;
}

/* 登录注册弹窗没有 .pj_modal_body 包裹，子元素自带左右留白 */
.pj_modal_box--sm > .pj_auth_tabs { margin: 16px 20px 2px; }
.pj_modal_box--sm > .pj_fld { margin-left: 20px; margin-right: 20px; }
.pj_modal_box--sm > .pj_form_err { margin: 6px 20px 0; }
.pj_modal_box--sm > .pj_modal_foot { margin-top: 16px; }

/* ---------- 按钮变体 ---------- */
.pj_user_btn--ghost {
    background: #ffffff;
    color: #7a8499;
    border: 1px solid #e3e7ee;
}

.pj_user_btn--ghost:hover {
    background: #fff7f4;
    border-color: #ffd0bd;
    color: #ff7f50;
    opacity: 1;
}

.pj_user_btn--sm {
    width: auto;
    padding: 8px 18px;
    font-size: 13px;
    letter-spacing: 1px;
}

.pj_user_btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ==================== 帖子详情 ==================== */
.pj_detail_head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.pj_detail_head h2 {
    font-size: 20px;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.5;
    word-break: break-word;
}

.pj_detail_meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #eef0f3;
    font-size: 12px;
    color: #9aa3b5;
}

.pj_detail_bio {
    margin-top: 12px;
    padding: 8px 12px;
    border-left: 3px solid #ffd0bd;
    border-radius: 0 8px 8px 0;
    background: #fafbfd;
    font-size: 12px;
    line-height: 1.6;
    color: #7a8499;
}

.pj_detail_content {
    padding: 16px 0 4px;
    font-size: 14.5px;
    line-height: 1.9;
    color: #4a5568;
    word-break: break-word;
}

.pj_detail_content p { margin-bottom: 12px; }
.pj_detail_content p:last-child { margin-bottom: 0; }

.pj_detail_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 14px;
}

.pj_detail_tag {
    font-size: 12px;
    color: #7a8499;
    background: #f3f5f9;
    padding: 3px 10px;
    border-radius: 20px;
}

.pj_detail_act {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px dashed #eef0f3;
}

.pj_act_btn {
    padding: 8px 20px;
    border: 1px solid #ffd7c6;
    border-radius: 20px;
    background: #fff8f5;
    color: #ff7f50;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pj_act_btn:hover,
.pj_act_btn.on { background: #ff7f50; border-color: #ff7f50; color: #ffffff; }

.pj_detail_cnum { font-size: 13px; color: #7a8499; }

/* ---------- 评论区 ---------- */
.pj_cmt_box { margin-top: 16px; padding: 12px; border-radius: 12px; background: #fafbfd; }

.pj_cmt_text {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    min-height: 64px;
    border: 1px solid #e3e7ee;
    border-radius: 10px;
    background: #ffffff;
    color: #1a202c;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.7;
    resize: vertical;
    outline: none;
    transition: all 0.15s ease;
}

.pj_cmt_text:focus { border-color: #ff7f50; box-shadow: 0 0 0 3px rgba(255, 127, 80, 0.12); }

.pj_cmt_foot { display: flex; justify-content: flex-end; margin-top: 10px; }

.pj_cmt_tip { padding: 6px 0; text-align: center; font-size: 13px; color: #7a8499; }

.pj_cmt_list {
    list-style: none;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pj_cmt_list > li { display: flex; align-items: flex-start; gap: 10px; }

.pj_cmt_list .pj_avatar { width: 30px; height: 30px; font-size: 13px; flex-shrink: 0; }

.pj_cmt_main {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pj_cmt_top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pj_cmt_top b { font-size: 13px; color: #1a202c; }
.pj_cmt_top span { font-size: 11px; color: #b3bac7; }

/* 本人评论：右上角删除入口（只在 c.mine 为真时渲染） */
.pj_cmt_del {
    margin-left: auto;
    border: none;
    background: none;
    padding: 0;
    font-size: 11px;
    color: #c0392b;
    cursor: pointer;
}
.pj_cmt_del:hover { text-decoration: underline; }

/* 本人帖子：详情元信息右侧的编辑 / 删除（只在 p.mine 为真时渲染） */
.pj_detail_own { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.pj_link_btn--danger { color: #c0392b; }
.pj_link_btn--danger:hover { color: #e74c3c; }

/* 详情内就地编辑：textarea 允许纵向拉伸，长正文不把弹窗撑歪 */
.pj_edit_box { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.pj_edit_box textarea { min-height: 220px; resize: vertical; }
.pj_edit_tip { font-size: 12px; color: #9aa3b5; }
.pj_edit_act { display: flex; align-items: center; gap: 14px; }

.pj_cmt_main p { font-size: 13px; line-height: 1.75; color: #4a5568; word-break: break-word; }

.pj_cmt_none {
    justify-content: center;
    padding: 8px 0;
    font-size: 12px;
    color: #b3bac7;
}

/* ==================== 非阻塞提示 toast ==================== */
.toast_wrap {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    pointer-events: none;
}

.toast_item {
    min-width: 200px;
    max-width: 420px;
    padding: 11px 18px;
    border-radius: 10px;
    border-left: 4px solid #ff7f50;
    background: #1a202c;
    color: #ffffff;
    font-size: 13.5px;
    line-height: 1.6;
    word-break: break-all;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    animation: pjToastIn 0.25s ease;
}

.toast_item.ok { border-left-color: #2ecc71; }
.toast_item.err { border-left-color: #e74c3c; }
.toast_item.warn { border-left-color: #f39c12; }
.toast_item.out { animation: pjToastOut 0.25s ease forwards; }

@keyframes pjToastIn {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: none; }
}

@keyframes pjToastOut {
    from { opacity: 1; }
    to { opacity: 0; transform: translateY(-10px); }
}

/* ---------- 窄屏适配 ==================== */
@media (max-width: 900px) {
    .pj_layout { flex-direction: column; }
    .pj_right { width: 100%; }
    .pj_slide_txt { padding-left: 24px; }
    .pj_car_dots { left: 24px; }
    .pj_feed_top h3 { white-space: normal; }
    .pj_list_toolbar { flex-wrap: wrap; gap: 10px; }
    .pj_list_right { margin-left: 0; }
    .pj_fld_row { flex-direction: column; gap: 0; }
    .pj_modal { padding: 12px; }
    .pj_modal--full { padding: 12px; }
    .pj_modal_box { max-height: 92vh; }
    .pj_modal_head h3, .pj_detail_head h2 { font-size: 17px; }
    .pj_detail_meta { gap: 8px; }
    .pj_cmt_list .pj_avatar { width: 26px; height: 26px; }
    .toast_wrap { width: 92vw; align-items: stretch; }
    .toast_item { max-width: 100%; min-width: 0; }
}