/* ============================================================
   铭望咨询 · 视觉升级覆盖层 2026
   设计原则：在既有页面结构不变的前提下，
   提升专业度 / 美观度 / 流畅度（更丝滑），去除累赘，强化“AI 战略引擎”气质。
   ============================================================ */
:root{
  --mw-grad: linear-gradient(120deg,#2f6fed 0%,#7c5cfc 55%,#00b3a4 100%);
  --mw-sh-lg: 0 14px 38px rgba(16,24,40,.12), 0 4px 12px rgba(16,24,40,.06);
  --mw-radius: 14px;
  --mw-line: #e9edf4;
}
/* 全局过渡，更丝滑 */
.main .card,
.main .kpi-card,
.main .btn,
.main .navitem,
.main select,
.main input,
.main textarea{
  transition: box-shadow .2s ease, transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
/* 卡片悬浮轻微抬升，强化层次感（不影响布局） */
.main .card:hover{ box-shadow: var(--mw-sh-lg); }
.main .kpi-card:hover{ box-shadow: var(--mw-sh-lg); }
/* 输入框聚焦高亮，专业且顺手 */
.main input:focus, .main select:focus, .main textarea:focus{
  outline:none; border-color:#2f6fed;
  box-shadow:0 0 0 3px rgba(47,111,237,.14);
}
/* 按钮：更挺拔的层次 */
.main .btn{ border-radius:10px; font-weight:600; letter-spacing:.2px; }
.main .btn.primary{ background:var(--mw-grad); border-color:transparent; color:#fff; }
.main .btn.primary:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(47,111,237,.28); }
.main .btn:not(.primary):hover{ border-color:#c7d2e6; background:#f6f8fc; }
/* 导航激活态：左侧光带 + 浅蓝底 */
.main .navitem.l3.active{
  color:#2f6fed; background:linear-gradient(90deg,rgba(47,111,237,.10),rgba(47,111,237,.02));
  font-weight:700;
}
.main .navitem.l3.active .navdot{ background:var(--mw-grad); }
/* 智能体分组高亮 */
.main .nav-h1.agent > svg{ color:#7c5cfc; }
.main .nav-h1.agent{ background:linear-gradient(90deg,rgba(124,92,252,.10),transparent); border-radius:10px; }

/* 滚动条美化 */
.main ::-webkit-scrollbar{ width:10px; height:10px; }
.main ::-webkit-scrollbar-thumb{ background:#cdd6e6; border-radius:8px; border:2px solid transparent; background-clip:content-box; }
.main ::-webkit-scrollbar-thumb:hover{ background:#b3c0d8; background-clip:content-box; }

/* ---------- 页面头部（page-head） ---------- */
.main .page-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:4px 2px 18px; margin-bottom:4px;
  border-bottom:1px solid var(--mw-line);
}
.main .ph-title{ display:flex; align-items:center; gap:10px; font-size:21px; font-weight:800; color:#15203a; margin:0; letter-spacing:.3px; }
.main .ph-ico{
  width:38px; height:38px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; background:var(--mw-grad); box-shadow:0 6px 16px rgba(47,111,237,.28);
}
.main .ph-sub{ color:#6b7787; font-size:13px; margin-top:7px; line-height:1.6; }
.main .ph-actions{ display:flex; gap:10px; align-items:center; flex-shrink:0; }

/* ---------- 招聘中枢：环形评分 ---------- */
.main .rec-ring{ position:relative; width:128px; height:128px; flex:0 0 128px; }
.main .rec-ring svg{ transform:rotate(-90deg); }
.main .rec-ring-bg{ fill:none; stroke:#eef1f7; stroke-width:10; }
.main .rec-ring-fg{ fill:none; stroke-width:10; stroke-linecap:round; transition:stroke-dasharray .7s cubic-bezier(.22,1,.36,1); }
.main .rec-ring-i{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.main .rec-ring-v{ font-size:34px; font-weight:800; color:#15203a; line-height:1; }
.main .rec-ring-l{ font-size:11.5px; color:#8a94a6; margin-top:4px; letter-spacing:.5px; }

/* ---------- 招聘中枢：评分卡 ---------- */
.main .rec-card{
  border:1px solid var(--mw-line); border-radius:16px; padding:20px; background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.05); animation:recIn .35s ease both;
}
@keyframes recIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
.main .rec-head{ display:flex; gap:20px; align-items:center; }
.main .rec-head-r{ flex:1; min-width:0; }
.main .rec-name{ font-size:17px; font-weight:800; color:#15203a; }
.main .rec-level{ display:inline-block; margin-top:6px; font-size:13px; font-weight:800; padding:3px 12px; border-radius:999px; }
.main .rec-level.lv-green{ color:#1fa971; background:rgba(31,169,113,.12); }
.main .rec-level.lv-blue{ color:#2f6fed; background:rgba(47,111,237,.12); }
.main .rec-level.lv-orange{ color:#e08a00; background:rgba(245,165,36,.16); }
.main .rec-level.lv-red{ color:#e8554d; background:rgba(232,85,77,.12); }
.main .rec-rec{ margin-top:8px; font-size:14px; font-weight:600; color:#243044; }
.main .rec-conf{ color:#8a94a6; font-weight:500; font-size:12.5px; margin-left:6px; }

.main .rec-dims{ margin:18px 0 6px; display:grid; gap:10px; }
.main .rec-dim{ display:grid; grid-template-columns:84px 1fr 38px; align-items:center; gap:10px; }
.main .rec-dim-l{ font-size:12.5px; color:#6b7787; }
.main .rec-dim-track{ height:9px; background:#eef1f7; border-radius:999px; overflow:hidden; }
.main .rec-dim-track > i{ display:block; height:100%; border-radius:999px; transition:width .6s ease; }
.main .rec-dim-v{ font-size:13px; font-weight:800; text-align:right; }

.main .rec-cols{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:16px; }
.main .rec-col-h{ font-size:13px; font-weight:700; color:#33405a; margin-bottom:8px; }
.main .chips{ display:flex; flex-wrap:wrap; gap:7px; }
.main .chip{ font-size:12px; padding:3px 10px; border-radius:8px; font-weight:600; }
.main .chip.ok{ color:#1fa971; background:rgba(31,169,113,.12); }
.main .chip.bad{ color:#e8554d; background:rgba(232,85,77,.10); }
.main .chip.muted{ color:#9aa5b5; background:#f1f4f9; }
.main .rec-ul{ list-style:none; padding:0; margin:0; display:grid; gap:7px; }
.main .rec-ul li{ font-size:12.5px; color:#44506a; padding-left:16px; position:relative; line-height:1.5; }
.main .rec-ul.ok li::before{ content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:#1fa971; }
.main .rec-ul.warn li::before{ content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:#f5a524; }
.main .rec-ul.bad li::before{ content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:#e8554d; }
.main .rec-ul li.muted{ color:#9aa5b5; }
.main .badge{ display:inline-block; font-size:12px; font-weight:700; padding:3px 11px; border-radius:999px; }
.main .badge.ok{ color:#1fa971; background:rgba(31,169,113,.12); }
.main .badge.bad{ color:#e8554d; background:rgba(232,85,77,.12); }
.main .rf{ font-size:12.5px; color:#44506a; line-height:1.5; }
.main .rf b{ color:#33405a; }
.main .rf-high, .rf-高{ color:#e8554d; }
.main .rf-中{ color:#e08a00; }
.main .rf-低{ color:#7b8696; }
.main .rf-none{ color:#1fa971; }
.main .rec-summary{ margin-top:16px; padding:12px 14px; background:#f7f9fc; border-left:3px solid #2f6fed; border-radius:8px; font-size:12.5px; color:#44506a; line-height:1.6; }

/* 候选人体验体检 */
.main .rec-exp-tip{ font-size:13px; line-height:1.6; padding:12px 14px; border-radius:10px; }
.main .rec-exp-tip.warn{ color:#9a5b00; background:rgba(245,165,36,.12); border:1px solid rgba(245,165,36,.3); }
.main .rec-exp-tip.ok{ color:#1b7a52; background:rgba(31,169,113,.10); border:1px solid rgba(31,169,113,.25); }

/* 顶部加载条配色跟随品牌 */
#progress > i{ background:var(--mw-grad); }

/* 顶部 toast 增强 */
.main .toast{ border-radius:10px; font-weight:600; box-shadow:var(--mw-sh-lg); }

/* 响应式 */
@media (max-width: 900px){
  .main .rec-head{ flex-direction:column; align-items:flex-start; }
  .main .rec-cols{ grid-template-columns:1fr; }
  .main .rec-dim{ grid-template-columns:72px 1fr 34px; }
}

/* ---------- 人才赋能中心 ---------- */
.main .te-pillar{ padding:18px; }
.main .te-pillar-h{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:800; color:#1d293f; }
.main .te-ico{ width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; color:#fff; box-shadow:0 6px 14px rgba(47,111,237,.22); }
.main .te-pillar-b{ margin-top:14px; display:grid; gap:9px; }
.main .te-li{ display:flex; align-items:center; justify-content:space-between; font-size:13px; padding:7px 11px; background:#f7f9fc; border-radius:9px; }
.main .te-li span{ color:#6b7787; }
.main .te-li b{ color:#1d293f; font-weight:800; }
.main .te-sub{ font-size:12.5px; color:#44506a; margin-bottom:4px; }
.main .grid.c3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width: 900px){ .main .grid.c3{ grid-template-columns:1fr; } }

/* ================= 一体化数据决策舱 ================= */
.main .ck-linkage{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:#44506a; background:#f3f6fb; border:1px solid #e6ecf5; padding:7px 12px; border-radius:999px; }
.main .ck-linkage .dot{ width:8px; height:8px; border-radius:50%; background:#1fa971; box-shadow:0 0 0 3px rgba(31,169,113,.15); }

.main .ck-hero{ display:flex; gap:18px; align-items:center; padding:22px; border-radius:16px; margin-bottom:18px;
  background:linear-gradient(120deg,#1d293f 0%,#2b3a5c 55%,#34488a 100%); color:#fff; box-shadow:0 14px 34px rgba(29,41,63,.28); flex-wrap:wrap; }
.main .ck-gauge{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.main .ck-gauge-l{ font-size:13px; font-weight:700; color:#e8edf6; }
.main .ck-hero-overall{ margin-left:auto; display:flex; flex-direction:column; align-items:center; gap:10px; padding-left:18px; border-left:1px solid rgba(255,255,255,.16); }
.main .ck-hero-tip{ max-width:230px; font-size:12px; line-height:1.6; color:#b9c6dd; }

.main .ck-sec{ margin-bottom:16px; }
.main .ck-sec-head{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:800; color:#1d293f; margin-bottom:12px; }
.main .ck-sec-head .muted{ font-size:12.5px; font-weight:500; color:#8a93a6; }
.main .ck-sec-bar{ width:4px; height:16px; border-radius:3px; background:#1fa971; }

.main .ck-risk{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.main .ck-risk-cell{ --rc:#1fa971; background:#fff; border:1px solid #eef1f6; border-top:3px solid var(--rc); border-radius:12px; padding:13px 12px; box-shadow:0 4px 14px rgba(20,30,55,.05); }
.main .ck-risk-area{ font-size:12.5px; color:#44506a; font-weight:700; }
.main .ck-risk-val{ font-size:22px; font-weight:800; margin:5px 0 6px; }
.main .ck-risk-lv{ display:inline-block; font-size:11px; font-weight:800; color:#fff; padding:2px 8px; border-radius:999px; }
.main .ck-risk-note{ font-size:11.5px; color:#8a93a6; line-height:1.5; margin-top:6px; }

.main .ck-kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.main .ck-kpi{ background:#fff; border:1px solid #eef1f6; border-radius:12px; padding:14px 14px; box-shadow:0 4px 14px rgba(20,30,55,.05); }
.main .ck-kpi-l{ font-size:12px; color:#8a93a6; font-weight:600; }
.main .ck-kpi-v{ font-size:23px; font-weight:800; color:#1d293f; margin:6px 0 3px; line-height:1; }
.main .ck-kpi-u{ font-size:12px; font-weight:700; color:#8a93a6; margin-left:3px; }
.main .ck-kpi-s{ font-size:11.5px; color:#8a93a6; }

.main .ck-cost-detail{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.main .ck-cost-block{ background:#fff; border:1px solid #eef1f6; border-radius:12px; padding:14px; box-shadow:0 4px 14px rgba(20,30,55,.05); }
.main .ck-cost-h{ font-size:13px; font-weight:800; color:#1d293f; margin-bottom:11px; }
.main .ck-bar{ display:flex; height:18px; border-radius:9px; overflow:hidden; background:#f0f3f8; }
.main .ck-seg{ height:100%; }
.main .ck-struct{ margin-top:12px; display:grid; gap:6px; }
.main .ck-struct-row{ display:grid; grid-template-columns:90px 48px 1fr; gap:8px; font-size:12px; align-items:center; }
.main .ck-struct-name{ color:#44506a; font-weight:600; }
.main .ck-struct-pct{ color:#1d293f; font-weight:800; text-align:right; }
.main .ck-struct-val{ color:#8a93a6; text-align:right; }
.main .ck-trend{ display:flex; align-items:flex-end; gap:9px; height:150px; padding-top:8px; }
.main .ck-tbar{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; gap:6px; }
.main .ck-tbar-v{ width:62%; max-width:34px; border-radius:7px 7px 0 0; background:linear-gradient(180deg,#5b8bff,#2f6fed); box-shadow:0 4px 10px rgba(47,111,237,.25); transition:height .4s; }
.main .ck-tbar-l{ font-size:11px; color:#8a93a6; }

.main .ck-insights{ display:grid; gap:11px; }
.main .ck-ins{ --sc:#1fa971; background:#fff; border:1px solid #eef1f6; border-left:4px solid var(--sc); border-radius:12px; padding:13px 15px; box-shadow:0 4px 14px rgba(20,30,55,.05); }
.main .ck-ins-head{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:#1d293f; }
.main .ck-ins-head b{ font-weight:800; }
.main .ck-sev{ font-size:11px; font-weight:800; color:#fff; padding:2px 9px; border-radius:999px; }
.main .ck-ins-area{ font-size:11.5px; color:#8a93a6; font-weight:700; }
.main .ck-ins-detail{ font-size:12.5px; color:#5a667d; line-height:1.6; margin:7px 0 6px; }
.main .ck-ins-action{ font-size:12.5px; color:#44506a; line-height:1.6; background:#f7f9fc; border-radius:8px; padding:8px 11px; }
.main .ck-foot{ font-size:11.5px; color:#9aa3b2; line-height:1.7; margin-top:6px; padding:12px 2px; border-top:1px dashed #e6ecf5; }

@media (max-width: 1100px){ .main .ck-risk{ grid-template-columns:repeat(3,1fr); } .main .ck-kpis{ grid-template-columns:repeat(3,1fr); } .main .ck-cost-detail{ grid-template-columns:1fr; } }
@media (max-width: 700px){ .main .ck-risk{ grid-template-columns:repeat(2,1fr); } .main .ck-kpis{ grid-template-columns:repeat(2,1fr); } .main .ck-hero{ justify-content:center; } .main .ck-hero-overall{ margin-left:0; border-left:none; border-top:1px solid rgba(255,255,255,.16); padding-left:0; padding-top:12px; width:100%; } }
