/* ============================================================================
   人才服务模块（1b 前台三页）专属样式
   头部/底部复用 news.css 的 site-header/site-footer；本文件只管模块主体。
   前缀 tl- 避免冲突；移动优先（设计方案 §五 mobile-first 基准），768px+/1024px+ 增强。
   色板沿用 tech-doc.css 同款（#2f80ed 主色 / #f4f6f9 底 / #e8f7ef 绿）。
   ============================================================================ */

/* ---------- 公共 ---------- */
/* 10-12 三区改版：页面底=灰，三区各为白卡片，视觉分区替代原 tab 切换 */
.tl-page { max-width: 1100px; margin: 0 auto; padding: 16px 16px 96px; background: transparent; min-height: 60vh; }
main { background: #f4f6f9; }
.tl-page a { text-decoration: none; color: inherit; }
.tl-badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 12px; line-height: 18px; white-space: nowrap;
}
.tl-badge-supply { background: #e8f7ef; color: #27ae60; border: 1px solid #bfe8d2; }
.tl-badge-demand { background: #fdf3e7; color: #e67e22; border: 1px solid #f5d9b8; }
.tl-badge-ent { background: #eaf2fd; color: #2f80ed; border: 1px solid #c9def8; }
.tl-badge-pin { background: #fdeeee; color: #d9534f; border: 1px solid #f5c6c6; }

/* ---------- 列表页：全局搜索 + 三分区 ---------- */
/* 🔴 吸顶契约（v4，talent_toolbar_sticky_probe.mjs 断言）：
   10-12 三区改版后原三行 .tl-toolbar 退役，仅保留搜索行可吸顶——
   桌面 ≥768px sticky top 必须 = site-header 高 56px（top:0 会被头部 z-index:1000 盖住）；
   窄屏 <768px 不吸顶（三行大块吸顶会占手机视口 1/4，一行搜索可接受但收益低，统一不吸）。 */
.tl-search-row { display: flex; gap: 10px; }
@media (min-width: 768px) {
    .tl-search-row {
        position: sticky; top: 56px; z-index: 30;
        background: #f4f6f9; margin: 0 -16px; padding: 10px 16px 8px;
    }
}
/* 🔴 全站暗约定（tech-doc.css:360 / square.css:858 同款补偿）：
   news.css 在 ≤768px 把 .site-header 从 sticky 改成 position:fixed——脱离文档流不占位，
   主体必须自行让位 56px，否则首屏顶部（搜索框）被固定头部盖住。 */
@media (max-width: 768px) {
    .tl-page { padding-top: 72px; } /* 56 固定头部 + 16 原有内边距 */
}
.tl-search-row input {
    flex: 1; padding: 9px 12px; border: 1px solid #d7dee6; border-radius: 8px;
    font-size: 14px; outline: none; min-width: 0;
}
.tl-search-row input:focus { border-color: #2f80ed; }
.tl-search-row button {
    padding: 9px 18px; border: none; border-radius: 8px;
    background: #2f80ed; color: #fff; font-size: 14px; cursor: pointer;
}

/* ---------- 三分区容器 ---------- */
.tl-sec {
    background: #fff; border: 1px solid #e5eaf0; border-radius: 12px;
    padding: 16px; margin-top: 14px;
    scroll-margin-top: 64px; /* ?type/?kind 直达 scrollIntoView 时给固定头部让位 */
}
@media (max-width: 767px) { .tl-sec { padding: 12px; border-radius: 10px; } }
.tl-sec-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tl-sec-title {
    font-size: 17px; font-weight: 700; color: #2c3e50; margin: 0; line-height: 1.25;
    padding-left: 10px; border-left: 4px solid #2f80ed;
}
/* 求职/招聘分段控件（区内二级切换，白底灰槽 + 主色滑块） */
.tl-seg { display: inline-flex; background: #f4f6f9; border-radius: 999px; padding: 3px; gap: 2px; }
.tl-seg-btn {
    border: none; background: transparent; color: #7b8a99; font-size: 13.5px;
    padding: 5px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.tl-seg-btn.active { background: #2f80ed; color: #fff; font-weight: 700; }
.tl-sec-count { margin-left: auto; font-size: 12.5px; color: #9aa8b6; white-space: nowrap; }
.tl-sec-pub {
    font-size: 13px; color: #2f80ed; background: #eaf2fd; border: 1px solid #c9def8;
    padding: 4px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;
}
.tl-sec-pub:hover { background: #2f80ed; color: #fff; }
.tl-sec .tl-cards { margin-top: 12px; }
.tl-sec .tl-empty { padding: 36px 0; }
.tl-sec .tl-more { margin-top: 14px; }
.tl-filters { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.tl-filters::-webkit-scrollbar { display: none; }
.tl-fchip {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; border: 1px solid #d7dee6; border-radius: 999px;
    background: #fff; color: #4a6785; font-size: 13px; cursor: pointer; user-select: none;
}
.tl-fchip.on { border-color: #2f80ed; color: #2f80ed; background: #eaf2fd; }
.tl-fchip select {
    border: none; background: transparent; color: inherit; font-size: 13px;
    max-width: 130px; outline: none; cursor: pointer;
}

/* ---------- 列表卡片流 ---------- */
.tl-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
@media (min-width: 768px) { .tl-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tl-cards { grid-template-columns: repeat(3, 1fr); } }
.tl-card {
    background: #fff; border: 1px solid #e5eaf0; border-radius: 10px;
    padding: 14px; display: flex; flex-direction: column; gap: 8px;
    transition: box-shadow .15s;
}
.tl-card:hover { box-shadow: 0 4px 14px rgba(30, 50, 80, .08); }
.tl-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tl-card-title { font-size: 15px; font-weight: 700; color: #2c3e50; line-height: 1.4; margin: 0; }
.tl-card-summary {
    font-size: 13px; color: #7b8a99; line-height: 1.55; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.tl-card-meta { font-size: 12.5px; color: #4a6785; line-height: 1.6; }
.tl-card-foot { display: flex; justify-content: space-between; font-size: 12px; color: #9aa8b6; margin-top: auto; }
.tl-card-foot .exp { color: #e67e22; }

.tl-empty { text-align: center; padding: 60px 0; color: #9aa8b6; font-size: 14px; }
.tl-empty a { color: #2f80ed; }
.tl-more { display: block; margin: 20px auto 0; padding: 9px 40px; border: 1px solid #d7dee6; border-radius: 999px; background: #fff; color: #4a6785; font-size: 14px; cursor: pointer; }
.tl-more:hover { border-color: #2f80ed; color: #2f80ed; }
.tl-more:disabled { opacity: .65; cursor: default; border-color: #d7dee6; color: #9aa8b6; }
.tl-more:disabled:hover { border-color: #d7dee6; color: #9aa8b6; }

/* 发布按钮（列表底部固定栏） */
.tl-publish-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: #fff; border-top: 1px solid #e5eaf0; padding: 10px 16px;
    text-align: center;
}
.tl-publish-bar a {
    display: inline-block; background: #2f80ed; color: #fff; font-size: 15px;
    padding: 11px 48px; border-radius: 999px; cursor: pointer;
}
.tl-publish-bar a:hover { background: #1c6dd0; }

/* ---------- 详情页 ---------- */
.tl-detail-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 13px; }
.tl-detail-top a { color: #2f80ed; }
.tl-detail-top .ops { display: flex; gap: 14px; }
.tl-detail-top .ops a, .tl-detail-top .ops button { color: #7b8a99; background: none; border: none; font-size: 13px; cursor: pointer; padding: 0; }
.tl-detail-top .ops a:hover, .tl-detail-top .ops button:hover { color: #2f80ed; }

.tl-detail-card { background: #fff; border: 1px solid #e5eaf0; border-radius: 12px; padding: 18px; }
.tl-detail-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; font-size: 12.5px; color: #9aa8b6; }
.tl-detail-title { font-size: 19px; font-weight: 700; color: #2c3e50; margin: 0 0 14px; line-height: 1.45; }
.tl-facts {
    background: #f7f9fb; border: 1px solid #e5eaf0; border-radius: 8px;
    padding: 12px 14px; font-size: 13.5px; color: #4a6785; line-height: 2;
}
.tl-facts b { color: #2c3e50; font-weight: 400; }
.tl-content { font-size: 14.5px; color: #2c3e50; line-height: 1.8; white-space: pre-wrap; word-break: break-word; margin: 16px 0; }

.tl-contact {
    border: 1.5px solid #2f80ed; border-radius: 10px; background: #f7f9fb;
    padding: 14px; text-align: center; margin: 16px 0;
}
.tl-contact .label { font-size: 12.5px; color: #7b8a99; margin-bottom: 6px; }
.tl-contact .row { font-size: 14px; color: #2c3e50; margin-bottom: 4px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; align-items: center; }
.tl-contact .hint { font-size: 12.5px; color: #9aa8b6; margin-bottom: 10px; }
.tl-btn {
    display: inline-block; border: none; border-radius: 999px; cursor: pointer;
    background: #2f80ed; color: #fff; font-size: 14px; padding: 9px 26px;
}
.tl-btn:hover { background: #1c6dd0; }
.tl-btn.ghost { background: #fff; color: #4a6785; border: 1px solid #d7dee6; }
.tl-btn.ghost:hover { color: #2f80ed; border-color: #2f80ed; background: #fff; }
.tl-btn.block { display: block; width: 100%; }

.tl-disclaimer {
    background: #f7f9fb; border-radius: 8px; padding: 10px 14px;
    font-size: 12px; color: #9aa8b6; line-height: 1.7; margin: 14px 0;
}

.tl-side-posts h3 { font-size: 15px; color: #2c3e50; margin: 20px 0 10px; }
.tl-side-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.tl-side-row::-webkit-scrollbar { display: none; }
.tl-side-card {
    flex-shrink: 0; width: 170px; border: 1px solid #e5eaf0; border-radius: 8px; padding: 10px;
    font-size: 13px; color: #2c3e50;
}
.tl-side-card p { margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-side-card span { font-size: 11.5px; color: #9aa8b6; }

.tl-detail-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: #fff; border-top: 1px solid #e5eaf0; padding: 10px 16px;
    display: flex; gap: 10px;
}
.tl-detail-actions .tl-btn { flex: 1; padding: 11px 0; font-size: 15px; }
@media (min-width: 768px) {
    .tl-detail-actions { position: static; border: none; padding: 14px 0 0; }
    .tl-detail-actions .tl-btn { flex: 0 0 auto; padding: 11px 40px; }
}

/* ---------- 发布向导 ---------- */
/* 20261012 区域划分改版（对齐列表页三区视觉语言）：
   灰底上拆三张白卡——步骤条卡 / 内容卡(.tl-step) / 底部按钮卡；
   内容卡内部再用 .pub-grp 竖条标题分组（基本信息/证书信息/职位信息…），
   组随类型显隐（grp-cert=证书类 / grp-jobs=非证书类，applyPostTypeRows 驱动）。
   步骤显隐契约不变：.tl-step 仍是单容器 display:none→active:block，探针 stepVis 依赖它。 */
.tl-wizard { max-width: 640px; margin: 0 auto; }
.tl-wz-card { background: #fff; border: 1px solid #e5eaf0; border-radius: 12px; padding: 16px; margin-top: 12px; }
.tl-wz-card.wz-head-card { margin-top: 0; }
.tl-wizard-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 13px; }
.tl-wizard-head a { color: #2f80ed; }
.tl-wizard-head .step-no { color: #9aa8b6; }
.tl-steps { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.tl-steps .dot { font-size: 12px; color: #c3ccd6; }
.tl-steps .dot.on { color: #2f80ed; }
.tl-steps .bar { flex: 1; height: 2px; background: #e5eaf0; }
.tl-steps .bar.on { background: #2f80ed; }
.tl-step-labels { display: flex; justify-content: space-between; font-size: 11.5px; color: #9aa8b6; margin-bottom: 0; }
.tl-step-labels span { width: 25%; text-align: center; }
.tl-step-labels span.on { color: #2f80ed; font-weight: 700; }

.tl-step { display: none; }
.tl-step.active { display: block; }

/* 步骤内分组（竖条标题，同列表页 .tl-sec-title 语言） */
.pub-grp { display: flex; flex-direction: column; gap: 14px; }
.pub-grp-t {
    font-size: 14px; font-weight: 700; color: #2c3e50; line-height: 1.3;
    padding-left: 9px; border-left: 3px solid #2f80ed;
}
/* 第 1 步选类型三组（证书合作/业绩展示/求职招聘）：组间留白；业绩单卡全宽 */
.tl-step .pub-grp + .pub-grp { margin-top: 16px; }
.tl-type-cards.single { grid-template-columns: 1fr; }
/* 业绩流程分节卡在白卡内容器内：改浅灰底形成层次，叙事卡恢复白底 */
.tl-wz-card .wz-sec { background: #f8fafc; }
.tl-wz-card .wz-sec .wz-story { background: #fff; }
.wz-sec .wz-sec-t { padding-left: 9px; border-left: 3px solid #2f80ed; }

.tl-type-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tl-type-card {
    border: 1.5px solid #e5eaf0; border-radius: 10px; padding: 18px 14px;
    text-align: center; cursor: pointer; background: #fff;
}
.tl-type-card:hover { border-color: #a9c9f2; }
.tl-type-card.on { border-color: #2f80ed; background: #eaf2fd; }
.tl-type-card .t { font-size: 15px; font-weight: 700; color: #2c3e50; margin-bottom: 6px; }
.tl-type-card .d { font-size: 12px; color: #9aa8b6; line-height: 1.5; }
/* 权限自适应（2026-10-12）：能力标注 + 锁定态 */
.tl-type-card .card-cap { display: inline-block; margin-left: 2px; font-size: 11px; }
.tl-type-card .card-cap.have { color: #27ae60; }
.tl-type-card .card-cap.lack { color: #b08b57; }
.tl-type-card.locked { opacity: .62; background: #f7f8fa; cursor: not-allowed; }
.tl-type-card.locked .t::after { content: ' 🔒'; font-size: 12px; }
.tl-type-card.locked:hover { border-color: #e5eaf0; }
.tip .cap-upgrade { color: #2f80ed; font-weight: 600; text-decoration: underline; }

.tl-form { display: flex; flex-direction: column; gap: 14px; }
.tl-form label { display: block; }
.tl-form .lb { display: block; font-size: 13px; color: #4a6785; margin-bottom: 5px; }
.tl-form .lb em { color: #d9534f; font-style: normal; }
.tl-form .lb .cnt { float: right; color: #9aa8b6; font-size: 12px; }
.tl-form input[type="text"], .tl-form textarea, .tl-form select {
    width: 100%; padding: 9px 12px; border: 1px solid #d7dee6; border-radius: 8px;
    font-size: 14px; outline: none; box-sizing: border-box; background: #fff;
}
.tl-form input:focus, .tl-form textarea:focus, .tl-form select:focus { border-color: #2f80ed; }
.tl-form textarea { resize: vertical; min-height: 110px; }

/* 项目叙事三节卡（20261012：卡片化+序号徽标+字数计数+聚焦反馈，对齐详情页三节叙事视觉） */
.wz-story {
    background: #f8fafc; border: 1px solid #e5eaf0; border-left: 3px solid #d7dee6;
    border-radius: 10px; padding: 12px 14px; transition: border-color .2s, background .2s, box-shadow .2s;
}
.wz-story + .wz-story { margin-top: 10px; }
.wz-story:focus-within {
    border-left-color: #2f80ed; background: #fff;
    box-shadow: 0 2px 10px rgba(47, 128, 237, .08);
}
.wz-story-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wz-story-no {
    flex: none; width: 20px; height: 20px; border-radius: 6px;
    background: #eaf2fd; color: #2f80ed; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.wz-story:focus-within .wz-story-no { background: #2f80ed; color: #fff; }
.wz-story-t { font-size: 13px; font-weight: 600; color: #2c3e50; }
.wz-story-hd .cnt { margin-left: auto; color: #9aa8b6; font-size: 12px; }
.wz-story textarea {
    min-height: 88px; line-height: 1.7; border-color: #e1e7ee;
    transition: border-color .2s, box-shadow .2s;
}
.wz-story textarea:focus { border-color: #2f80ed; box-shadow: 0 0 0 3px rgba(47, 128, 237, .1); }
.tl-form-row { display: flex; gap: 10px; }
.tl-form-row label { flex: 1; min-width: 0; }
.tl-form .tip { font-size: 12px; color: #9aa8b6; margin-top: 4px; }

.tl-agree { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #4a6785; line-height: 1.6; }
.tl-agree input { margin-top: 3px; }
.tl-agree a { color: #2f80ed; }

.tl-preview { border: 1px solid #e5eaf0; border-radius: 10px; padding: 14px; background: #f7f9fb; }
.tl-preview h4 { margin: 0 0 8px; font-size: 15px; color: #2c3e50; }
.tl-preview .m { font-size: 12.5px; color: #7b8a99; line-height: 1.7; }
.tl-preview .c { font-size: 13px; color: #4a6785; line-height: 1.7; margin-top: 8px; white-space: pre-wrap; word-break: break-word; }

.tl-wizard-foot { display: flex; gap: 10px; }
.tl-wizard-foot .tl-btn { flex: 1; padding: 12px 0; font-size: 15px; }
.tl-wizard-foot .tl-btn.ghost { flex: 0 0 30%; }
.tl-success { text-align: center; padding: 46px 16px 40px; }

/* 成功徽章：渐变圆 + 白对勾，外圈呼吸光晕 */
.tl-success .ok-badge {
    width: 74px; height: 74px; margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px rgba(39, 174, 96, .32);
    position: relative;
    animation: tl-ok-pop .45s cubic-bezier(.18, .89, .32, 1.28) both;
}
.tl-success .ok-badge svg { width: 38px; height: 38px; }
.tl-success .ok-badge::after {
    content: ""; position: absolute; inset: -9px;
    border-radius: 50%; border: 2px solid rgba(39, 174, 96, .28);
    animation: tl-ok-ring 2.2s ease-out infinite;
}
@keyframes tl-ok-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes tl-ok-ring { 0% { transform: scale(.85); opacity: 1; } 70%, 100% { transform: scale(1.28); opacity: 0; } }

.tl-success h3 { color: #1f9d55; font-size: 21px; font-weight: 700; margin: 18px 0 6px; letter-spacing: 1px; }
.tl-success p { color: #7b8a99; font-size: 13.5px; margin: 6px auto 22px; max-width: 420px; line-height: 1.7; }
.tl-success .links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* 成功态按钮：主=实心绿（与成功语义呼应），次=白底绿描边 */
.tl-success .tl-btn.ok { background: linear-gradient(135deg, #2ecc71, #27ae60); padding: 11px 30px; box-shadow: 0 4px 12px rgba(39, 174, 96, .28); }
.tl-success .tl-btn.ok:hover { background: linear-gradient(135deg, #29b765, #219d52); box-shadow: 0 6px 16px rgba(39, 174, 96, .36); }
.tl-success .tl-btn.ok-ghost { background: #fff; color: #27ae60; border: 1px solid #bfe6cf; padding: 10px 28px; }
.tl-success .tl-btn.ok-ghost:hover { color: #1f9d55; border-color: #27ae60; background: #f2fbf6; }

@media (prefers-reduced-motion: reduce) {
    .tl-success .ok-badge, .tl-success .ok-badge::after { animation: none; }
}

.tl-toast {
    position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
    background: rgba(44, 62, 80, .92); color: #fff; font-size: 13.5px;
    padding: 10px 20px; border-radius: 8px; z-index: 99; max-width: 86vw;
    display: none;
}
.tl-toast.err { background: rgba(217, 83, 79, .95); }

/* ---------- C4 · 业绩列表卡（触点1：封面 images[0]+D1 兜底+亮点小字） ---------- */
.tl-ach-card { padding: 0; overflow: hidden; }
.tl-ach-cover {
    position: relative; display: block; height: 150px; overflow: hidden;
    background: linear-gradient(135deg, #2f80ed 0%, #1b5cb8 100%); /* D1 无图兜底：主题色深渐变 */
}
.tl-ach-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-ach-cover .ph-icon {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 46px; color: rgba(255,255,255,.35); font-style: normal;
}
.tl-ach-cover .cover-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; }
.tl-ach-cover .cover-badges .tl-badge { box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.tl-ach-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.tl-ach-hl { font-size: 12.5px; color: #2f80ed; font-weight: 700; }

/* ---------- C4 · 业绩详情六幕（展馆动线，方案 v2.1 §二/§五） ---------- */
.tl-ach-banner { /* 状态横幅（本人+非在架，D8：横幅内编辑入口） */
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; line-height: 1.6;
}
.tl-ach-banner.pending { background: #fdf6ec; color: #b8860b; border: 1px solid #f0ddb8; }
.tl-ach-banner.rejected { background: #fdf0ef; color: #c0392b; border: 1px solid #f2cfc7; }
.tl-ach-banner.offline { background: #f2f4f7; color: #7b8a99; border: 1px solid #e0e6ed; }
.tl-ach-banner .tl-btn { padding: 5px 16px; font-size: 12.5px; flex-shrink: 0; }

.tl-hero {
    position: relative; height: 42vh; min-height: 320px; border-radius: 12px; overflow: hidden;
    margin-bottom: 18px; background: linear-gradient(135deg, #2f80ed 0%, #1b5cb8 100%);
}
@media (max-width: 767px) { .tl-hero { height: 36vh; min-height: 240px; border-radius: 0; margin: 0 -16px 14px; } }
.tl-hero > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-hero .hero-ph {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 72px; color: rgba(255,255,255,.28); font-style: normal;
}
.tl-hero .hero-shade { /* 底部向上遮罩，白字压图可读 */
    position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.15) 45%, transparent 70%);
}
.tl-hero .hero-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; color: #fff; }
.tl-hero .hero-title { font-size: 26px; font-weight: 800; line-height: 1.35; margin: 0 0 10px; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
@media (max-width: 767px) { .tl-hero .hero-title { font-size: 20px; } }
.tl-hero .hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tl-hero .hero-chip {
    padding: 3px 12px; border: 1px solid rgba(255,255,255,.75); border-radius: 999px;
    font-size: 12px; color: #fff; background: rgba(0,0,0,.18);
}
.tl-hero .hero-chip.gold { border-color: #f5c542; color: #ffe9a8; background: rgba(120,84,10,.35); }
.tl-hero .hero-user { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(255,255,255,.92); flex-wrap: wrap; }
.tl-hero .hero-user img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.tl-hero .hero-user a { color: #ffe9a8; text-decoration: none; }

.tl-act { margin-bottom: 30px; }
.tl-act-title { font-size: 17px; font-weight: 800; color: #2c3e50; margin: 0 0 14px; padding-left: 10px; border-left: 4px solid #2f80ed; line-height: 1.3; }

/* 第二幕：数字亮点带 */
.tl-hl-band { display: flex; justify-content: space-around; text-align: center; padding: 22px 10px; background: #fff; border: 1px solid #eef2f7; border-radius: 12px; }
.tl-hl-band .hl-v { font-size: 32px; font-weight: 800; color: #2f80ed; line-height: 1.2; word-break: break-all; }
.tl-hl-band .hl-l { font-size: 13px; color: #8a99a8; margin-top: 4px; }

/* 第三幕：叙事三节（左竖条节标题） */
.tl-story-sec { margin-bottom: 18px; }
.tl-story-sec:last-child { margin-bottom: 0; }
.tl-story-sec h4 { font-size: 15px; font-weight: 700; color: #2c3e50; margin: 0 0 6px; padding-left: 10px; border-left: 3px solid #2f80ed; line-height: 1.4; }
.tl-story-sec p { font-size: 15px; color: #4a6785; line-height: 1.8; margin: 0; white-space: pre-wrap; word-break: break-word; }

/* 第四幕：★时间历程墙★（垂直轴 D17） */
.tl-timeline { position: relative; padding-left: 86px; }
.tl-timeline::before { content: ''; position: absolute; left: 74px; top: 6px; bottom: 6px; width: 2px; background: #dbe4ee; }
.tl-tl-item { position: relative; margin-bottom: 26px; }
.tl-tl-item:last-child { margin-bottom: 0; }
.tl-tl-ym {
    position: absolute; left: -86px; top: 0; width: 60px; text-align: center;
    font-size: 12.5px; font-weight: 800; color: #2f80ed; background: #eaf2fd;
    border-radius: 6px; padding: 3px 0; line-height: 1.4;
}
.tl-tl-dot { position: absolute; left: -16px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #2f80ed; box-shadow: 0 0 0 3px #eaf2fd; }
.tl-tl-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 8px; cursor: zoom-in; }
.tl-tl-item p { font-size: 14px; color: #4a6785; line-height: 1.7; margin: 0; }
@media (max-width: 767px) { .tl-timeline { padding-left: 74px; } .tl-timeline::before { left: 62px; } .tl-tl-ym { left: -74px; width: 52px; font-size: 12px; } .tl-tl-dot { left: -16px; } }

/* 第五幕：项目图集（横向 scroll-snap 大图带，非九宫格） */
.tl-gallery { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.tl-gallery img {
    flex: 0 0 auto; width: min(420px, 78vw); aspect-ratio: 16/9; object-fit: cover;
    border-radius: 10px; scroll-snap-align: start; cursor: zoom-in; background: #f2f5f8;
}

/* lightbox（图集/节点图共用） */
.tl-lightbox { position: fixed; inset: 0; background: rgba(10,16,24,.88); z-index: 200; display: none; align-items: center; justify-content: center; cursor: zoom-out; }
.tl-lightbox.on { display: flex; }
.tl-lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 6px; }

/* 第六幕：延伸（迷你卡 + 出口 + 底部小字） */
.tl-more-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 767px) { .tl-more-row { grid-template-columns: repeat(2, 1fr); } }
.tl-ach-mini { background: #fff; border: 1px solid #e5eaf0; border-radius: 10px; overflow: hidden; text-decoration: none; display: block; }
.tl-ach-mini .mv { height: 84px; background: linear-gradient(135deg, #2f80ed 0%, #1b5cb8 100%); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.4); font-size: 26px; font-style: normal; }
.tl-ach-mini .mv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-ach-mini p { font-size: 12.5px; color: #2c3e50; font-weight: 600; line-height: 1.45; margin: 8px 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-ach-foot { margin-top: 22px; padding-top: 12px; border-top: 1px dashed #e0e6ed; font-size: 12px; color: #9aa8b6; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.tl-ach-foot a, .tl-ach-foot .lnk { color: #9aa8b6; cursor: pointer; text-decoration: underline; }
.tl-ach-exit { display: flex; gap: 12px; margin-top: 20px; }
.tl-ach-exit .tl-btn { flex: 1; text-align: center; padding: 11px 0; }

/* ---------- C4 · 发布向导（业绩分支：分节引导卡 + 时间线编辑器） ---------- */
.tl-type-card.ach .t::after { content: '新'; font-size: 10px; color: #fff; background: #e67e22; border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 2px; }
.wz-guide-link { font-size: 12.5px; color: #2f80ed; cursor: pointer; }
.wz-sec { background: #fff; border: 1px solid #e5eaf0; border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.wz-sec .wz-sec-t { font-size: 14px; font-weight: 700; color: #2c3e50; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.wz-sec .wz-sec-t em { font-style: normal; font-size: 12px; color: #9aa8b6; font-weight: 400; }
.wz-hl-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.wz-hl-row input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #d7dee6; border-radius: 8px; font-size: 13.5px; }
.wz-hl-row .del { color: #c0392b; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 6px; }
.wz-add { display: inline-block; padding: 7px 18px; border: 1px dashed #2f80ed; color: #2f80ed; border-radius: 8px; font-size: 13px; cursor: pointer; background: #f7fafd; }
.wz-tl-node { border: 1px solid #e5eaf0; border-radius: 10px; padding: 12px; margin-bottom: 10px; background: #fbfcfe; }
.wz-tl-node .row1 { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.wz-tl-node .row1 .del { color: #c0392b; cursor: pointer; font-size: 18px; margin-left: auto; }
.wz-tl-node textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #d7dee6; border-radius: 8px; font-size: 13.5px; resize: vertical; min-height: 56px; }
.wz-tl-node .img-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.wz-tl-node .img-row img { width: 132px; height: 74px; object-fit: cover; border-radius: 6px; border: 1px solid #e5eaf0; }
.wz-tl-node .img-row .up-btn { padding: 6px 14px; border: 1px solid #d7dee6; border-radius: 8px; font-size: 12.5px; cursor: pointer; background: #fff; }
.wz-tl-node .img-row .ok { font-size: 12px; color: #27ae60; }
.wz-tl-node .warn { font-size: 12px; color: #e67e22; }
.wz-imgs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.wz-imgs .wz-img { position: relative; width: 132px; }
.wz-imgs .wz-img img { width: 132px; height: 84px; object-fit: cover; border-radius: 6px; border: 1px solid #e5eaf0; display: block; }
.wz-imgs .wz-img .rm { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: rgba(44,62,80,.85); color: #fff; border: none; font-size: 13px; cursor: pointer; line-height: 1; }
.wz-imgs .cnt { font-size: 12px; color: #9aa8b6; }

/* 步4 图集上传卡 + 缩略图美化（20261012） */
.wz-up-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 22px 14px; border: 1.5px dashed #b9cce3; border-radius: 10px;
    background: #f8fbfe; cursor: pointer; text-align: center;
    transition: border-color .2s, background .2s;
}
.wz-up-card:hover, .wz-up-card.drag { border-color: #2f80ed; background: #eef5fd; }
.wz-up-card.drag { box-shadow: inset 0 0 0 1px #2f80ed; }
.wz-up-card .wz-up-ico { color: #7fa8d9; transition: color .2s; }
.wz-up-card:hover .wz-up-ico, .wz-up-card.drag .wz-up-ico { color: #2f80ed; }
.wz-up-t { font-size: 13.5px; font-weight: 600; color: #4a6785; }
.wz-up-d { font-size: 12px; color: #9aa8b6; }
.wz-imgs .wz-img { width: 150px; }
.wz-imgs .wz-img img {
    width: 150px; height: 100px; object-fit: cover; border-radius: 8px;
    border: 1px solid #e5eaf0; display: block; transition: box-shadow .2s;
}
.wz-imgs .wz-img img:hover { box-shadow: 0 3px 10px rgba(44, 62, 80, .16); }
.wz-imgs .wz-img .cover-badge {
    position: absolute; left: 6px; top: 6px; padding: 2px 8px;
    background: rgba(214, 158, 46, .95); color: #fff; font-size: 11px; font-weight: 600;
    border-radius: 6px; pointer-events: none;
}
.wz-imgs .wz-img .rm { transition: background .15s; }
.wz-imgs .wz-img .rm:hover { background: #c0392b; }
#wz-imgs-cnt { margin-top: 8px; font-size: 12px; color: #9aa8b6; }

/* ===== 年月选择器（Ym 组件，替代原生 type=month，2026-10-11） ===== */
.ym-field { position: relative; width: 100%; }
.ym-field .ym-btn {
    display: flex; align-items: center; gap: 7px; width: 100%;
    padding: 9px 12px; border: 1px solid #d7dee6; border-radius: 8px;
    font-size: 14px; color: #9aa8b6; background: #fff; cursor: pointer; box-sizing: border-box;
    transition: border-color .15s; font-family: inherit;
}
.ym-field .ym-btn:hover { border-color: #b9c7d4; }
.ym-field .ym-btn.filled { color: #2c3e50; }
.ym-field.open .ym-btn, .ym-field .ym-btn:focus { border-color: #2f80ed; outline: none; }
.ym-field .ym-ico { flex: none; color: #7b8a99; }
.ym-field .ym-btn.filled .ym-ico { color: #2f80ed; }
.ym-field .ym-text { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; }
.ym-field .ym-caret { flex: none; font-size: 11px; color: #9aa8b6; transition: transform .15s; }
.ym-field.open .ym-caret { transform: rotate(180deg); }
.ym-pop {
    display: none; /* 默认隐藏，仅 .open 时展示（弹层常驻 DOM） */
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    width: 264px; max-width: calc(100vw - 48px); padding: 10px;
    background: #fff; border: 1px solid #dfe6ee; border-radius: 10px;
    box-shadow: 0 8px 28px rgba(44, 62, 80, .14);
}
.ym-field.open .ym-pop { display: block; }
.ym-field.anchor-right .ym-pop { left: auto; right: 0; }
.ym-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ym-head .ym-year { font-size: 13.5px; font-weight: 600; color: #2c3e50; }
.ym-nav {
    width: 26px; height: 26px; border: 1px solid #d7dee6; border-radius: 7px;
    background: #fff; color: #4a6785; font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
}
.ym-nav:hover { border-color: #2f80ed; color: #2f80ed; }
.ym-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.ym-m {
    padding: 7px 0; border: 1px solid #e5eaf0; border-radius: 7px;
    background: #fff; color: #4a6785; font-size: 12.5px; cursor: pointer;
}
.ym-m:hover { border-color: #2f80ed; color: #2f80ed; background: #f2f8ff; }
.ym-m.sel { background: #2f80ed; border-color: #2f80ed; color: #fff; font-weight: 600; }
.ym-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.ym-act {
    padding: 4px 12px; border: 1px solid #d7dee6; border-radius: 7px;
    background: #fff; color: #4a6785; font-size: 12px; cursor: pointer;
}
.ym-act:hover { border-color: #2f80ed; color: #2f80ed; }
/* 时间线节点内的紧凑尺寸 */
.wz-tl-node .row1 .ym-field { width: 150px; flex: none; }
.wz-tl-node .row1 .ym-btn { padding: 7px 10px; font-size: 13.5px; }

/* ========================= 阶段三 · 个人简历（.tr- 前缀） ========================= */
/* 头卡 Hero（遮罩式；底图=本人最新业绩封面，无图渐变兜底） */
.tr-hero { position: relative; border-radius: 14px; overflow: hidden; min-height: 150px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 20px;
  background: linear-gradient(135deg, #2f80ed 0%, #1a5fb4 100%); color: #fff; margin-bottom: 12px; }
.tr-hero .tr-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tr-hero .hero-shade { position: absolute; inset: 0; background: rgba(17, 24, 39, .55); }
.tr-hero.plain { background: linear-gradient(135deg, #2f80ed 0%, #1a5fb4 100%); }
.tr-hero > *:not(.tr-hero-bg):not(.hero-shade) { position: relative; }
.tr-hero-user { display: flex; align-items: center; gap: 14px; }
.tr-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.75); background: #fff; }
.tr-nick { font-size: 19px; font-weight: 600; }
.tr-headline { font-size: 14px; opacity: .92; margin-top: 2px; min-height: 18px; }
.tr-hero-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; opacity: .95; }
.tr-contact-line { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: #445;
  background: #f4f7fb; border: 1px solid #e3eaf3; border-radius: 10px; padding: 10px 16px; margin-bottom: 12px; }
/* 证书 chip 网格 */
.tr-certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.tr-cert { background: #f8fafd; border: 1px solid #e3eaf3; border-left: 3px solid #2f80ed;
  border-radius: 10px; padding: 10px 13px; }
.tr-cert.hidden { opacity: .5; border-left-color: #b9c4d2; }
.tr-cert-name { font-size: 14px; font-weight: 500; color: #223; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tr-cert-level { font-size: 12.5px; color: #5a6b80; margin-top: 3px; }
.tr-cert-year { font-size: 12px; color: #9aa8b6; margin-top: 2px; }
.tr-cert-flag { font-size: 11px; padding: 1px 7px; border-radius: 20px; background: #e6f1fb; color: #185fa5; font-weight: 400; }
.tr-cert-flag.gold { background: #faf3e0; color: #8a6d1a; }
.tr-intro { white-space: pre-wrap; line-height: 1.8; color: #334; font-size: 14.5px; margin: 0; }
.tr-empty-tip { background: #f8fafd; border: 1px dashed #cdd8e5; border-radius: 10px; padding: 16px 18px; color: #5a6b80; font-size: 13.5px; }
/* 编辑页 */
.tre-sec { margin-top: 22px; }
.tre-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.tre-vis { display: flex; gap: 8px; flex-wrap: wrap; }
.tre-vis-item { display: flex; align-items: center; gap: 5px; font-size: 13.5px; color: #334;
  border: 1px solid #dfe7f1; border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.tre-vis-item:has(input:checked) { border-color: #2f80ed; color: #2f80ed; background: #f0f6fe; }
.tre-cert-add { display: grid; grid-template-columns: 1.4fr 1fr 100px 1.4fr auto auto; gap: 8px; margin-top: 12px; }
.tre-cert-add input { border: 1px solid #dfe7f1; border-radius: 8px; padding: 8px 11px; font-size: 13.5px; }
.tre-actions { margin-top: 24px; display: flex; gap: 12px; align-items: center; }
@media (max-width: 767px) {
  .tre-row2 { grid-template-columns: 1fr; }
  .tre-cert-add { grid-template-columns: 1fr 1fr; }
  .tr-hero { padding: 16px; min-height: 120px; }
}
/* 简历入口链接（卡内作者行；与卡文字同字号，主题蓝弱化）；
   列表卡场景为 span（卡主体是 <a> 禁嵌套锚点），需要 cursor 指针态 */
.tr-link { color: #2f80ed; text-decoration: none; cursor: pointer; }
.tr-link:hover { text-decoration: underline; }
/* 阶段四：简历页「在售信息」管理入口（标题行小链接） */
.tr-onsale-manage { font-size: 12px; font-weight: normal; color: #2f80ed; text-decoration: none; margin-left: 10px; }
.tr-onsale-manage:hover { text-decoration: underline; }