/* ==========================================================================
   矿农网 · PC 求职者端 视觉层
   依赖：tokens.css → shell.css → admin.css（通用 PC 组件）→ ent.css（共享结构层）
   只定义求职端特有类：职位行卡 / 收藏钮 / 我的名片 / 证书墙 / 侧栏用户头像
   ========================================================================== */

/* ---------- 1. 外壳 ---------- */
.user-app {
  display: flex;
  height: 100%;
  font-size: var(--d-base);
  background: var(--bg);
  color: var(--ink-900);
}

/* ---------- 2. 侧栏用户头像 ---------- */
.uo-av {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-800));
  color: #fff;
  font-size: var(--d-base);
  font-weight: 700;
}

/* ---------- 3. 职位行卡 ---------- */
.uj-list { display: flex; flex-direction: column; gap: var(--s-3); }
.uj-row {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
  transition: box-shadow .15s, border-color .15s;
}
.uj-row:hover { box-shadow: var(--sh-2); border-color: var(--blue-200); }
.uj-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.uj-t {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}
.uj-t b { font-size: var(--d-lg); font-weight: 800; cursor: pointer; }
.uj-t b:hover { color: var(--blue-600); }
.uj-t .money { font-size: var(--d-xl); font-weight: 800; color: var(--gold-600); white-space: nowrap; }
.uj-t .money small { font-size: var(--d-sm); font-weight: 600; margin-left: 2px; }
.uj-co { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.uj-con { font-size: var(--d-base); font-weight: 700; color: var(--blue-700); }
.uj-co small { font-size: 12px; color: var(--ink-400); }
.uj-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.uj-meta span {
  font-size: 12px;
  color: var(--ink-600);
  background: var(--line-2);
  border-radius: var(--r-xs);
  padding: 2px 7px;
}
.uj-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 20px; }
.uj-side {
  flex: none;
  width: 118px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  text-align: center;
  border-left: 1px dashed var(--line-2);
  padding-left: var(--s-4);
}
.uj-time { font-size: 11px; color: var(--ink-400); }

/* 收藏按钮 */
.fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-500);
  font-size: var(--d-sm);
  font-family: var(--font);
  cursor: pointer;
  transition: all .15s;
}
.fav-btn:hover { border-color: var(--gold-400); color: var(--gold-700); }
.fav-btn.on {
  background: var(--gold-50);
  border-color: var(--gold-500);
  color: var(--gold-700);
  font-weight: 700;
}

/* ---------- 4. 简历竞争力说明 ---------- */
.cmp-note {
  margin: 10px 0 var(--s-3);
  font-size: var(--d-sm);
  line-height: 1.7;
  color: var(--ink-600);
}
.ok-t { color: var(--success); font-weight: 700; }
.warn-t { color: var(--warn); font-weight: 700; }

/* ---------- 5. 我的名片 ---------- */
.my-find { display: flex; align-items: center; gap: var(--s-4); }
.mf-av {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  font-size: var(--d-xl);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-700));
}
.mf-main { flex: 1; min-width: 0; line-height: 1.35; }
.mf-main b { display: block; font-size: var(--d-md); font-weight: 800; }
.mf-main small { display: block; font-size: var(--d-sm); color: var(--ink-500); margin-top: 3px; }
.mf-num { flex: none; font-size: var(--d-sm); color: var(--ink-400); }

/* ---------- 6. 证书墙 ---------- */
.cert-list { display: flex; flex-direction: column; margin-bottom: var(--s-3); }
.cert-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 11px 2px;
  border-bottom: 1px dashed var(--line-2);
}
.cert-row:last-child { border-bottom: none; }
.cr-ic {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--gold-50);
  color: var(--gold-700);
}
.cr-main { flex: 1; min-width: 0; line-height: 1.35; }
.cr-main b { display: block; font-size: var(--d-base); font-weight: 700; }
.cr-main small { display: block; font-size: 12px; color: var(--ink-500); margin-top: 2px; }

/* ---------- 7. 响应式 ---------- */
@media (max-width: 1180px) {
  .uj-row { flex-direction: column; gap: var(--s-3); }
  .uj-side {
    width: auto;
    flex-direction: row;
    align-items: center;
    border-left: none;
    border-top: 1px dashed var(--line-2);
    padding-left: 0;
    padding-top: var(--s-3);
  }
  .uj-side .btn, .uj-side .bdg { flex: 1; }
}

/* ---------- 8. 每日签到卡（2026-10-12）----------
   与移动端同一口径：这张卡只在 GET /me/checkin 取到数据时渲染（见 user.screens-a.js），
   任何一个数字都不是本地猜的 —— 取不到就整张不出现。 */
.ck-row { display: flex; flex-direction: column; gap: var(--s-3); }
.ck-dots { display: flex; gap: 6px; }
.ck-dot {
  flex: 1;
  max-width: 56px;
  padding: 7px 0;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--line-2);
  font-size: var(--d-sm);
  color: var(--ink-500);
}
/* 已签那天描金边：一眼看出连签是从哪天开始的、断在哪天 */
.ck-dot.on {
  background: var(--gold-50);
  border-color: var(--gold-500);
  color: var(--gold-700);
  font-weight: 800;
}
.ck-foot { display: flex; align-items: center; gap: var(--s-4); }
.ck-streak { font-size: var(--d-sm); color: var(--ink-600); }
.ck-streak .num { font-size: var(--d-lg); font-weight: 800; color: var(--gold-600); }
.ck-foot-tx { font-size: var(--d-sm); color: var(--ink-500); }
.ck-foot-tx b { color: var(--gold-600); }
.ck-foot .btn { margin-left: auto; }

/* ---------- 账号设置：头像即入口（2026-10-12）----------
   一颗 52px 的头像若和旁边的状态徽章长得一样，没人会去点第二下 ——
   右下角那颗小相机是"这里能改"的唯一提示，别省。 */
.acct-av-btn {
  position: relative; padding: 0; border: 0; background: none; cursor: pointer;
  line-height: 0; border-radius: 50%;
}
.acct-av-btn em {
  position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; color: var(--ink-500); box-shadow: 0 1px 4px rgba(15, 23, 42, .22);
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.acct-av-btn em svg { width: 12px; height: 12px; }
.acct-av-btn:hover em { color: var(--brand-600, #2f6bd8); }

/* ---------- 实名信息入口：侧栏那颗实名徽章（2026-10-12）----------
   徽章做成按钮（点开看实名信息）：button 的默认外观清掉，
   颜色仍由 aChip 的 tone 决定 —— 只清自己该清的，不抢配色。 */
.uvf-chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; line-height: 1;
}
.uvf-chip .ic { width: 12px; height: 12px; opacity: .6; }
.uvf-chip:hover .ic { opacity: 1; }

/* 抽屉里的证件照：本人自己上传的两面，只读回显（不是上传位） */
.uvf-shots { display: flex; gap: 12px; }
.uvf-shot {
  position: relative; flex: 1; height: 96px; border-radius: 10px;
  overflow: hidden; background: #F1F5F9;
}
.uvf-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uvf-shot em {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3px 0; text-align: center; font-style: normal;
  font-size: 11px; background: rgba(0, 0, 0, .5); color: #fff;
}

/* ==========================================================================
   发布招工 · 所属行业格子（2026-10-15）
   --------------------------------------------------------------------------
   与手机端 mobile.market.css 的 .pk-pick / .pk-cell 同源：1.5px 描边、图标 + 名称 +
   一句话说明，选中转浅蓝底 + 深蓝字。手机端那份是 3 列窄格，这里只按 PC 尺寸
   调间距与字阶，视觉语言保持一套。
   ⚠️ user.html 不加载 mobile.market.css，所以这份是 PC 端自己的实现；
      改视觉时两边一起动（搜索 .pk-cell 能找到全部落点）。
   ⚠️ 限宽 640px：PC 卡片很宽，三格铺满会拉成三条长横条，就不像"格子"了。
   ========================================================================== */
.pk-pick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 560px;
}
.pk-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
/* 图标块级化：行内 svg 会按行高留白，图标与名称之间凭空多出一道空隙 */
.pk-cell .ic { display: block; color: var(--ink-400); }
.pk-cell b { font-size: var(--t-sm); font-weight: 800; color: var(--ink-900); }
.pk-cell small { font-size: var(--t-xs); color: var(--ink-500); line-height: 1.4; }
.pk-cell:hover { border-color: var(--blue-200); }
.pk-cell.on { border-color: var(--blue-700); background: var(--blue-50); }
.pk-cell.on .ic { color: var(--blue-700); }
.pk-cell.on b { color: var(--blue-700); }