@charset "utf-8";
/* ==========================================================================
   兴程致远 · 前台样式【门户风 / 工业风】
   --------------------------------------------------------------------------
   设计口径（阿存 2026-09-14 第二版皮肤）：
     · 骨架＝门户：固定 1200px、左中右三栏、信息密度优先、表格式条目
     · 细节＝工业：零圆角、1px 实线、无阴影、方角按钮、粗竖条标题
     · 字号压到 12~13px，行高收紧，颜色只用「深蓝 + 灰阶 + 正红」
     · 不用渐变胶囊、不用悬浮位移、不用大圆角卡片
   与第一版（现代卡片风 recruit.css）互斥，切换只需改 _head.html 一行。
   ========================================================================== */

/* ---------------- 1. 变量与重置 ---------------- */
:root {
    --c-main:       #1a4b8c;   /* 门户深蓝（主色） */
    --c-main-dk:    #12365f;   /* 深蓝（导航底 / 悬停） */
    --c-main-lt:    #eaf1f9;   /* 浅蓝（底纹） */
    --c-main-bd:    #c3d5ea;   /* 蓝边框 */
    --c-red:        #c8102e;   /* 正红（价格 / 热门 / 强调） */
    --c-red-lt:     #fdeef0;
    --c-t1:         #1f2329;   /* 主文字 */
    --c-t2:         #4a5058;   /* 次文字 */
    --c-t3:         #838a94;   /* 弱文字 */
    --c-t4:         #a8aeb7;   /* 最弱 */
    --c-line:       #d6dbe2;   /* 主边框 */
    --c-line-lt:    #e9edf2;   /* 浅边框 */
    --c-bg:         #f0f2f5;   /* 页面底 */
    --c-bg-lt:      #f7f9fb;   /* 区块底 */
    --c-white:      #fff;
}

* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0; }

body {
    font-family: -apple-system, "Segoe UI", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.65;
    color: var(--c-t1);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--c-t1); text-decoration: none; }
a:hover { color: var(--c-main); }
img { display: block; max-width: 100%; border: 0; }
b, strong { font-weight: 700; }
em, i { font-style: normal; }
h1, h2, h3 { font-size: 100%; font-weight: 700; }
input, select, textarea, button { font-family: inherit; font-size: 13px; color: var(--c-t1); }
table { border-collapse: collapse; width: 100%; }
ul, ol { list-style: none; }

/* 数字统一等宽，工业感 */
.num, .p-fee b, .stat b { font-variant-numeric: tabular-nums; }

/* ---------------- 2. 布局骨架 ---------------- */
.wrap { width: 1200px; margin: 0 auto; }
.cols { display: flex; gap: 16px; align-items: flex-start; }
.col-side  { flex: 0 0 200px; width: 200px; }
.col-main  { flex: 1 1 auto; min-width: 0; }
.col-right { flex: 0 0 260px; width: 260px; }
.cols-detail .col-right { flex: 0 0 300px; width: 300px; }
.mt16 { margin-top: 16px; }
.mt10 { margin-top: 10px; }

/* ---------------- 3. 顶部工具条 ---------------- */
.topline {
    height: 3px;
    background: repeating-linear-gradient(135deg, var(--c-main) 0 10px, var(--c-main-dk) 10px 20px);
}
.topbar { background: #2b3138; color: #b9c0c9; font-size: 12px; line-height: 32px; }
.topbar .wrap { display: flex; justify-content: space-between; }
.topbar a { color: #b9c0c9; }
.topbar a:hover { color: #fff; }
.topbar .sep { margin: 0 8px; color: #4a5058; }

/* ---------------- 4. 页头：Logo + 搜索 ---------------- */
.hdr { background: var(--c-white); border-bottom: 1px solid var(--c-line); }
.hdr .wrap { display: flex; align-items: center; gap: 40px; padding: 18px 0; }

.logo { display: flex; align-items: center; gap: 12px; }
.logo-box {
    width: 48px; height: 48px;
    background: var(--c-main); color: #fff;
    font-size: 26px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border-bottom: 3px solid var(--c-main-dk);
}
.logo-txt b { display: block; font-size: 21px; letter-spacing: 2px; color: var(--c-main-dk); line-height: 1.3; }
.logo-txt i { display: block; font-size: 12px; color: var(--c-t3); letter-spacing: .5px; }

.hsearch { margin-left: auto; display: flex; height: 36px; }
.hsearch input {
    width: 300px; height: 36px; padding: 0 10px;
    border: 2px solid var(--c-main); border-right: 0;
    background: var(--c-white);
}
.hsearch input:focus { outline: none; background: #fcfdff; }
.hsearch button {
    height: 36px; padding: 0 24px; border: 0; cursor: pointer;
    background: var(--c-main); color: #fff; font-size: 14px; letter-spacing: 2px;
}
.hsearch button:hover { background: var(--c-main-dk); }

.hdr-note { font-size: 12px; color: var(--c-t3); text-align: right; line-height: 1.7; }
.hdr-note b { display: block; font-size: 15px; color: var(--c-red); }

/* ---------------- 5. 主导航 ---------------- */
.nav { background: var(--c-main); border-bottom: 3px solid var(--c-main-dk); }
.nav .wrap { display: flex; }
.nav a {
    display: block; padding: 0 30px; line-height: 44px;
    color: #fff; font-size: 15px; border-right: 1px solid rgba(255,255,255,.14);
}
.nav a:first-child { border-left: 1px solid rgba(255,255,255,.14); }
.nav a:hover { background: var(--c-main-dk); color: #fff; }
.nav a.on { background: var(--c-main-dk); color: #fff; font-weight: 700; }

/* ---------------- 6. 面包屑 ---------------- */
.crumb { font-size: 12px; color: var(--c-t3); padding: 10px 0; }
.crumb a { color: var(--c-t3); }
.crumb a:hover { color: var(--c-main); }
.crumb .sp { margin: 0 6px; color: var(--c-t4); }

/* ---------------- 7. 区块标题（门户色块 + 粗竖条） ---------------- */
.blk { background: var(--c-white); border: 1px solid var(--c-line); margin-bottom: 16px; }
.blk-hd {
    display: flex; align-items: center;
    height: 40px; padding: 0 12px;
    background: var(--c-main-lt);
    border-bottom: 1px solid var(--c-main-bd);
    border-left: 4px solid var(--c-main);
}
.blk-hd h2 { font-size: 15px; color: var(--c-main-dk); letter-spacing: .5px; }
.blk-hd .sub { font-size: 12px; color: var(--c-t3); font-weight: 400; margin-left: 10px; }
.blk-hd .more { margin-left: auto; font-size: 12px; color: var(--c-t3); }
.blk-hd .more:hover { color: var(--c-main); }
.blk-bd { padding: 12px; }
.blk-bd-flush { padding: 0; }

/* 次级小标题（正文内） */
.sub-hd {
    display: flex; align-items: center; height: 34px;
    padding-left: 10px; margin-bottom: 12px;
    border-left: 3px solid var(--c-main);
    border-bottom: 1px solid var(--c-line-lt);
    font-size: 14px; font-weight: 700; color: var(--c-main-dk);
}

/* ---------------- 8. 左侧分类菜单 ---------------- */
.side-menu { background: var(--c-white); border: 1px solid var(--c-line); }
.side-menu .hd {
    height: 40px; line-height: 40px; padding-left: 14px;
    background: var(--c-main); color: #fff; font-size: 15px; font-weight: 700;
    border-bottom: 3px solid var(--c-main-dk);
}
.side-menu a {
    display: flex; align-items: center;
    padding: 0 12px; height: 40px;
    border-bottom: 1px solid var(--c-line-lt);
    border-left: 3px solid transparent;
    font-size: 13.5px; color: var(--c-t2);
}
.side-menu a:last-child { border-bottom: 0; }
.side-menu a:hover, .side-menu a.on {
    background: var(--c-main-lt); color: var(--c-main-dk);
    border-left-color: var(--c-main); font-weight: 700;
}
.side-menu a .arw { margin-left: auto; color: var(--c-t4); font-size: 12px; }
.side-menu a:hover .arw { color: var(--c-main); }
/* 最后一个块去掉底边：包了 .mi 之后，`a:last-child` 不再是最后一个子元素了 */
.side-menu .mi:last-child > a { border-bottom: 0; }

/* ---------------- 二级分类「悬停滑出」浮层（2026-09-15） ----------------
   用户："鼠标放上去，右边就滑出。"
   数据来自 Recruit::buildSideNav()，只含**有在架项目**的子分类。
   工业风照旧：0 圆角、1px 细线、**不用阴影**（原项目的规矩）。 */
.side-menu .mi { position: relative; }
.side-menu .sub {
    display: none;
    position: absolute; left: 100%; top: -1px;
    z-index: 60;
    min-width: 190px; padding: 5px 0;
    background: var(--c-white);
    border: 1px solid var(--c-main-bd);
}
/* hover 与 focus-within 都给上：
   前者是鼠标，后者让键盘 Tab 进来时也能展开（浮层不是唯一入口，但不该只有鼠标能用） */
.side-menu .mi:hover > .sub,
.side-menu .mi:focus-within > .sub { display: block; }
.side-menu .sub a {
    height: 34px; padding: 0 12px;
    border-bottom: 0; font-size: 13px;
}
.side-menu .sub a:hover, .side-menu .sub a.on {
    background: var(--c-main-lt); color: var(--c-main-dk); font-weight: 700;
}
.side-menu .sub a em {
    margin-left: auto; font-style: normal; font-size: 11px; color: var(--c-t4);
}
.side-menu .sub .sub-all {
    color: var(--c-main); font-weight: 700;
    border-bottom: 1px dashed var(--c-line-lt);
}
/* 侧栏要压在右栏内容之上：不设 z-index 的话，后面的 .col-main 会盖住浮层 */
.col-side { position: relative; z-index: 30; }

/* 侧栏通用盒子 */
.side-box { background: var(--c-white); border: 1px solid var(--c-line); margin-bottom: 16px; }
.side-box .hd {
    height: 36px; line-height: 36px; padding-left: 12px;
    background: var(--c-bg-lt); border-bottom: 1px solid var(--c-line);
    border-left: 3px solid var(--c-main);
    font-size: 14px; font-weight: 700; color: var(--c-main-dk);
}
.side-box .bd { padding: 12px; }

/* ---------------- 9. 公告条（滚动） ---------------- */
.notice {
    display: flex; align-items: center;
    height: 40px; margin-bottom: 16px;
    background: var(--c-white); border: 1px solid var(--c-line);
}
.notice-tag {
    flex: 0 0 auto; height: 100%; padding: 0 14px;
    background: var(--c-red); color: #fff; font-weight: 700; font-size: 13px;
    display: flex; align-items: center; letter-spacing: 1px;
}
.notice-vp { flex: 1 1 auto; overflow: hidden; position: relative; height: 100%; padding-left: 16px; }
.notice-track {
    display: inline-flex; align-items: center; height: 40px;
    white-space: nowrap;
    animation: notice-scroll 40s linear infinite;
}
.notice-vp:hover .notice-track { animation-play-state: paused; }
.notice-track a { color: var(--c-t2); }
.notice-track a:hover { color: var(--c-red); }
.notice-track .sp { color: var(--c-t4); margin: 0 18px; }
@keyframes notice-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------------- 10. 首页横幅 ---------------- */
.bn-row { display: flex; gap: 16px; margin-bottom: 16px; }
.bn-item {
    position: relative; flex: 1 1 0; height: 120px;
    border: 1px solid var(--c-line); overflow: hidden;
    background: var(--c-main-dk);
}
.bn-item img { width: 100%; height: 100%; object-fit: cover; }
.bn-item .cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 6px 10px; color: #fff; font-size: 13px;
    background: rgba(18,54,95,.82);
}
.bn-item:hover .cap { background: rgba(26,75,140,.92); }

/* ---------------- 11. 分类色块（首页四宫格） ---------------- */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-line-lt); }
.cat-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; background: var(--c-white);
    border-left: 3px solid transparent;
}
.cat-item:hover { background: var(--c-main-lt); border-left-color: var(--c-main); }
.cat-item .ic {
    width: 42px; height: 42px; flex: 0 0 42px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-main); color: #fff; font-size: 18px; font-weight: 700;
}
.cat-item:hover .ic { background: var(--c-main-dk); }
.cat-item .nm { font-size: 14.5px; font-weight: 700; color: var(--c-t1); }
.cat-item .ds { font-size: 12px; color: var(--c-t3); }

/* ---------------- 11b. 频道入口条（首页分类大色块） ---------------- */
.ch-row {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: var(--c-line);
    border: 1px solid var(--c-line); margin-bottom: 16px;
}
.ch-item { position: relative; height: 84px; overflow: hidden; background: var(--c-main-dk); }
.ch-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-item .ov { position: absolute; inset: 0; background: rgba(18,54,95,.62); }
.ch-item .tx {
    position: relative; height: 100%;
    display: flex; flex-direction: column; justify-content: center;
    padding-left: 18px; color: #fff;
}
.ch-item .tx b { font-size: 17px; letter-spacing: 2px; }
.ch-item .tx i { font-size: 11.5px; opacity: .82; margin-top: 2px; }
.ch-item:hover .ov { background: rgba(26,75,140,.46); }
.ch-item:hover .tx b { color: #fff; }

/* ---------------- 12. 项目行条目（核心：表格式） ---------------- */
.p-list { }
.p-row {
    display: flex; align-items: stretch; gap: 14px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--c-line-lt);
    border-left: 3px solid transparent;
    background: var(--c-white);
}
.p-row:last-child { border-bottom: 0; }
.p-row:hover { background: var(--c-bg-lt); border-left-color: var(--c-main); }

.p-thumb {
    flex: 0 0 116px; width: 116px; height: 82px;
    border: 1px solid var(--c-line); overflow: hidden; background: var(--c-bg-lt);
}
.p-thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-thumb em {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: var(--c-t4); font-size: 12px;
}

.p-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.p-title {
    font-size: 15px; font-weight: 700; color: var(--c-t1); line-height: 1.5;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.p-row:hover .p-title { color: var(--c-main); }
.p-desc {
    font-size: 12.5px; color: var(--c-t3); margin-top: 4px;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.p-tags { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; }
.tg {
    font-size: 11.5px; line-height: 18px; padding: 0 6px;
    border: 1px solid var(--c-line); color: var(--c-t3); background: var(--c-bg-lt);
}
.tg-type { border-color: var(--c-main-bd); color: var(--c-main); background: var(--c-main-lt); }
.tg-hot  { border-color: #f0c2c9; color: var(--c-red); background: var(--c-red-lt); }
.p-count { font-size: 12px; color: var(--c-t3); margin-left: auto; }

.p-fee {
    flex: 0 0 118px; width: 118px;
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
    border-left: 1px dashed var(--c-line);
    padding-left: 12px;
}
.p-fee b { font-size: 19px; color: var(--c-red); line-height: 1.2; }
.p-fee i { font-size: 11.5px; color: var(--c-t4); margin-top: 2px; }

.p-op {
    flex: 0 0 92px; width: 92px;
    display: flex; align-items: center; justify-content: center;
}
.btn-o {
    display: block; width: 100%; text-align: center;
    line-height: 30px; font-size: 13px;
    border: 1px solid var(--c-main); color: var(--c-main); background: var(--c-white);
}
.p-row:hover .btn-o { background: var(--c-main); color: #fff; }

/* ---------------- 13. 排行榜（右侧热门） ---------------- */
.rank li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--c-line-lt); }
.rank li:last-child { border-bottom: 0; }
/* 名次后面的容器要 block 占满：span 默认行内，会把标题和「分类·浏览数」挤成一行 */
.rank li > span:last-child { display: block; flex: 1 1 auto; min-width: 0; }
.rank .no {
    flex: 0 0 18px; width: 18px; height: 18px; line-height: 18px;
    text-align: center; font-size: 11px; color: #fff; background: var(--c-t4); margin-top: 2px;
}
.rank li:nth-child(1) .no { background: var(--c-red); }
.rank li:nth-child(2) .no { background: #e8590c; }
.rank li:nth-child(3) .no { background: #d9a406; }
.rank .tt {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px; color: var(--c-t2); line-height: 1.5;
}
.rank li:hover .tt { color: var(--c-main); }
.rank .mt { display: block; font-size: 11.5px; color: var(--c-t4); margin-top: 2px; }

/* ---------------- 14. 筛选条 ---------------- */
.filter { background: var(--c-white); border: 1px solid var(--c-line); margin-bottom: 16px; }
.filter .fr { display: flex; align-items: center; border-bottom: 1px solid var(--c-line-lt); }
.filter .fr:last-child { border-bottom: 0; }
.filter .lb {
    flex: 0 0 96px; width: 96px; padding: 10px 0 10px 14px;
    font-size: 13px; color: var(--c-t3);
}
.filter .fc { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 14px 8px 0; }
.filter .fc a { padding: 3px 12px; font-size: 13px; color: var(--c-t2); border: 1px solid transparent; }
.filter .fc a:hover { color: var(--c-main); }
.filter .fc a.on { background: var(--c-main); color: #fff; border-color: var(--c-main); }
.filter .fsearch { padding: 10px 14px; display: flex; gap: 8px; background: var(--c-bg-lt); }
.filter .fsearch input {
    flex: 1 1 auto; height: 32px; padding: 0 10px;
    border: 1px solid var(--c-line); background: #fff;
}
.filter .fsearch input:focus { outline: none; border-color: var(--c-main); }

/* ---------------- 15. 按钮 ---------------- */
.btn {
    display: inline-block; text-align: center; cursor: pointer;
    padding: 0 18px; line-height: 32px; font-size: 13px;
    border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-t2);
}
.btn:hover { border-color: var(--c-main); color: var(--c-main); }
.btn-main { background: var(--c-main); border-color: var(--c-main); color: #fff; }
.btn-main:hover { background: var(--c-main-dk); border-color: var(--c-main-dk); color: #fff; }
.btn-red { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.btn-red:hover { background: #a50d26; border-color: #a50d26; color: #fff; }
.btn-lg { line-height: 40px; font-size: 15px; letter-spacing: 2px; }
.btn-block { display: block; width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ---------------- 16. 分页（门户方角） ---------------- */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 20px 0; }
.pager a, .pager span {
    min-width: 32px; height: 32px; line-height: 30px; padding: 0 8px;
    text-align: center; border: 1px solid var(--c-line); background: #fff;
    font-size: 13px; color: var(--c-t2);
}
.pager a:hover { border-color: var(--c-main); color: var(--c-main); }
.pager .cur { background: var(--c-main); border-color: var(--c-main); color: #fff; font-weight: 700; }
.pager .info { border: 0; background: transparent; color: var(--c-t3); }

/* ---------------- 17. 详情页 ---------------- */
.d-hd { background: var(--c-white); border: 1px solid var(--c-line); border-top: 3px solid var(--c-main); padding: 18px 20px; }
.d-title { font-size: 24px; line-height: 1.4; color: var(--c-t1); font-weight: 700; }
.d-sub { font-size: 13.5px; color: var(--c-t3); margin-top: 8px; padding-bottom: 12px; border-bottom: 1px dashed var(--c-line); }
.d-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.d-stat { display: flex; gap: 28px; margin-top: 12px; font-size: 12.5px; color: var(--c-t3); }
.d-stat b { color: var(--c-red); font-size: 16px; margin-right: 3px; }

/* 规格表（门户风：真表格） */
table.spec { border: 1px solid var(--c-line); border-top: 0; font-size: 13px; }
table.spec th, table.spec td { border: 1px solid var(--c-line-lt); padding: 9px 12px; vertical-align: top; }
table.spec th {
    width: 110px; background: var(--c-bg-lt); color: var(--c-t3);
    font-weight: 400; text-align: left; white-space: nowrap;
}
table.spec td { color: var(--c-t1); }
table.spec .money { color: var(--c-red); font-weight: 700; font-size: 15px; }

/* 正文块 */
.article { font-size: 13.5px; line-height: 1.9; color: var(--c-t2); white-space: pre-line; }

/* 竞价/顾问卡 */
.advisor { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px dashed var(--c-line); }
.advisor .av {
    width: 44px; height: 44px; flex: 0 0 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-main); color: #fff; font-size: 18px; font-weight: 700;
}
.advisor .nm { display: block; font-size: 14px; font-weight: 700; }
.advisor .rl { display: block; font-size: 11.5px; color: var(--c-t4); }

.commission {
    margin-top: 12px; padding: 12px;
    background: var(--c-red-lt); border: 1px solid #f0c2c9; border-left: 3px solid var(--c-red);
}
.commission .lb { font-size: 12px; color: #8f1226; }
.commission .am { font-size: 26px; font-weight: 700; color: var(--c-red); line-height: 1.25; }
.commission .ht { font-size: 11.5px; color: #a8686f; }

.hint-box {
    margin-top: 12px; padding: 10px 12px; font-size: 12.5px;
    background: var(--c-bg-lt); border: 1px dashed var(--c-line); color: var(--c-t3);
}
.hint-box a { color: var(--c-main); font-weight: 700; }

/* ---------------- 18. 表单 ---------------- */
.fld { margin-bottom: 10px; }
.fld label { display: block; font-size: 12.5px; color: var(--c-t2); margin-bottom: 4px; }
.fld input, .fld textarea, .fld select {
    width: 100%; padding: 7px 9px; font-size: 13px;
    border: 1px solid var(--c-line); background: #fff;
}
.fld input:focus, .fld textarea:focus, .fld select:focus { outline: none; border-color: var(--c-main); }
.fld textarea { resize: vertical; }
.form-tip { font-size: 11.5px; color: var(--c-t4); margin-top: 8px; line-height: 1.6; }

/* ---------------- 19. 提示条 ---------------- */
.alert { padding: 9px 12px; font-size: 13px; margin-bottom: 10px; border: 1px solid; }
.alert-info    { background: var(--c-main-lt); border-color: var(--c-main-bd); color: var(--c-main-dk); }
.alert-success { background: #edf9f0; border-color: #b7e0c2; color: #1f7a3d; }
.alert-warning { background: var(--c-red-lt); border-color: #f0c2c9; color: #8f1226; }

/* ---------------- 19b. 防骗提示条 ----------------
   用户 2026-09-15："每条信息都给他一个醒目的提示，一定不要上当、要确认、要谨慎。"
   门户风做法：不加圆角/阴影，用红左边框 + 浅红底把它从背景里拎出来。
   详情页用完整版（.warn-bar）；列表页用 .thin 细条，不抢列表注意力。 */
.warn-bar {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 14px; padding: 10px 12px;
    background: var(--c-red-lt); border: 1px solid #f0c2c9; border-left: 3px solid var(--c-red);
    font-size: 12.5px; color: #8f1226; line-height: 1.85;
}
.warn-bar > b { flex: 0 0 auto; font-size: 13px; white-space: nowrap; }
.warn-bar a { color: var(--c-red); text-decoration: underline; }
.warn-bar.thin { margin: 10px 12px 0; padding: 8px 10px; font-size: 12px; }

/* 规格表「联系方式」与双入口（2026-09-15 改版）
   ⚠️ 旧版是「咨询电话」一行 + 右侧一个不醒目的`.want-agent`小字；
      用户 2026-09-15 改主意为「格式统一、一行、左右对称，让他们自己选」，
      于是 .spec-phone / .want-agent 已不再使用（保留定义只为避免
      万一还有页面引用时报样式缺失；新代码请用 .spec-contact / .spec-cta）。 */
.spec-phone { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.want-agent { font-size: 12.5px; color: var(--c-t3); white-space: nowrap; }
.want-agent:hover { color: var(--c-main); }

/* 联系方式：电话 / 微信 / QQ 三条横排，同一开关控制可见性 */
.spec-contact { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.spec-contact .ci { display: inline-flex; align-items: baseline; gap: 6px; }
.spec-contact .ci i { font-style: normal; font-size: 12px; color: var(--c-t3); }
.spec-contact .ci strong { font-size: 13.5px; color: var(--c-t1); font-weight: 600; }
.spec-contact-hint { font-size: 12.5px; color: var(--c-t3); }

/* 双入口（已废弃的第一版，见下方 .spec-act 上方注释）
   用户 2026-09-15 先要求"格式统一、一行、左右对称"，阿存做成了
   colspan=4 的大横条 + 两个 flex 等宽按钮；用户随即否掉：
   "不能做成另一个视觉体系，要跟整个表格同一个风格"。
   保留定义只为历史可查，模板已不再引用。 */
.spec-cta { display: flex; gap: 10px; padding: 10px 12px; background: var(--c-bg-lt); }
.spec-cta .cta-btn {
    flex: 1 1 0;
    text-align: center;
    line-height: 34px;
    font-size: 13.5px;
    color: var(--c-t1);
    background: var(--c-white);
    border: 1px solid var(--c-line);
}
.spec-cta .cta-btn:hover { color: var(--c-main); border-color: var(--c-main); }

/* 双入口的两种做法，留个记录免得再走回去：
   ① 第一版：colspan=4 一整条 + 两个 flex 等宽按钮 —— 用户否掉了，理由是
      "不能做成另一个视觉体系，要跟整个表格同一个风格"。
   ② 现在这一版：拆成 th 标签格 + td 值格，共四个格子，与上面每一行同构：
      我是学员(th) | 要报名(td) | 我是从业者(th) | 我要代理(td)
   → 所以 .spec-cta / .cta-btn 已废弃（只为历史留定义）；
     新代码用下面的 .spec-act（表格里的文字动作，主色 + 箭头）。 */
.spec-act { color: var(--c-main); font-weight: 600; }
.spec-act:hover { color: var(--c-red); }

/* ---------------- 二级分类入口（2026-09-15） ----------------
   两处用到：
     ① 首页每个分区标题下的子分类入口 → .sub-nav
     ② 列表页筛选条里的子分类 → 复用 .filter .fc，只补一个计数角标
   风格沿用工业风：0 圆角、1px 细线、无阴影。
   ⚠️ 只列"有在架项目"的子分类（控制器里过滤），
      所以这里只负责长得整齐，不负责隐藏空项。 */
.sub-nav {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--c-line-lt);
}
.sub-nav a {
    padding: 3px 10px; font-size: 12.5px; color: var(--c-t2);
    background: var(--c-bg-lt); border: 1px solid var(--c-line-lt);
}
.sub-nav a:hover { color: var(--c-main); border-color: var(--c-main); }
.sub-nav a em { margin-left: 5px; font-style: normal; font-size: 11px; color: var(--c-t4); }
.filter .fc a em { margin-left: 4px; font-style: normal; font-size: 11px; opacity: .75; }

/* 侧栏常见问题（列表页左栏） */
.faq dt { font-size: 12.5px; color: var(--c-t1); font-weight: 700; margin-top: 8px; }
.faq dt:first-child { margin-top: 0; }
.faq dd { font-size: 12px; color: var(--c-t3); line-height: 1.8; margin: 2px 0 8px; }

/* 侧栏公告列表（列表页右栏） */
.nt-list li { padding: 6px 0; border-bottom: 1px dashed var(--c-line-lt); font-size: 12.5px; line-height: 1.7; }
.nt-list li:last-child { border-bottom: 0; }
.nt-list a { color: var(--c-t2); }
.nt-list a:hover { color: var(--c-main); }

.empty { padding: 50px 0; text-align: center; color: var(--c-t4); font-size: 13.5px; }
.empty .ic { font-size: 30px; display: block; margin-bottom: 10px; }

/* ---------------- 20. 页脚 ---------------- */
.footer { margin-top: 20px; background: #2b3138; color: #9aa2ac; font-size: 12.5px; }
.footer .cols { padding: 26px 0 20px; }
.footer .fc { flex: 1 1 0; }
.footer .fc h4 { color: #fff; font-size: 13.5px; margin-bottom: 10px; }
.footer .fc a { color: #9aa2ac; display: block; line-height: 2; }
.footer .fc a:hover { color: #fff; }
.footer .fc .lead { font-size: 15px; color: #fff; font-weight: 700; letter-spacing: 1px; margin-bottom: 6px; }
.footer .copy {
    border-top: 1px solid #3a4149; padding: 12px 0 18px;
    color: #6f7883; font-size: 12px; text-align: center;
}
.footer .copy a { color: #6f7883; }

/* ---------------- 26. 推荐站（合伙人/代理专属站） ---------------- */

/* 全站品牌跟随条：从推荐站进来的访客，30 天内每页顶部都显示。
   平台品牌必须保留（合规），不要做成纯白标把"教育项目招生代理网"藏掉。 */
.refbar { background: #eaf1f9; border-bottom: 1px solid var(--c-main-bd); font-size: 12.5px; }
.refbar .wrap { display: flex; align-items: center; gap: 8px; height: 34px; color: var(--c-main-dk); }
.refbar strong { color: var(--c-red); }
.refbar .av {
    width: 20px; height: 20px; line-height: 20px; text-align: center;
    background: var(--c-main); color: #fff; font-size: 11px; flex: 0 0 20px;
}
.refbar a { color: var(--c-main); text-decoration: underline; }
.refbar .sep { color: var(--c-t4); }
.refbar .muted { color: var(--c-t3); }

/* 推荐站头部：这是"他自己的站"
   ⚠️ 2026-09-15 改过一次，原因要记住：
     原实现是"白底卡片 + 顶部 92px 蓝色渐变带"，而标题 h1 用的颜色是
     `--c-t1`（近黑 #1f2329）。实测几何（1440 宽）：
        蓝带   y=200~292
        标题   y≈240~272   ← 整行压在蓝底上，却是深色字 → 用户："这几个字黑色，不好看"
        角色标签 y≈278~302 ← 正好骑在蓝带下边缘
        简介/微信 y=310 以下（白底）
     也就是说：**深色字压在深蓝底上**，而不是"白底上的黑字"。
     试过"把标题改白色"—— 不行，因为同一条带子下面还有白底内容，
     改白只会让边界那行更糊，而且简介写长了又会骑到带子上。
     → 改成**整块头图铺蓝**，标题/标签/简介/联系方式统一用浅色。
       这样结构上不再有"压边"，内容长短都不会再出问题。
   ⚠️ 谁要再改回"白底 + 顶部窄带"，先量一遍每个元素的 y 坐标。 */
.site-hero { position: relative; border: 1px solid var(--c-main-dk); background: var(--c-main-dk); margin-bottom: 16px; overflow: hidden; }
.site-hero-bg {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #1a4b8c 0%, #12365f 100%);
}
.site-hero-inner { position: relative; display: flex; align-items: flex-end; gap: 18px; padding: 40px 24px 20px; }
.site-av {
    flex: 0 0 84px; width: 84px; height: 84px;
    border: 3px solid #fff; background: var(--c-main);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 34px; font-weight: 700; overflow: hidden;
}
.site-av img { width: 100%; height: 100%; object-fit: cover; }
.site-info { flex: 1 1 auto; min-width: 0; padding-bottom: 2px; }
.site-info h1 { font-size: 22px; letter-spacing: 1px; color: #fff; }
.site-role {
    display: inline-block; margin-top: 6px; padding: 1px 10px;
    font-size: 12px; background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .38); color: #fff;
}
.site-intro { font-size: 13px; color: #cfdcee; line-height: 1.8; margin-top: 8px; max-width: 720px; }
.site-contact { font-size: 13px; color: #cfdcee; margin-top: 8px; }
/* 微信号本来是正红（--c-red），红压深蓝对比很差，改成白色加粗 */
.site-contact strong { color: #fff; font-size: 15px; }
.site-contact .hint { color: rgba(255, 255, 255, .62); font-size: 12px; }

@media (max-width: 640px) {
    .refbar .wrap { height: auto; padding: 6px 0; flex-wrap: wrap; gap: 4px; }
    .site-hero-inner { flex-direction: column; align-items: flex-start; padding: 28px 16px 18px; }
    .site-info h1 { font-size: 18px; }
}

/* ---------------- 27. 合规静态页 ---------------- */

.footer .copy .fsep { margin: 0 8px; color: #4a5058; }

/* 静态页侧栏菜单（复用 side-box 外壳） */
.pmenu {
    display: block; padding: 0 12px; height: 38px; line-height: 38px;
    border-bottom: 1px solid var(--c-line-lt);
    border-left: 3px solid transparent;
    font-size: 13px; color: var(--c-t2);
}
.pmenu:last-child { border-bottom: 0; }
.pmenu:hover { background: var(--c-main-lt); color: var(--c-main-dk); border-left-color: var(--c-main); }
.pmenu.on { background: var(--c-main-lt); color: var(--c-main-dk); border-left-color: var(--c-main); font-weight: 700; }

/* 静态页正文：段间距、行高放开（.article 默认 pre-line，这里用 normal） */
.article p { margin-bottom: 12px; }
.article .sub-hd { margin-top: 22px; }
.article code {
    background: var(--c-bg-lt); border: 1px solid var(--c-line-lt);
    padding: 1px 5px; font-size: 12px; color: var(--c-main-dk);
}

/* ---------------- 28. 站内消息 ---------------- */

/* 顶部未读角标 */
.msgdot {
    display: inline-block; min-width: 15px; height: 15px; line-height: 15px;
    padding: 0 4px; margin-left: 3px;
    background: var(--c-red); color: #fff;
    font-size: 10.5px; text-align: center; vertical-align: 1px;
}

/* 类型筛选 */
.msg-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.msg-tabs a {
    padding: 4px 12px; font-size: 13px; color: var(--c-t2);
    border: 1px solid var(--c-line); background: var(--c-white);
}
.msg-tabs a:hover { border-color: var(--c-main); color: var(--c-main); }
.msg-tabs a.on { background: var(--c-main); border-color: var(--c-main); color: #fff; }
.msg-tabs a em {
    display: inline-block; margin-left: 5px; padding: 0 5px;
    background: var(--c-red); color: #fff; font-size: 10.5px; line-height: 15px; vertical-align: 1px;
}
.msg-tabs a.on em { background: rgba(255,255,255,.28); }

/* 消息列表 */
.msg-list { }
.msg-item {
    padding: 13px 14px; border-bottom: 1px solid var(--c-line-lt);
    border-left: 3px solid transparent; cursor: pointer; background: var(--c-white);
}
.msg-item:last-child { border-bottom: 0; }
.msg-item:hover { background: var(--c-bg-lt); border-left-color: var(--c-main); }
.msg-item.unread { background: #fbfcfe; border-left-color: var(--c-main); }
.msg-item.unread .msg-title { font-weight: 700; color: var(--c-t1); }

.msg-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-type {
    font-size: 11.5px; line-height: 18px; padding: 0 7px; flex: 0 0 auto;
    border: 1px solid var(--c-line); color: var(--c-t3); background: var(--c-bg-lt);
}
.msg-type.t-lead       { border-color: var(--c-main-bd); color: var(--c-main); background: var(--c-main-lt); }
.msg-type.t-commission { border-color: #f0c2c9; color: var(--c-red); background: var(--c-red-lt); }
.msg-type.t-audit      { border-color: #b7e0c2; color: #1f7a3d; background: #edf9f0; }

.msg-title { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--c-t2); }
.msg-new { flex: 0 0 auto; font-size: 10.5px; line-height: 16px; padding: 0 6px; background: var(--c-red); color: #fff; }
.msg-time { flex: 0 0 auto; font-size: 12px; color: var(--c-t4); }
.msg-body { margin-top: 6px; font-size: 12.5px; color: var(--c-t3); line-height: 1.75; }

/* ---------------- 29. 项目类型标识（带佣金 / 纯信息） ---------------- */

/* 推广可得：让代理一眼看到能赚多少 */
.tg-promo { border-color: var(--c-red); color: #fff; background: var(--c-red); font-weight: 700; }
/* 信息发布：纯信息项目，明确标注不参与推广，避免代理误解 */
.tg-info  { border-color: var(--c-line); color: var(--c-t4); background: var(--c-bg-lt); }

/* 认证徽章 */
.vbadge {
    display: inline-block; margin-left: 6px; padding: 1px 7px;
    font-size: 11px; line-height: 16px; vertical-align: 1px;
    border: 1px solid #b7e0c2; background: #edf9f0; color: #1f7a3d;
}
.vbadge.pending { border-color: #f0d9a8; background: #fdf6e8; color: #b45309; }
.vbadge.no      { border-color: #f0c2c9; background: var(--c-red-lt); color: #8f1226; }
.vbadge.none    { border-color: var(--c-line); background: var(--c-bg-lt); color: var(--c-t4); }

/* 列表行里的发布者抬头 + 认证标识 */
.p-pub { display: block; margin-top: 3px; font-size: 11.5px; color: var(--c-t4); }
.p-pub .vbadge { margin-left: 0; margin-right: 5px; font-size: 10.5px; padding: 0 5px; line-height: 15px; }
.p-pub-n { color: var(--c-t3); }

/* ---------------- 分类化发布模板 ---------------- */
/* 发布页：当前分类的模板提示条 */
.ptype-tip {
    margin: 0 0 10px; padding: 8px 12px;
    font-size: 12.5px; color: var(--c-t2);
    background: var(--c-main-lt); border-left: 3px solid var(--c-main);
}
/* 详情页：长文本规格块（短字段走 .spec 表格） */
.spec-block { margin-bottom: 14px; }
.spec-block:last-child { margin-bottom: 0; }
.spec-block-hd {
    padding: 5px 10px; font-size: 12.5px; font-weight: 700; color: var(--c-t2);
    background: var(--c-bg-lt); border-left: 2px solid var(--c-line);
    margin-bottom: 8px;
}

/* 必填星号（.req 之前只在模板里写了类名，CSS 一直没定义，等于没生效） */
.req { color: var(--c-red); font-style: normal; }

/* ================================================================
   通栏小卡片区（首页「最新发布」）
   ----------------------------------------------------------------
   解决什么：三栏是 align-items:flex-start，各栏独立高度。原先「最新发布」
   以 15 条横向长条放在中列，把中列拉到 1600px，而左右两栏只有 500~560px，
   于是页面下半部只有中间有内容、两侧空掉。

   尺寸演进（按用户反馈调）：
     第一版：3 列 / 图 16:10 / 带简介        单卡 ~370 × 350  ← "太大了"
     第二版：4 列 / 图 16:9  / 去简介         单卡 ~288 × 250  ← "比刚才漂亮多了，还是偏大"
     现在  ：5 列 / 图 16:9  / 再收紧一档    单卡 ~230 × 225  ← 并留出卡片间距

   ⚠️ 与门户工业风的一个刻意例外：
      站内其它地方是"1px 拼缝、0 间距"（.spec 表格、四宫格都是），
      但卡片区**特意留 12px 空隙**（用户 2026-09-14：
      "各个卡片直接左右有空隙，上下也有空隙，这样不会显示的拥挤，还漂亮"）。
      有间距之后每张卡必须自带边框，否则会散掉 —— 见 .cg-card 的 border。

   ⚠️ 想再调大小就改这三个地方：
       列数：下面 .cg-grid 的 repeat(5, 1fr)   → 4 更大 / 6 更小
       间距：下面 .cg-grid 的 gap
       高矮：下面 .cg-img 的 aspect-ratio      → 21/9 更扁，4/3 更方
   ================================================================ */
.cg-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;                    /* 左右与上下都留空隙，不再用 1px 拼缝 */
    background: transparent;
    border: 0;
}
.cg-card {
    display: flex; flex-direction: column;
    background: var(--c-white);
    /* 有间距后必须自带边框，否则一张张卡会散掉 */
    border: 1px solid var(--c-line);
    text-decoration: none; color: inherit;
}
.cg-card:hover { border-color: var(--c-main-bd); background: var(--c-bg-lt); }

.cg-img {
    position: relative; display: block;
    aspect-ratio: 16 / 9; overflow: hidden;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line-lt);
}
.cg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-noimg {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-style: normal; font-size: 11.5px; color: var(--c-t4);
}
.cg-cat {
    position: absolute; left: 0; top: 0;
    padding: 1px 7px; font-style: normal;
    font-size: 10.5px; color: #fff; background: var(--c-main-dk);
}
/* 认证标识压到图片左下角：小卡片没地方单独放一行，但这是信任卖点不能丢 */
.cg-vf {
    position: absolute; left: 0; bottom: 0;
    padding: 1px 7px; font-style: normal;
    font-size: 10.5px; color: #fff; background: rgba(31,122,61,.92);
}

.cg-body { display: block; padding: 8px 10px 5px; flex: 1 1 auto; }
.cg-title {
    display: block; font-size: 12.5px; font-weight: 700; line-height: 1.45;
    color: var(--c-t1); height: 36px; overflow: hidden;
}
.cg-card:hover .cg-title { color: var(--c-main); }
.cg-meta { display: block; margin-top: 4px; font-size: 10.5px; }
.cg-type { font-style: normal; color: var(--c-t4); }
.cg-count { font-style: normal; color: var(--c-t4); margin-left: 7px; }

.cg-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; border-top: 1px solid var(--c-line-lt);
}
.cg-fee b { font-size: 13px; color: var(--c-red); font-family: Arial, sans-serif; }
.cg-op { display: flex; align-items: center; gap: 6px; }
.cg-promo { font-style: normal; font-size: 10.5px; color: var(--c-red); }
.cg-btn {
    display: inline-block; padding: 2px 9px;
    font-style: normal; font-size: 11.5px;
    color: var(--c-main); border: 1px solid var(--c-main-bd); background: var(--c-main-lt);
}
.cg-card:hover .cg-btn { background: var(--c-main); color: #fff; border-color: var(--c-main); }

@media (max-width: 1100px) { .cg-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .cg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .cg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .cg-grid { grid-template-columns: 1fr; } }

/* ⚠️ 卡片列数**恒定**，不要改成"按条数自适应"：
   用户 2026-09-14："有空白就空白，这样风格不统一了，就 3 条也要风格统一。"
   出国留学区当时只有 3 条，我先后试过两种"聪明办法"，都被推翻：
     ① 不足 5 条就降级为文字行  → 打乱了用户点名的卡片/文字/卡片/文字节奏
     ② 列数按条数自适应（3 条 → 3 列，卡片从 225 宽变 383 宽）
        → 各区的卡片尺寸不一致，**风格不统一**，用户明确否掉
   结论：**卡片尺寸恒定 5 列，条数不够就留白**。
   要补全那些条目，走标题栏的「更多」进分类列表页，不要在首页做自适应。 */

/* ================================================================
   横排段：**纯文字行** 两列排布（首页混排区的偶数段）
   ----------------------------------------------------------------
   为什么不是通栏一行一条（用户 2026-09-14）：
     "太宽，太丑，缩窄，放两排…左边两条右边两条"
     通栏行宽 1200px，文字只占一小截 —— 一行里大片留白，显得又宽又空。
     改成两列后每行约 594px，比例才正常。

   ⚠️ 为什么这里**不带缩略图**（用户："文字的这种就不能放图片了，太乱，
      就纯文字，更好"）：
      第一版带 104×74 的缩略图，但**撑高这一行的是文字不是图** ——
      标题 22 + 简介 22 + 标签 24 + 发布者 19 ≈ 95px，比缩略图还高。
      所以"只去掉图"行高几乎不变（119 → 116），必须同时把简介行也压掉，
      行高才真正降下来（→ 约 78px）。

   ⚠️ 因此这一段的行高**不再与卡片排齐平**，而是刻意更矮（卡片排 239px）：
      卡片排是"厚"的一块，文字排是"薄"的一条，两种厚度交替才有节奏。
      用户要的就是这个落差，**不要再把它垫高去凑齐**。

   ⚠️ 这里刻意**不给整段加外框**，而是每行自成一块（各自 border），
      与上面的卡片排保持同一种视觉语言 —— 见 .cg-card 也是各自 border。

   ⚠️ 缩略图的开与关由模板决定：`_row.html` 用 `no_thumb` 开关，
      首页这段传 `no_thumb="1"`，**列表页与推荐项目仍带图**，不要改模板默认行为。
   ================================================================ */
.pl-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.pl-grid .p-row {
    border: 1px solid var(--c-line);
    padding: 9px 11px;
    gap: 10px;
    align-items: center;
    /* ⚠️ 必须给统一最小高度：带发布者标识的行 87px、不带的只有 66px，
       同一页两段文字区会一段高一段矮（实测 186 vs 143），反而更乱。
       .p-tags 基类有 margin-top:auto，多余空间会自动落在标签上方，
       所以行内不会出现难看的空档。 */
    min-height: 88px;
}
/* 基类里有 .p-row:last-child { border-bottom: 0 }（用在连排列表里），
   但两列网格里每一行都必须有完整边框，否则最后一条会缺一条边 */
.pl-grid .p-row:last-child { border-bottom: 1px solid var(--c-line); }
.pl-grid .p-row:hover { border-color: var(--c-main-bd); }
/* 纯文字行不放简介：这一行是撑高行的主因，去掉它行高才压得下来。
   简介在详情页与列表页都能看到，这里换来的是一屏能多看一条项目。 */
.pl-grid .p-desc  { display: none; }
.pl-grid .p-title { font-size: 13.5px; }
.pl-grid .p-tags  { padding-top: 5px; }
.pl-grid .p-fee   { flex: 0 0 96px; width: 96px; padding-left: 10px; }
.pl-grid .p-fee b { font-size: 15px; }
.pl-grid .p-op    { flex: 0 0 76px; width: 76px; }
.pl-grid .p-op .btn-o { padding: 2px 9px; font-size: 12px; line-height: 26px; }

@media (max-width: 1000px) { .pl-grid { grid-template-columns: 1fr; } }

/* ================================================================
   分类区块（首页下半部）：每个分类 = 一个 .blk + 自己的标题栏
   ----------------------------------------------------------------
   用户 2026-09-14："咱们不是有四个分类吗？最新发布这个改成学历提升最新发布，
   下面是 2 排共 10 条的卡片…再来一个标题就业安置最新发布…"
   所以这里不再是"一个最新发布里塞四段"，而是**四个各自带标题栏的区块**。

   ⚠️ 先查出的**真 bug**（不是感觉问题）：上一版只有一个大外框，
     而间距只在文字段上加了 mt16、卡片段全漏，接缝实测是 0px 与 16px
     **交替**的（标题栏→第一段卡片 0px、文字段→第二段卡片 0px），
     用户说的"堆在一起"就是这两处 0px。现在每区一个 .blk，
     区块之间统一 16px（.mt16），从结构上就不会再出现 0 接缝。

   .blk-band = 区块内的**内容托盘**：
     padding 12px + 灰底，**不加边框**。
     三个层次靠"有框/无框 + 深浅"区分，不靠叠线：
       外层 .blk        1px 框（--c-line）      ← section
       内容托盘 .blk-band 无框，只有灰底         ← 内容分组
       卡片 .cg-card / 行 .pl-grid .p-row  1px 框 ← 条目
     这样仍然是两层框（外框 + 条目框），中间那层用底色隔开，不会框套框。

   ⚠️ 托盘底为什么不用 --c-bg-lt（#f7f9fb）：它跟白色只差 8/255，
      屏幕上看不出边界、等于没隔。用页面底 --c-bg（#f0f2f5）才看得出。
   ================================================================ */
.blk-band {
    padding: 12px;
    background: var(--c-bg);
}


/* 平台已核实的事实行（手机号已绑定等）—— 与"认证"区分开，认证是审出来的，事实是本来就有的 */
.factline {
    margin-top: 10px; padding: 7px 10px;
    font-size: 12px; color: var(--c-t3); line-height: 1.8;
    background: var(--c-bg-lt); border-left: 2px solid var(--c-line);
}
.vstate-no {
    font-size: 12px; color: var(--c-t3);
    font-family: Consolas, Menlo, monospace; letter-spacing: .3px;
}

/* 隐私与合规声明块：说清"我们不收什么" */
.privacy-note { font-size: 12.5px; color: var(--c-t2); line-height: 1.95; }
.privacy-note p { margin: 0 0 8px; }
.privacy-note ul { margin: 0 0 8px; padding-left: 20px; }
.privacy-note li { margin-bottom: 2px; }
.privacy-note strong { color: var(--c-t1); }
.privacy-note .privacy-tail {
    margin: 0; padding-top: 8px; border-top: 1px dashed var(--c-line-lt);
    color: var(--c-t3); font-size: 12px;
}

/* ---------------- 认证申请：状态条 + 类型选择 ---------------- */
.vstate {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.vstate-l { display: flex; align-items: center; gap: 8px; }
.vstate-l .vbadge { margin-left: 0; font-size: 12px; padding: 3px 10px; line-height: 18px; }
.vstate-n { font-size: 13px; font-weight: 700; color: var(--c-t1); }
.vstate-r {
    font-size: 12px; color: var(--c-t3); line-height: 1.9;
    display: flex; flex-direction: column; text-align: right;
}

/* 认证类型三选一：0 圆角、1px 分隔线，跟门户工业风一致 */
.vtypes { display: flex; border: 1px solid var(--c-line); background: #fff; }
.vtype {
    flex: 1 1 0; min-width: 0; padding: 11px 13px; cursor: pointer;
    border-right: 1px solid var(--c-line);
    display: block; margin: 0;
}
.vtype:last-child { border-right: 0; }
.vtype:hover { background: var(--c-bg-lt); }
.vtype.on { background: var(--c-main-lt); box-shadow: inset 0 -2px 0 var(--c-main); }
.vtype input { width: auto; margin: 0 6px 0 0; vertical-align: -1px; }
.vtype b { font-size: 13px; color: var(--c-t1); }
.vtype span { display: block; font-size: 11.5px; color: var(--c-t3); line-height: 1.7; margin-top: 4px; }
@media (max-width: 700px) {
    .vtypes { flex-direction: column; }
    .vtype { border-right: 0; border-bottom: 1px solid var(--c-line); }
    .vtype:last-child { border-bottom: 0; }
    .vstate-r { text-align: left; }
}

/* ---------------- 21. 响应式（门户缩栏） ---------------- */
@media (max-width: 1240px) {
    .wrap { width: 100%; padding: 0 10px; }
}
@media (max-width: 1000px) {
    .cols, .cols-detail { flex-wrap: wrap; }
    .col-side  { flex: 0 0 100%; width: 100%; }
    .col-main  { flex: 0 0 100%; width: 100%; }
    .col-right { flex: 0 0 100%; width: 100%; }
    /* 窄屏下三栏撑成整宽，侧栏变成通栏列表 —— 这时"向右滑出"没有意义（右边就是屏幕外）。
       关掉浮层，整行点击进分类页的行为**原样保留**，所以触屏用户不会少任何入口
       （分类页里还有「细分方向」筛选条）。 */
    .side-menu .sub { display: none !important; }
    .side-menu .mi:hover > .sub, .side-menu .mi:focus-within > .sub { display: none !important; }
    .hdr .wrap { flex-wrap: wrap; gap: 14px; }
    .hsearch { margin-left: 0; width: 100%; }
    .hsearch input { width: auto; flex: 1 1 auto; }
    .hdr-note { display: none; }
    .bn-row { flex-wrap: wrap; }
    .bn-item { flex: 0 0 calc(50% - 8px); }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ---------------- 22. 登录 / 注册页 ---------------- */
.auth-wrap {
    display: flex; gap: 0;
    border: 1px solid var(--c-line); border-top: 3px solid var(--c-main);
    background: var(--c-white); margin-bottom: 20px;
}
.auth-side {
    flex: 0 0 330px; width: 330px;
    background: var(--c-main); color: #fff;
    padding: 34px 28px;
}
.auth-side h2 { font-size: 21px; letter-spacing: 1px; margin-bottom: 10px; }
.auth-side .sub { font-size: 12.5px; color: #bcd0e8; line-height: 1.8; margin-bottom: 22px; }
.auth-side ul li {
    font-size: 13px; color: #dbe7f5; line-height: 2.1;
    padding-left: 16px; position: relative;
}
.auth-side ul li::before {
    content: ""; position: absolute; left: 0; top: 13px;
    width: 5px; height: 5px; background: #7fa8d8;
}
.auth-side .tip {
    margin-top: 26px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.18);
    font-size: 12px; color: #a8c2de; line-height: 1.9;
}

.auth-main { flex: 1 1 auto; padding: 26px 40px 34px; min-width: 0; }
.auth-tabs { display: flex; border-bottom: 1px solid var(--c-line); margin-bottom: 24px; }
.auth-tabs a {
    padding: 9px 24px; font-size: 15px; color: var(--c-t3);
    border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px;
}
.auth-tabs a.on {
    background: var(--c-white); border-color: var(--c-line);
    border-bottom-color: var(--c-white);
    color: var(--c-main); font-weight: 700;
}
.auth-tabs a:hover { color: var(--c-main); }
.auth-form { max-width: 400px; }
.auth-form .fld { margin-bottom: 14px; }
.auth-form .fld input[type=text],
.auth-form .fld input[type=password],
.auth-form .fld input[type=tel],
.auth-form .fld input[type=email] { height: 36px; }
.auth-form .chk { font-size: 12.5px; color: var(--c-t2); display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.auth-form .chk input { width: auto; }
.auth-form .chk a { color: var(--c-main); }

/* 验证码那一行：输入框占剩余宽度，图片固定 132×42（与 app\recruit\service\Captcha 的尺寸一致） */
.cap-row { display: flex; align-items: center; gap: 8px; }
.cap-row input { flex: 1 1 auto; min-width: 0; }
.cap-row img {
    flex: 0 0 132px; width: 132px; height: 42px;
    border: 1px solid var(--c-line); cursor: pointer; background: var(--c-bg-lt);
}
.cap-row img:hover { border-color: var(--c-main); }

/* ---------------- 注册页身份选择（2026-09-15） ----------------
   两选一的"意图"卡：学员 / 机构·代理。整块可点（label 包住 radio），
   沿用工业风：0 圆角、1px 细线。
   ⚠️ 文案只讲"意图"，不讲"权限"—— 选 business 不等于已经是代理，
      推广资格仍要走 /apply.html 审核（见 21 号文档规则 4）。 */
.idpick { display: grid; gap: 8px; margin-top: 6px; }
.idpick-i {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 10px 12px; cursor: pointer;
    background: var(--c-white); border: 1px solid var(--c-line);
}
.idpick-i:hover { border-color: var(--c-main-bd); }
.idpick-i input { margin-top: 3px; flex: 0 0 auto; }
.idpick-t { display: block; line-height: 1.7; }
.idpick-t b { display: block; font-size: 13.5px; color: var(--c-t1); }
.idpick-t i { display: block; font-style: normal; font-size: 12px; color: var(--c-t3); }
/* 选中态：整卡换底色 + 主色描边
   （:has 在老浏览器不生效也只是没有高亮，不影响能不能选、能不能提交） */
.idpick-i:has(input:checked) { background: var(--c-main-lt); border-color: var(--c-main); }

/* 看起来像链接的按钮：用于"切换为机构 / 代理工作台"这类低调入口。
   为什么不用 a 标签：那是个会**改数据**的动作，必须是 POST 表单，
   所以只能用 button —— 但视觉上要轻，不能像个大按钮。 */
.linklike {
    padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: var(--c-main); text-decoration: underline;
}
.linklike:hover { color: var(--c-red); }

/* ---------------- 报名线索：处理按钮 / 变更记录 / 申诉（2026-09-15） ----------------
   这一整块是"记账可信度"的界面：项目方能改状态，代理能看变更记录并申诉。
   刻意做得很轻 —— 它是操作区，不该抢线索本身（姓名、电话）的注意力。 */
.lead-btns { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.linklike.danger { color: #a3122a; }
.linklike.danger:hover { color: var(--c-red); }
/* 变更记录：原生 details，不依赖 JS */
.lead-his { margin-top: 5px; font-size: 12px; }
.lead-his > summary {
    cursor: pointer; color: var(--c-main); list-style: none;
    text-decoration: underline; text-underline-offset: 2px;
}
.lead-his > summary::-webkit-details-marker { display: none; }
.lead-his-bd {
    margin-top: 5px; padding: 6px 8px; line-height: 1.9;
    background: var(--c-bg-lt); border: 1px solid var(--c-line-lt); color: var(--c-t2);
}
/* 申诉输入行 */
.appeal-box { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.appeal-box input {
    flex: 1 1 auto; min-width: 120px; height: 28px; padding: 0 8px;
    font-size: 12px; background: var(--c-white); border: 1px solid var(--c-line);
}
.appeal-box input:focus { outline: none; border-color: var(--c-main); }
.auth-alt { margin-top: 16px; font-size: 12.5px; color: var(--c-t3); }
.auth-alt a { color: var(--c-main); }

/* ---------------- 23. 会员中心 ---------------- */
.mc-head {
    display: flex; align-items: center; gap: 18px;
    background: var(--c-white); border: 1px solid var(--c-line); border-top: 3px solid var(--c-main);
    padding: 18px 20px;
}
.mc-av {
    flex: 0 0 62px; width: 62px; height: 62px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-main); color: #fff; font-size: 24px; font-weight: 700;
}
.mc-info { flex: 1 1 auto; min-width: 0; }
.mc-name { font-size: 18px; font-weight: 700; color: var(--c-t1); }
.mc-name .badge {
    display: inline-block; vertical-align: middle;
    margin-left: 8px; padding: 1px 8px;
    font-size: 11.5px; font-weight: 400;
    background: var(--c-main-lt); border: 1px solid var(--c-main-bd); color: var(--c-main);
}
.mc-name .badge.vip { background: var(--c-red-lt); border-color: #f0c2c9; color: var(--c-red); }
.mc-sub { font-size: 12.5px; color: var(--c-t3); margin-top: 6px; }
.mc-sub span { margin-right: 16px; }
.mc-op { flex: 0 0 auto; display: flex; gap: 8px; }

.stat-row { display: flex; background: var(--c-white); border: 1px solid var(--c-line); border-top: 0; }
.stat-cell { flex: 1 1 0; text-align: center; padding: 14px 8px; border-right: 1px solid var(--c-line-lt); }
.stat-cell:last-child { border-right: 0; }
.stat-cell b { display: block; font-size: 22px; color: var(--c-red); line-height: 1.3; }
.stat-cell b.gray { color: var(--c-t1); }
.stat-cell span { font-size: 12px; color: var(--c-t3); }

/* 数据表格（门户风） */
table.data { border: 1px solid var(--c-line); font-size: 12.5px; }
table.data th, table.data td { border: 1px solid var(--c-line-lt); padding: 8px 10px; text-align: left; }
table.data thead th { background: var(--c-bg-lt); color: var(--c-t2); font-weight: 700; white-space: nowrap; }
table.data tbody tr:hover { background: var(--c-bg-lt); }
table.data td.num { color: var(--c-red); font-weight: 700; }
table.data .muted { color: var(--c-t4); }
.st-pending { color: #b45309; }
.st-settled { color: #1f7a3d; }
.st-approved { color: #1f7a3d; }
.st-rejected { color: var(--c-red); }

/* 推广链接框 */
.ref-box {
    display: flex; gap: 8px; align-items: center;
    background: var(--c-main-lt); border: 1px dashed var(--c-main-bd);
    padding: 10px 12px; margin-top: 10px;
}
.ref-box input {
    flex: 1 1 auto; height: 30px; padding: 0 8px;
    border: 1px solid var(--c-main-bd); background: #fff; color: var(--c-main-dk);
    font-size: 12.5px;
}
.ref-box button { height: 30px; }

/* 步骤条（申请页） */
.steps { display: flex; background: var(--c-white); border: 1px solid var(--c-line); margin-bottom: 16px; }
.steps .sp {
    flex: 1 1 0; padding: 14px 12px; text-align: center;
    border-right: 1px solid var(--c-line-lt); font-size: 12.5px; color: var(--c-t3);
}
.steps .sp:last-child { border-right: 0; }
.steps .sp b { display: block; font-size: 20px; color: var(--c-main-bd); line-height: 1.4; }
.steps .sp.on { background: var(--c-main-lt); color: var(--c-main-dk); }
.steps .sp.on b { color: var(--c-main); }

/* ---------------- 24. 账户页响应式 ---------------- */
@media (max-width: 900px) {
    .auth-wrap { flex-wrap: wrap; }
    .auth-side { flex: 0 0 100%; width: 100%; padding: 22px 20px; }
    .auth-side ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
    .auth-main { padding: 20px; }
    .auth-form { max-width: 100%; }
    .mc-head { flex-wrap: wrap; }
    .mc-op { flex: 0 0 100%; }
    .stat-row { flex-wrap: wrap; }
    .stat-cell { flex: 0 0 50%; border-bottom: 1px solid var(--c-line-lt); }
    table.data { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 640px) {
    .nav .wrap { overflow-x: auto; }
    .nav a { padding: 0 16px; font-size: 14px; white-space: nowrap; }
    .p-thumb { flex: 0 0 84px; width: 84px; height: 62px; }
    .p-fee { flex: 0 0 88px; width: 88px; }
    .p-fee b { font-size: 16px; }
    .p-op { display: none; }
    .d-title { font-size: 19px; }
    .bn-item { flex: 0 0 100%; }
    table.spec th { width: 88px; }
    .stat-cell { flex: 0 0 100%; }
    .auth-tabs a { padding: 9px 16px; font-size: 14px; }
}

/* ---------------- 25. 发布项目表单 ---------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.form-grid .fld.full { grid-column: 1 / -1; }
.form-grid .fld label .req { color: var(--c-red); }

.up-box { display: flex; gap: 14px; align-items: flex-start; }
.up-preview {
    flex: 0 0 168px; width: 168px; height: 112px;
    border: 1px solid var(--c-line); background: var(--c-bg-lt);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; color: var(--c-t4); font-size: 12px;
}
.up-preview img { width: 100%; height: 100%; object-fit: cover; }
.up-op { flex: 1 1 auto; min-width: 0; }
.up-op .btn { cursor: pointer; }
.up-tip { font-size: 11.5px; color: var(--c-t4); line-height: 1.7; margin-top: 8px; }

.gal { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.gal .g-item { position: relative; width: 100px; height: 70px; border: 1px solid var(--c-line); overflow: hidden; }
.gal .g-item img { width: 100%; height: 100%; object-fit: cover; }
.gal .g-del {
    position: absolute; top: 0; right: 0;
    width: 18px; height: 18px; line-height: 18px; text-align: center;
    background: rgba(200,16,46,.92); color: #fff; font-size: 12px; cursor: pointer;
}

.form-actions {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 12px; background: var(--c-bg-lt);
    border-top: 1px solid var(--c-line);
}

/* 会员中心：我的发布 */
.st-draft   { color: var(--c-t3); }
.st-hidden  { color: var(--c-t4); }

@media (max-width: 720px) {
    .form-grid { grid-template-columns: 1fr; }
    .up-box { flex-wrap: wrap; }
    .up-preview { flex: 0 0 100%; width: 100%; }
}