/* ============================================================
   HireClarity 设计系统 · ToB 工作台
   参考：暖米色画布 + 纯白大圆角卡片 + 黑色主按钮 + 低饱和 pastel 徽章。

   前台/后台分离原则：
   界面只呈现 HR 需要决策的信息（是什么要求、硬不硬、能不能松、凭什么）。
   字段名、算子、置信度、权重、证据档属于后台逻辑，收进"技术视图"，默认不展示。
   ============================================================ */

:root {
  /* —— 暖米色画布：卡片靠底色对比成立，不靠重阴影 —— */
  --bg:            #f4f2ed;
  --surface:       #ffffff;
  --surface-2:     #f7f5f0;
  --sep:           rgba(52, 46, 34, .09);
  --sep-strong:    rgba(52, 46, 34, .18);

  --label:         #191712;
  --label-2:       rgba(52, 46, 34, .60);
  --label-3:       rgba(52, 46, 34, .38);

  /* —— 黑色主按钮（高级感来源）；靶蓝只做选中/链接/进度强调 —— */
  --ink:           #191712;
  --ink-hover:     #322e25;
  --ink-fg:        #ffffff;

  --tint:          #4f46e5;
  --tint-bg:       rgba(79, 70, 229, .08);
  --tint-line:     rgba(79, 70, 229, .28);

  /* —— pastel 实色徽章：低饱和底 + 深一档同色系字 —— */
  --warn:          #9a5b00;
  --warn-bg:       #f9edda;
  --danger:        #b3261e;
  --danger-bg:     #fbe9e5;
  --ok:            #196c43;
  --ok-bg:         #e2f2e6;

  /* —— 圆角：卡片大圆角是这套风格的签名 —— */
  --r-card:        18px;
  --r-ctl:         12px;
  --r-pill:        980px;

  /* —— 阴影：比原来更轻，卡片靠底色对比 —— */
  --shadow-card:   0 1px 2px rgba(28, 25, 18, .03), 0 10px 28px -18px rgba(28, 25, 18, .12);
  --shadow-modal:  0 24px 64px -16px rgba(28, 25, 18, .30);

  /* —— 间距：8 的倍数 —— */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;

  /* —— 字号 —— */
  --t-title1:  27px;
  --t-title2:  21px;
  --t-title3:  17px;
  --t-body:    15px;
  --t-sub:     13px;
  --t-cap:     12px;

  --ease:      cubic-bezier(.32, .72, 0, 1);
  --dur:       .28s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #16140f;
    --surface:   #201d17;
    --surface-2: #2a261f;
    --sep:       rgba(228, 220, 200, .12);
    --sep-strong:rgba(228, 220, 200, .22);
    --label:     #f4f2ed;
    --label-2:   rgba(238, 233, 220, .62);
    --label-3:   rgba(238, 233, 220, .36);
    --ink:       #f4f2ed;
    --ink-hover: #ffffff;
    --ink-fg:    #191712;
    --tint:      #8781f0;
    --tint-bg:   rgba(135, 129, 240, .16);
    --warn-bg:   rgba(255, 178, 66, .14);
    --danger-bg: rgba(255, 105, 92, .14);
    --ok-bg:     rgba(94, 210, 140, .14);
    --shadow-card: 0 1px 2px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--label);
  font: var(--t-body)/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "PingFang SC", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
input, textarea, button, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.is-hidden { display: none !important; }

/* 只给键盘用户显示焦点环 */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; border-radius: 4px; }

/* ============ 导航栏 ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: 52px; padding: 0 var(--s5);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--sep);
}
@media (prefers-color-scheme: dark) { .nav { background: rgba(28,28,30,.72); } }

.nav-title { font-size: var(--t-title3); font-weight: 600; }
.nav-right { display: flex; align-items: center; gap: var(--s2); }
.nav-ctx {
  font-size: var(--t-sub); color: var(--label-2);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 分段控件：iOS segmented control */
.seg {
  display: inline-flex; padding: 2px; gap: 2px;
  background: rgba(120,120,128,.12); border-radius: var(--r-ctl);
}
.seg-item {
  border: 0; background: transparent; cursor: pointer;
  padding: 5px 13px; border-radius: 8px;
  font-size: var(--t-sub); font-weight: 500; color: var(--label-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.seg-item:hover:not(:disabled):not(.on) { color: var(--label); }
.seg-item.on {
  background: var(--surface); color: var(--label);
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
}
.seg-item:disabled { opacity: .35; cursor: default; }

/* 图标按钮 */
.icon-btn {
  width: 32px; height: 32px; border-radius: var(--r-ctl);
  border: 0; background: transparent; cursor: pointer;
  color: var(--label-2); font-size: 15px;
  display: grid; place-items: center;
  transition: background var(--dur) var(--ease);
}
.icon-btn:hover { background: rgba(120,120,128,.12); color: var(--label); }

/* ============ 版心 ============ */
.page { max-width: 960px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s8); }
.page-narrow { max-width: 720px; }

.page-head { margin-bottom: var(--s6); }
.page-head h1 { font-size: var(--t-title1); line-height: 1.2; }
.page-head p { margin: var(--s2) 0 0; color: var(--label-2); font-size: var(--t-sub); }

.head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap;
}

/* ============ 按钮 ============ */
.btn {
  border: 0; cursor: pointer; border-radius: var(--r-ctl);
  padding: 11px 20px; font-size: var(--t-body); font-weight: 500;
  background: rgba(52, 46, 34, .07); color: var(--label);
  transition: transform .1s var(--ease), background var(--dur) var(--ease), opacity var(--dur);
  white-space: nowrap;
}
.btn:hover { background: rgba(52, 46, 34, .12); }
.btn:active { opacity: .82; }
.btn-primary { background: var(--ink); color: var(--ink-fg); }
.btn-primary:hover { background: var(--ink-hover); }
.btn-plain { background: transparent; color: var(--tint); padding: 8px 10px; }
.btn-plain:hover { background: var(--tint-bg); }
.btn-sm { padding: 7px 14px; font-size: var(--t-sub); }
.btn-lg { padding: 14px 28px; font-size: var(--t-title3); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn-block { width: 100%; }

/* ============ 卡片 / 分组列表 ============ */
.card {
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.card + .card { margin-top: var(--s4); }
.card-pad { padding: var(--s5); }

.group-title {
  font-size: var(--t-cap); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--label-3);
  margin: 0 0 var(--s2) var(--s1);
}
.group-note { margin: var(--s2) var(--s1) 0; font-size: var(--t-cap); color: var(--label-3); }

/* iOS 分组列表行 */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5); min-height: 44px;
  border-top: .5px solid var(--sep);
}
.row:first-child { border-top: 0; }
.row-tap { cursor: pointer; transition: background var(--dur) var(--ease); }
.row-tap:hover { background: var(--surface-2); }
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: var(--t-body); }
.row-sub { font-size: var(--t-sub); color: var(--label-2); margin-top: 1px; }
.row-value { font-size: var(--t-body); color: var(--label-2); flex: 0 0 auto; }
.row-chevron { color: var(--label-3); font-size: 13px; flex: 0 0 auto; transition: transform var(--dur) var(--ease); }
.row.open .row-chevron { transform: rotate(90deg); }
.rows:empty::after {
  content: "暂无"; display: block; padding: var(--s5);
  color: var(--label-3); font-size: var(--t-sub);
}

/* 行内展开区 */
.row-detail {
  padding: 0 var(--s5) var(--s4) var(--s5);
  font-size: var(--t-sub); color: var(--label-2); line-height: 1.6;
  animation: reveal var(--dur) var(--ease);
}
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ============ 徽标 ============ */
.tag {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px; border-radius: var(--r-pill);
  font-size: var(--t-cap); font-weight: 500; white-space: nowrap; flex: 0 0 auto;
  background: rgba(120,120,128,.12); color: var(--label-2);
}
.tag-tint   { background: var(--tint-bg);   color: var(--tint); }
.tag-warn   { background: var(--warn-bg);   color: var(--warn); }
.tag-danger { background: var(--danger-bg); color: var(--danger); }
.tag-ok     { background: var(--ok-bg);     color: var(--ok); }

/* ============ 输入 ============ */
.field { display: block; }
.field-label {
  display: block; font-size: var(--t-sub); color: var(--label-2);
  margin-bottom: var(--s2);
}
.input, .textarea {
  width: 100%; border: 0; border-radius: var(--r-ctl);
  background: var(--surface-2); color: var(--label);
  box-shadow: inset 0 0 0 1px var(--sep);
  padding: 12px 14px; transition: box-shadow var(--dur) var(--ease);
}
.textarea { min-height: 200px; resize: vertical; line-height: 1.65; }
.input::placeholder, .textarea::placeholder { color: var(--label-3); }
.input:focus, .textarea:focus { box-shadow: inset 0 0 0 2px var(--tint); }

.field-grid { display: grid; gap: var(--s3); }
.field-grid-2 { grid-template-columns: 1fr 1fr; }
.field-grid-3 { grid-template-columns: repeat(3, 1fr); }
.field-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* 双栏布局：提高一屏信息密度，窄屏自动堆叠 */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }

/* ============ 指标 ============ */
.stat-row { display: grid; gap: var(--s3); grid-template-columns: repeat(4, 1fr); }
.stat { background: var(--surface); border-radius: var(--r-card); padding: var(--s4) var(--s5);
        box-shadow: var(--shadow-card); }
.stat-val { font-size: 30px; font-weight: 650; letter-spacing: -.03em; line-height: 1.12; font-variant-numeric: tabular-nums; }
.stat-val-sm { font-size: 18px; white-space: nowrap; }
.stat-key { font-size: var(--t-cap); color: var(--label-3); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
/* KPI 卡彩色状态点：参考图2 的低饱和指示物 */
.stat-key::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tint); flex: 0 0 auto; }
.stat-warn .stat-key::before { background: var(--warn); }
.stat-danger .stat-key::before { background: var(--danger); }
.stat-warn .stat-val { color: var(--warn); }
.stat-danger .stat-val { color: var(--danger); }

/* 进度条 */
.bar { height: 4px; border-radius: var(--r-pill); background: rgba(120,120,128,.16);
       overflow: hidden; margin-top: var(--s2); }
.bar > i { display: block; height: 100%; width: 0; background: var(--tint);
           border-radius: var(--r-pill); transition: width .6s var(--ease); }

/* ============ 提示条 ============ */
.notes { display: flex; flex-direction: column; gap: var(--s2); }
.notes:empty { display: none; }
.note {
  display: flex; gap: var(--s3); align-items: baseline;
  padding: var(--s3) var(--s4); border-radius: var(--r-ctl);
  font-size: var(--t-sub); line-height: 1.55;
}
.note b { flex: 0 0 auto; font-weight: 600; }
.note-warn   { background: var(--warn-bg);   color: var(--warn); }
.note-danger { background: var(--danger-bg); color: var(--danger); }
.note-info   { background: var(--tint-bg);   color: var(--tint); }

/* ============ 选项（澄清用大按钮） ============ */
.choices { display: flex; flex-direction: column; gap: var(--s2); }
.choice {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; text-align: left; cursor: pointer;
  padding: var(--s4) var(--s5); border: 0; border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--shadow-card);
  font-size: var(--t-body);
  transition: transform .12s var(--ease), box-shadow var(--dur) var(--ease);
}
.choice:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 12px 28px -14px rgba(0,0,0,.16); }
.choice:active { background: var(--surface-2); }
.choice-dot {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--sep-strong);
  transition: box-shadow var(--dur) var(--ease);
}
.choice:hover .choice-dot { box-shadow: inset 0 0 0 6px var(--tint); }
/* 多选选中态：块高亮 + 实心圆点（等“确认所选”提交）*/
.choice-multi.on { background: var(--tint-bg); box-shadow: inset 0 0 0 1.5px var(--tint); }
.choice-multi.on .choice-dot { box-shadow: inset 0 0 0 6px var(--tint); }
.choice-multi .choice-dot { border-radius: 5px; }

/* ============ 弹层 ============ */
.sheet {
  border: 0; padding: 0; border-radius: var(--r-card);
  background: var(--surface); color: var(--label);
  box-shadow: var(--shadow-modal); width: min(420px, 92vw);
}
.sheet-wide { width: min(760px, 94vw); }
.sheet::backdrop { background: rgba(0,0,0,.32); backdrop-filter: blur(4px); }
.sheet-body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.sheet-head h3 { font-size: var(--t-title3); }
.sheet-actions { display: flex; justify-content: flex-end; gap: var(--s2); }

/* ============ 加载 ============ */
.mask {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(242,242,247,.7); backdrop-filter: blur(8px);
}
@media (prefers-color-scheme: dark) { .mask { background: rgba(0,0,0,.6); } }
.mask-box { text-align: center; color: var(--label-2); font-size: var(--t-sub); }
.spinner {
  width: 28px; height: 28px; margin: 0 auto var(--s3);
  border-radius: 50%;
  border: 2.5px solid rgba(120,120,128,.2); border-top-color: var(--tint);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ 响应式 ============ */
@media (max-width: 820px) {
  .page { padding: var(--s5) var(--s4) var(--s7); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .field-grid-2, .field-grid-3, .field-grid-4 { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .nav { padding: 0 var(--s4); }
  .nav-ctx { display: none; }
  .seg-item { padding: 5px 9px; }
}

/* ============ 岗位需求画像卡（参考简历评估卡的信息架构）============ */
.jp-card { padding: var(--s6); }

/* 抬头身份区：头像字 + 岗位名/层级 + 关键属性 + 右侧候选池 */
.jp-head { display: flex; align-items: flex-start; gap: var(--s4); }
.jp-badge {
  flex: 0 0 auto; width: 60px; height: 60px; border-radius: 20px;
  display: grid; place-items: center; font-size: 26px; font-weight: 650; color: var(--ink-fg);
  background: var(--ink);
  box-shadow: 0 10px 24px -12px rgba(28, 25, 18, .45);
}
.jp-id { flex: 1; min-width: 0; }
.jp-title { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.jp-role { font-size: var(--t-title2); font-weight: 600; letter-spacing: -.01em; }
.jp-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px;
  font-size: var(--t-sub); color: var(--label-2); }
.jp-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--label-3); }
.jp-pool {
  flex: 0 0 auto; text-align: right; padding-left: var(--s4);
  border-left: 1px solid var(--sep);
}
.jp-pool-lvl { display: block; font-size: var(--t-title3); font-weight: 600; }
.jp-pool-cap { font-size: var(--t-cap); color: var(--label-2); }
.jp-pool-warn .jp-pool-lvl { color: var(--warn); }
.jp-pool-danger .jp-pool-lvl { color: var(--danger); }
.jp-pool-ok .jp-pool-lvl { color: var(--ok); }

/* 主体：左词云 + 右结构化字段 */
.jp-body {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--s5) var(--s6);
  margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--sep);
}
.jp-cloud {
  display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start;
  gap: 10px 14px;
}
.kw { line-height: 1.15; color: var(--label-2); font-weight: 500; white-space: nowrap; }
.kw-1 { font-size: 13px; }
.kw-2 { font-size: 17px; color: var(--label); }
.kw-3 { font-size: 23px; }
.kw-must { color: var(--tint); font-weight: 600; }
.jp-empty { font-size: var(--t-sub); color: var(--label-3); }

/* 右侧结构化字段：图标 + 维度名 + chip 行 */
.jp-specs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); }
.spec { display: flex; gap: var(--s3); min-width: 0; }
.spec-icon {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; background: var(--tint-bg); color: var(--tint);
}
.spec-icon svg { width: 18px; height: 18px; }
.spec-main { min-width: 0; flex: 1; }
.spec-name { font-size: var(--t-cap); color: var(--label-3); display: flex; align-items: center; gap: 6px; }
.spec-must { color: var(--tint); font-weight: 600; }
.spec-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.spec-chip {
  font-size: var(--t-sub); padding: 3px 9px; border-radius: var(--r-pill); cursor: pointer;
  background: rgba(120,120,128,.12); color: var(--label);
  transition: background var(--dur) var(--ease);
}
.spec-chip:hover { background: var(--tint-bg); color: var(--tint); }
.spec-chip.must { background: var(--tint-bg); color: var(--tint); font-weight: 500; }
.spec-chip.exclude { background: var(--danger-bg); color: var(--danger); }

.jp-portrait {
  margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--sep);
  font-size: var(--t-sub); line-height: 1.75; color: var(--label);
}

/* 次要区：若干折叠 */
.jp-more { margin-top: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.fold-n { color: var(--label-3); font-weight: 400; }

/* 维度弹层里的图标 */
.dim-icon {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; background: var(--tint-bg); color: var(--tint);
}
.dim-icon svg { width: 19px; height: 19px; }

/* 条件行前的状态圆点 */
.crit .crit-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 7px; }
.dot-must { background: var(--tint); }
.dot-plus { background: transparent; box-shadow: inset 0 0 0 1.5px var(--label-3); }
.dot-excl { background: var(--danger); }
.crit.row-tap { align-items: flex-start; }

@media (max-width: 820px) {
  .jp-head { flex-wrap: wrap; }
  .jp-pool { border-left: 0; padding-left: 0; text-align: left; }
  .jp-specs { grid-template-columns: 1fr; }
}
/* 只有真正很窄（手机）才把词云与字段上下堆；否则保持左右并排 */
@media (max-width: 600px) {
  .jp-body { grid-template-columns: 1fr; gap: var(--s5); }
}

/* 顶部连接状态标识：示例模式 vs 已连模型 */
.live-badge { font-size: var(--t-cap); padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.live-badge.off { background: var(--warn-bg); color: var(--warn); }
.live-badge.on { background: var(--ok-bg); color: var(--ok); }

/* 画像页：结果区分节 + 面试评估卡 */
.jp-sec { margin-top: var(--s6); }
.itv-list { display: flex; flex-direction: column; gap: var(--s3); }
.itv-item {
  background: var(--surface); border: 1px solid var(--sep); border-radius: var(--r-card);
  padding: var(--s4) var(--s5);
}
.itv-q { font-size: var(--t-body); font-weight: 600; color: var(--label); margin-bottom: var(--s2); }
.itv-plan { font-size: var(--t-sub); color: var(--label-2); line-height: 1.6; }
.itv-plan-tag {
  display: inline-block; margin-right: var(--s2); padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--tint-bg); color: var(--tint); font-size: var(--t-cap); font-weight: 600;
  white-space: nowrap;
}

/* 面试项类型徽标：面试考察 vs 弱信号复核 */
.itv-kind { margin-left: var(--s2); padding: 1px 6px; border-radius: var(--r-pill); font-size: var(--t-cap); font-weight: 500; vertical-align: middle; white-space: nowrap; }
.itv-kind-interview { background: var(--surface-2); color: var(--label-2); }
.itv-kind-verify { background: var(--warn-bg); color: var(--warn); }

/* #4 基础信息缺口提示条 */
.base-gap { margin-bottom: var(--s5); padding: var(--s3) var(--s4); border-radius: var(--r-card);
  background: var(--warn-bg); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.base-gap-title { font-size: var(--t-sub); font-weight: 600; color: var(--warn); white-space: nowrap; }
.base-gap-list { font-size: var(--t-sub); color: var(--label-2); margin-left: var(--s2); }

/* #5 补充确认紧凑进度 */
.clarify-progress { margin-top: var(--s6); }
.cp-summary { font-size: var(--t-sub); color: var(--label-2); margin-bottom: var(--s2); }
.cp-fold { border: 1px solid var(--sep); border-radius: var(--r-card); }
.cp-fold summary { padding: var(--s3) var(--s4); font-size: var(--t-sub); cursor: pointer; color: var(--tint); }
.cp-body { padding: var(--s3) var(--s4); }
.cp-title { font-size: var(--t-cap); font-weight: 600; color: var(--label-2); margin: var(--s2) 0; }
.cp-group + .cp-group { margin-top: var(--s4); border-top: 1px solid var(--sep); padding-top: var(--s4); }

/* #1 放宽开关列表 */
.relax-list { display: flex; flex-direction: column; gap: var(--s3); }
.relax-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s4); border: 1px solid var(--sep); border-radius: var(--r-card); background: var(--surface); }
.relax-action { font-size: var(--t-body); font-weight: 500; color: var(--label); }
.relax-sub { font-size: var(--t-sub); color: var(--label-2); }
.relax-toggle { border: none; border-radius: var(--r-pill); padding: 4px 12px; font-size: var(--t-cap);
  cursor: pointer; background: var(--surface-2); color: var(--label-2); transition: all var(--dur);
  white-space: nowrap; flex: 0 0 auto; }
.relax-toggle.on { background: var(--tint); color: #fff; }

/* #2 面试建议区头 */
.jp-sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.btn-sm { font-size: var(--t-cap); padding: 4px 10px; }
.itv-signal { font-style: italic; color: var(--label-3); }

/* Toast 通知（替代 alert） */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  padding: 10px 24px; border-radius: var(--r-pill); font-size: var(--t-sub);
  background: var(--label); color: var(--bg); opacity: 0; transition: all .3s; z-index: 9999; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-error { background: var(--danger); }

/* ============ 侧边栏 dashboard 布局（对标参考图：左侧导航 + 主工作区）============ */
.shell { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--surface); border-right: .5px solid var(--sep);
  padding: var(--s5) var(--s3); display: flex; flex-direction: column; gap: var(--s2);
  position: sticky; top: 0; height: 100vh; box-sizing: border-box;
}
.side-brand { font-size: var(--t-title3); font-weight: 700; padding: 0 var(--s3) var(--s4); letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px; }
/* 黑色圆角 logo 徽标：参考图1/图3 的品牌区 —— */
.side-brand::before {
  content: "✺"; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px;
  background: var(--ink); color: var(--ink-fg);
  display: grid; place-items: center; font-size: 14px;
}
.side-label { margin: 0 0 var(--s1) var(--s3); font-size: var(--t-cap); color: var(--label-3); text-transform: uppercase; letter-spacing: .06em; }
.side-steps { display: flex; flex-direction: column; gap: 2px; counter-reset: step; }
.side-steps .seg-item {
  display: block; width: 100%; text-align: left; padding: 9px 12px;
  border: 0; border-radius: var(--r-ctl); background: transparent;
  color: var(--label-2); font-size: var(--t-body); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* 步骤序号：01 02 03… 工作台化的流程导航 */
.side-steps .seg-item::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: inline-block; margin-right: 10px; font-size: 11px; font-weight: 600;
  color: var(--label-3); font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.side-steps .seg-item.on::before { color: var(--tint); }
.side-steps .seg-item.on { background: var(--tint-bg); color: var(--tint); font-weight: 600; }
.side-steps .seg-item:hover:not(:disabled):not(.on) { background: var(--surface-2); color: var(--label); }
.side-steps .seg-item:disabled { opacity: .35; cursor: default; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: var(--s4); border-top: .5px solid var(--sep); }
.side-foot .live-badge { margin: 0 var(--s3) var(--s2); align-self: flex-start; }
.side-item {
  border: 0; background: transparent; text-align: left; padding: 8px 12px;
  border-radius: var(--r-ctl); color: var(--label-2); font-size: var(--t-sub); cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.side-item:hover { background: var(--surface-2); color: var(--label); }
.mainarea { min-width: 0; }
.topbar { display: flex; justify-content: flex-end; align-items: center; padding: var(--s3) var(--s6) 0; min-height: 20px; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    border-right: 0; border-bottom: .5px solid var(--sep); padding: var(--s3) var(--s4); }
  .side-brand { padding: 0 var(--s3) 0 0; font-size: var(--t-body); }
  .side-label { display: none; }
  .side-steps { flex-direction: row; }
  .side-steps .seg-item { width: auto; padding: 6px 10px; font-size: var(--t-sub); }
  .side-foot { margin: 0 0 0 auto; flex-direction: row; border: 0; padding: 0; align-items: center; }
  .side-foot .live-badge { margin: 0 var(--s2) 0 0; }
}

/* 候选池估算口径标注 */
.jp-pool-est { display: block; font-size: 10px; color: var(--label-3); margin-top: 2px; }

/* toast 内重试按钮 */
.toast-act {
  margin-left: var(--s3); border: 0; padding: 3px 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.22); color: inherit; font-size: var(--t-cap); cursor: pointer;
}

/* 首页填写引导：醒目提示条 */
.lead-hint {
  display: inline-flex; align-items: center; gap: 6px;
  margin: var(--s2) 0 0; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--tint-bg); color: var(--tint);
  font-size: var(--t-sub); font-weight: 600;
}
.lead-hint::before { content: "ⓘ"; font-weight: 400; }

/* ============ 基础信息控件统一（下拉/数字与文本框同观感）============ */
select.input {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px; cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="%23807966" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8l4 4 4-4"/></svg>');
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
/* 带候选项的文本框：同一枚 chevron 作为"可点选"示意 */
.input[list] {
  padding-right: 36px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="%23807966" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8l4 4 4-4"/></svg>');
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
/* 数字输入：去掉原生 spinner，与文本框完全一致 */
input[type="number"].input::-webkit-inner-spin-button,
input[type="number"].input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"].input { -moz-appearance: textfield; appearance: textfield; }
/* 状态徽章可点（模型设置入口） */
.live-badge { cursor: pointer; }

/* ============ 画像三层分区 ============ */
.layer-note { margin-left: 8px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--label-3); }
.def-goal { margin: 0 0 var(--s4); font-size: var(--t-title3); line-height: 1.5; }
.def-goal:empty { display: none; }
.def-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.def-h { margin: 0 0 var(--s2); font-size: var(--t-cap); font-weight: 600; color: var(--label-3); }
.def-list { margin: 0; padding-left: 1.1em; font-size: var(--t-sub); color: var(--label-2); line-height: 1.75; }

.screen-list { display: flex; flex-direction: column; gap: var(--s2); }
.screen-item { padding: var(--s3) var(--s4); border: 1px solid var(--sep); border-radius: var(--r-card); background: var(--surface); }
.screen-main { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.screen-group { font-size: var(--t-cap); font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.screen-group-must { background: var(--tint-bg); color: var(--tint); }
.screen-group-plus { background: var(--ok-bg); color: var(--ok); }
.screen-group-exclude { background: var(--danger-bg); color: var(--danger); }
.screen-text { flex: 1; min-width: 0; font-size: var(--t-body); }
.screen-op { margin-top: 4px; font: 11px/1.6 ui-monospace, Menlo, monospace; color: var(--label-3); word-break: break-all; }
.screen-miss { margin-top: 4px; font-size: var(--t-cap); color: var(--warn); }

.unsure-list { display: flex; flex-direction: column; gap: var(--s2); }
.unsure-item { padding: var(--s3) var(--s4); border-radius: var(--r-card); background: var(--surface-2); border-left: 3px solid var(--sep-strong); }
.unsure-inferred { border-left-color: var(--tint); }
.unsure-conflict { border-left-color: var(--danger); }
.unsure-main { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.unsure-label { font-size: var(--t-body); font-weight: 500; }
.unsure-val { font-size: var(--t-sub); color: var(--label-2); }
.unsure-note { margin-top: 2px; font-size: var(--t-cap); color: var(--label-3); }
@media (max-width: 820px) { .def-cols { grid-template-columns: 1fr; } }