/* /user 我的页样式 —— .us- 前缀。
 *
 * 设计意图(跟 .pen ApplyManager 对齐 + Bonjour 设计系统):
 *   - 扁平:无 box-shadow、无 border 作为分组手段。卡片视觉靠白底 + 圆角 + gap
 *     间距,hover 用 bg-soft 给极轻反馈(§1.3 允许的 bg-soft 唯一场景之一)
 *   - 标题主副同字号同字重(15/400),ink-1 + ink-3 区分(§1.1)
 *   - 系统字体,无衬线(§1.2)
 *   - 不用 hr,section 间靠大间距(§1.5)
 *   - 按钮 / chip 带 icon 前缀 + outline(§1.6 §1.7)
 */

.us-page {
  /* ft-page 的 .ai-has-sidebar 已经 padding-left: var(--ai-sb-width)。
     这里只管 main 内容的居中宽度和上下气量 */
  min-height: 100dvh;
  padding: 56px 32px 96px;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  background: #ffffff;
  color: #1d1d1f;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "PingFang SC", system-ui, sans-serif;
}

@media (max-width: 720px) {
  .us-page {
    /* 顶部 padding 加大避让左上 ☰ sidebar 触发器,避免它压住第一个 section title */
    padding: 64px 16px 64px;
  }
}

.us-page > * {
  /* 加了 16px 左右 padding 给 section header / row 之后,把 max-width 也对应
     放宽 32px(两侧各 16),让"卡片可视宽度"跟之前持平 */
  max-width: 808px;
  margin-left: auto;
  margin-right: auto;
}

.us-demo-banner {
  margin-bottom: 32px;
  padding: 10px 16px;
  background: #f5f5f7;
  border-radius: 12px;
  color: #86868b;
  font-size: 13px;
  letter-spacing: -0.005em;
}
.us-demo-banner a {
  color: #1d1d1f;
  text-decoration: underline;
  margin-left: 8px;
}

/* ───────── Section ───────── */
.us-sec {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 72px;
}
.us-sec:last-of-type {
  padding-bottom: 0;
}

.us-sec-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  /* 跟下方 row 内容左对齐 —— row(.us-cv-row / .jp-job-row 本页 scope)有 16px
     横向 padding,header 加同样的 16px 才不会"title 顶左、内容缩进"错位 */
  padding: 0 16px;
}
/* title + actions 用 flex: 1 平分父宽度(各 50%) */
.us-sec-titlewrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* §1.1 主副同字号同字重:title 和 sub 都用 15/400,
   只用 ink-1 ↔ ink-3 颜色区分层级(跟 .me-section-title / .me-section-desc 同款) */
.us-sec-title {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  color: #1d1d1f;
  letter-spacing: -0.005em;
  line-height: 1.5;
}
.us-sec-sub {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  color: #86868b;
  letter-spacing: -0.005em;
  line-height: 1.5;
}

/* section header 右侧按钮组 —— 跟 .us-sec-titlewrap 一样 flex: 1 平分父宽度,
   内部 chip 按钮 justify-end 靠右,保留自然宽度不会被拉到 50%。 */
.us-sec-actions {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

/* outline pill 按钮 ——「+ 新建」「+ 全部 N」用，符合 §1.6 chip + icon 规范 */
.us-sec-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #e5e7eb;
  background: transparent;
  border-radius: 999px;
  color: #1d1d1f;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: background 0.15s cubic-bezier(0.2, 0, 0, 1),
    border-color 0.15s cubic-bezier(0.2, 0, 0, 1);
  white-space: nowrap;
}
.us-sec-btn:hover:not(:disabled) {
  background: #f5f5f7;
  border-color: #1d1d1f;
}
.us-sec-btn:disabled {
  color: #a1a1a6;
  border-color: #ececef;
  cursor: not-allowed;
}

/* ───────── CV / Portfolio 空态:两个上传 card ─────────
   纯白 + 大间距,无 fill 无 shadow 无 border。
   hover 才用 bg-soft 给一点 drop-zone 反馈(§1.3 允许的 hover 场景) */
.us-cv-emptywrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 跟 .us-empty 同款 280 默认高度,让 CV/Portfolio section 跟下面的投递/收藏
     section 在内容稀疏时视觉权重对齐(不至于一个矮一个高)。 */
  min-height: 280px;
}
/* 横向布局:icon 在第一句前,title + sub 竖排,整组水平居中。
   高度固定 72,虚线 drop-zone 描边 —— 是设计师专门要的 drop zone hint。
   用 SVG background 而非 CSS border,因为 `border-style: dashed` 控不了 dash
   密度(由浏览器渲染决定且很密)。SVG 的 stroke-dasharray='10 6' 是稀疏点的
   dash 10 + gap 6,跟设计意图对齐 */
.us-upload-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* 左对齐:icon 在左,title/sub 竖排紧邻右侧 —— 跟 CV/Portfolio 文件行
     (icon + name + meta)同款视觉,上传后视觉过渡顺滑 */
  justify-content: flex-start;
  gap: 16px;
  height: 72px;
  padding: 0 20px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23d1d1d6' stroke-width='1.5' stroke-dasharray='10 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  color: #1d1d1f;
  transition: background-color 0.15s cubic-bezier(0.2, 0, 0, 1);
  box-sizing: border-box;
}
.us-upload-card:hover:not(:disabled) {
  background-color: #f5f5f7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%2386868b' stroke-width='1.5' stroke-dasharray='10 6'/%3E%3C/svg%3E");
}
/* 拖文件悬浮态:实线 + ink-1 边,告诉用户"现在松手就行";比 hover 更强的视觉。 */
.us-upload-card.is-drag-over {
  background-color: #f5f5f7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='1' y='1' width='calc(100%25 - 2)' height='calc(100%25 - 2)' fill='none' rx='19' ry='19' stroke='%231d1d1f' stroke-width='2'/%3E%3C/svg%3E");
}
/* 同时覆盖 <button disabled> 和 <div role="button" aria-disabled="true">。
   后者是为了 drag-drop 兼容性:浏览器对 `<button disabled>` 不派发任何事件
   (包括 dragover/drop),用户拖文件上来 fallback 到"打开文件"行为,体验灾难。
   改用 div + aria-disabled 后事件能正常派发,disabled 态我们自己挡。 */
.us-upload-card:disabled,
.us-upload-card[aria-disabled="true"] {
  cursor: not-allowed;
  color: #86868b;
}
/* 上传图标外面套 40×40 灰底方块,跟 .us-cv-icon / .ap-cv-icon 一致 ——
   "上传"卡和"已上传文件行"视觉过渡顺滑(同一位置同款 icon 区域)。
   border-box + padding 10 → 总尺寸 40,内容 20×20。 */
.us-upload-card svg {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 10px;
  background: #ececef;
  border-radius: 10px;
  color: #86868b;
  box-sizing: border-box;
}
.us-upload-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
/* 跟 .us-cv-name / .ap-cv-name 同款 row 15/500 */
.us-upload-title {
  font-size: 14px;
  color: inherit;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
/* 跟 .us-cv-meta / .ap-cv-meta 同款 chip 13/400,§1.1 主副同字重靠色拉层级 */
.us-upload-sub {
  font-size: 14px;
  font-weight: 400;
  color: #86868b;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* ───────── CV / Portfolio 主态:文件列表 ─────────
   扁平:白底,无 shadow,hover bg-soft */
/* 上传错误提示 —— 上传失败 / 文件超规 / 删除失败时短显。
   设计系统不让用红色 tint,所以走 ink-3 灰字 + 16px 左 padding 对齐列表行。
   role=alert 让屏幕阅读器读出来。 */
.us-cv-error {
  margin: 0 0 8px;
  padding: 8px 16px;
  font-size: 13px;
  color: #1d1d1f;
  background: #f5f5f5;
  border-radius: 10px;
  line-height: 1.4;
}

.us-cv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* 默认高度比 .us-empty(280)小 25%,单条 CV 时 section 不缩成一行,
     但也不至于跟下面投递/收藏空态等高显得头重脚轻。多条时自然往下长。 */
  min-height: 210px;
}
/* modal 里复用同款行 UI,但不要 min-height —— modal body 自己有 max-height +
   scroll,内列表自然伸缩就好。 */
.us-cv-list--modal {
  min-height: 0;
}
.us-cv-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: #ffffff;
  border-radius: 20px;
  transition: background 0.15s cubic-bezier(0.2, 0, 0, 1);
}
.us-cv-row:hover {
  background: #f5f5f7;
}
/* 文件主区域 —— 整块 button,点了开 PreviewModal。reset button 默认 padding/
   border/bg/font,内部接管原本 .us-cv-row 的 flex(icon + body)。文本左对齐。 */
.us-cv-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.us-cv-main:focus-visible {
  outline: 2px solid #1d1d1f;
  outline-offset: 2px;
  border-radius: 12px;
}
.us-cv-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ececef;
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
}
.us-cv-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}
.us-cv-name {
  font-size: 15px;
  font-weight: 400;
  color: #1d1d1f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.us-cv-meta {
  font-size: 13px;
  color: #86868b;
  line-height: 1.3;
}
.us-cv-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
/* CvFileRow selectable 模式右侧的 radio 圆点 —— 默认空心灰圈，选中态填黑 +
   白色勾（svg 用 currentColor，靠 color 翻黑白）。
   apply 流程的 CvPickerModal 用这套；manage 模式不渲染此元素。 */
/* 选中指示器 —— 现在是 <button>(可点 toggle),button-reset 让它跟原来的 span
   外观一致:无原生按钮 chrome、padding 0,18px 圆圈靠下面的 width/height/border 撑。 */
.us-cv-radio {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1.5px solid #86868b;
  /* 可选态:白底空心圈(白弹窗透出来 = 白),靠灰描边显示"还能选"。
     必须显式 transparent —— 否则 <button> 会带原生 buttonface 灰底。 */
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.us-cv-radio:disabled {
  cursor: not-allowed;
}
.us-cv-radio.us-cv-radio--on {
  border-color: #1d1d1f;
  background: #1d1d1f;
  color: #ffffff;
}
/* 选满上限后,未选中的指示器变灰实心 —— 暗示"加不进去了"。仍可点(点了弹
   "最多选择 N 份" toast),灰只是视觉提示,不是真 disabled。 */
.us-cv-radio.us-cv-radio--full {
  border-color: #ececef;
  background: #ececef;
}
/* 单文件操作按钮 —— icon-only,无描边无文字。常态 ink-3 灰图标,
   hover bg 走 §1.3 唯二允许的 #f5f5f5 软底 + ink-1 加深图标。disabled 半透明。 */
.us-cv-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #86868b;
  cursor: pointer;
  /* 下载按钮渲成 <a>,清掉 anchor 默认下划线;字号 0 避免 anchor 留 line-height 撑高 */
  text-decoration: none;
  transition: background 0.15s cubic-bezier(0.2, 0, 0, 1),
    color 0.15s cubic-bezier(0.2, 0, 0, 1);
}
.us-cv-action:hover:not(:disabled) {
  background: #f5f5f5;
  color: #1d1d1f;
}
.us-cv-action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 收藏 / 投递行右上角的 X 按钮 —— 替换原 .ft-card-open 的箭头位。
   position relative + z-index 浮在 .jp-job-cover anchor 之上,click 时
   stopPropagation 防止冒泡到 cover 触发 JD 跳转。 */
.us-row-action {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #86868b;
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.2, 0, 0, 1),
    color 0.15s cubic-bezier(0.2, 0, 0, 1);
}
.us-row-action:hover:not(:disabled) {
  background: #f5f5f5;
  color: #1d1d1f;
}
.us-row-action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* "已下架"占位 —— cover anchor 的降级 span,文字隐藏,只占空间。
   不挂 cursor,行没有"可点"暗示 */
.jp-job-cover--disabled {
  cursor: default;
}

/* 右上角 toast(取消收藏 / 删除投递 失败时短显)—— 设计系统不让用红色 tint,
   走 ink-1 实底 + 白字,3s 自动消失。 */
.us-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 200;
  padding: 12px 18px;
  background: #1d1d1f;
  color: #ffffff;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
    0 14px 44px -10px rgba(0, 0, 0, 0.18);
  animation: us-fade-in 0.18s cubic-bezier(0.2, 0, 0, 1);
}

/* 我的投递 / 收藏职位 列表行直接复用 .jp-job-row(职位列表同款),
   样式见 public/styles/jobs.css。本页 scope 内覆盖横向 padding 到 16,跟 CV
   row + section header 左右对齐;垂直 18px 沿用 jobs.css。 */
.us-page .jp-job-row {
  padding-left: 16px;
  padding-right: 16px;
}
/* 我的投递 / 收藏职位 populated 态跟 .us-cv-list 一样给 210 min-height,
   避免单条记录时整个 section 缩成一坨,跟上面 CV/Portfolio section 视觉对齐。
   只在 /user scope 内生效 —— /jobs 列表页用同名 class,不能影响它。 */
.us-page .jp-list {
  min-height: 210px;
}

/* ───────── 空态 panel(我的投递 / 收藏职位)─────────
   整块都是 link —— 居中的方形,内部 icon + CTA pill 居中。
   纯白无描边,hover 整块降透明度作为反馈 */
.us-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 280px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.15s cubic-bezier(0.2, 0, 0, 1);
  box-sizing: border-box;
}
.us-empty:hover {
  opacity: 0.55;
}
.us-empty-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #86868b;
}
.us-empty-icon img {
  width: 32px;
  height: 32px;
  opacity: 0.6;
}
/* 视觉上还是个 pill,但只是个 <span> —— 整块 .us-empty 才是真实 link */
.us-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 16px;
  background: transparent;
  border: none;
  color: #1d1d1f;
  font-size: 14px;
  border-radius: 999px;
}

/* ───────── Modal(全部投递 / 全部收藏)─────────
   modal 是 "弹出层" 不是 "页内卡片",这里保留 shadow-modal 因为它是从背景拔起的
   独立浮层 —— 是 §1.4 "卡片无描边" 规则的 modal 例外(§5 component formation rules
   里 modal 有独立约定: shadow-modal + r-3xl + .22s rise) */
.us-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  animation: us-fade-in 0.18s cubic-bezier(0.2, 0, 0, 1);
}
@keyframes us-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.us-modal {
  width: 100%;
  max-width: 700px;
  /* 跟 .ap-modal 同款规则:一开始就长到目标高度,不按内容撑;内容多了 .us-modal-body
     自带 overflow auto 接管滚动。少内容时也不显得小气。 */
  height: min(720px, calc(100dvh - 64px));
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
    0 30px 80px -20px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: us-rise 0.22s cubic-bezier(0.2, 0, 0, 1);
}
@keyframes us-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* JD 投递弹窗(选 CV)—— 复用 us-modal-backdrop,本体宽度比 .us-modal 略窄,
   头部 + 列表 + 底部按钮三段。视觉跟设计系统 §1.3-1.5 对齐:white bg、无描边、
   靠间距分组。 */
.ap-modal {
  width: 100%;
  max-width: 560px;
  /* 一开始就长到目标高度,而不是"按内容撑"。少内容时不会显得小气;多内容时
     内部 .ap-modal-body 滚动接管(自带 overflow-y: auto + flex: 1)。
     min() 兜底:视口小于 720+64 时贴边距 calc 自适配,不溢出。 */
  height: min(720px, calc(100dvh - 64px));
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
    0 30px 80px -20px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: us-rise 0.22s cubic-bezier(0.2, 0, 0, 1);
  /* 给绝对定位子元素(ApplyModal 右上 ✕)一个 positioned 祖先;若用 static,
     position: absolute 会穿透到 .us-modal-backdrop(fixed),定位到视口而非
     弹窗本体。 */
  position: relative;
}
/* 宽变体 —— ApplyModal "投递信号" 表单用。Figma 设计是全页 1086 高,塞进
   弹窗后要给表单足够宽度展开(textarea + dropzone 太窄会挤),上限 980 防
   4K 屏上离谱大。mobile 走文件末尾 @media,改成贴满整屏。 */
.ap-modal--wide {
  max-width: min(75vw, 980px);
  height: min(820px, calc(100dvh - 32px));
}
/* head 横排:title 块 flex: 1,右侧可选 ✕ 关闭按钮(.us-modal-close) */
.ap-modal-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 30px 24px 16px;
  flex: 0 0 auto;
}
/* 无 sub 时收紧上下 padding —— 单行 title 不需要 sub 那条留出的呼吸位 */
.ap-modal-head--no-sub {
  padding: 20px 24px 8px;
}
.ap-modal-head--no-sub .ap-modal-titlewrap {
  /* gap 只在多子元素时显现,但顺手归 0 表达意图 */
  gap: 0;
}
.ap-modal-titlewrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ap-modal-title {
  margin: 0;
  font-size: 15px;
  color: #1d1d1f;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.ap-modal-sub {
  margin: 0;
  font-size: 15px;
  color: #86868b;
  line-height: 1.5;
}
.ap-modal-body {
  padding: 12px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
}
/* body 跟 actions 之间的非滚动条带 —— UploadChooserModal 把上传占位符放这里,
   保证占位符始终可见,不会被 body 内列表溢出时遮挡(移动端尤其要紧)。
   视觉上跟 actions 同级 padding,但保持上小下小,让"占位符 / 完成按钮"两条
   bottom 区是一个连续的脚部。 */
.ap-modal-bottombar {
  padding: 12px 24px 0;
  flex: 0 0 auto;
}
.ap-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 16px 24px 24px;
  flex: 0 0 auto;
}
.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s,
    color 0.15s;
}
.ap-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.ap-btn--cancel {
  background: #ffffff;
  border: 1px solid #86868b;
  color: #1d1d1f;
}
.ap-btn--cancel:hover:not(:disabled) {
  border-color: #1d1d1f;
}
.ap-btn--primary {
  background: #1d1d1f;
  border: 1px solid #1d1d1f;
  color: #ffffff;
}
.ap-btn--primary:hover:not(:disabled) {
  opacity: 0.88;
}

/* CV 单选列表 —— radio 隐起来,整行 label 可点。无 border,选中态靠右侧 radio
   实心圆 + ink-1 体现(§1.4 不靠边框,§1.7 不靠浅色 tint 底)。 */
.ap-cv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ap-cv-item {
  display: flex;
  align-items: center;
  gap: 16px;             /* 跟 /user .us-cv-row 一致 */
  padding: 12px 16px;
  background: #ffffff;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
/* 多选改用 checkbox（之前是单选 radio）—— 两种都视觉隐藏,选中态走 .is-selected
   + .ap-cv-radio 自定义勾选指示器,不靠原生控件外观。 */
.ap-cv-item input[type="radio"],
.ap-cv-item input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ap-cv-item:hover {
  background: #f5f5f5;
}
.ap-cv-item.is-selected {
  background: #ffffff;
}
/* 40x40 / radius 10 / bg ececef —— 跟 /user .us-cv-icon 完全一致,CV 视觉身份统一 */
.ap-cv-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ececef;
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
}
.ap-cv-body {
  display: flex;
  flex-direction: column;
  gap: 3px;              /* 跟 /user .us-cv-body 一致 */
  flex: 1 1 auto;
  min-width: 0;
}
/* row 15/500 —— 跟 /user 页 .us-cv-name 一致(都是 CV 列表的主名),
   设计系统 §3 row-sm / row 这档,line-height 1.3 跟同页 .us-cv-name 对齐 */
.ap-cv-name {
  font-size: 15px;
  font-weight: 400;
  color: #1d1d1f;
  line-height: 1.3;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* chip 13/400 —— 跟 /user 页 .us-cv-meta 一致;§1.1 主副不靠字重,这里 weight
   跟主名一样可,靠 color ink-3 拉层级 */
.ap-cv-meta {
  font-size: 13px;
  font-weight: 400;
  color: #86868b;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
/* 自定义 radio 视觉(右侧圆) */
.ap-cv-radio {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1.5px solid #86868b;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.ap-cv-item.is-selected .ap-cv-radio {
  border-color: #1d1d1f;
  background: #1d1d1f;
}
/* 选中态:整圆涂黑,中间白色勾。SVG inline data URL —— 单一字符颜色用 currentColor
   不行(因为是 background-image),所以 stroke 直接写死白色;勾的几何走标准 12px viewBox。 */
.ap-cv-item.is-selected .ap-cv-radio::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 6.2l2.3 2.3 4.7-4.7'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}

/* "+ 上传新的 CV" 行内按钮 —— 列表态用。chip 13/400 对齐 meta 系列文字 */
.ap-cv-add {
  width: 100%;
  padding: 12px 14px;
  margin-top: 4px;
  background: transparent;
  border: 1px dashed #c7c7cc;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.005em;
  font-family: inherit;
  color: #86868b;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.ap-cv-add:hover:not(:disabled) {
  border-color: #1d1d1f;
  color: #1d1d1f;
}
.ap-cv-add:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 「查看全部 →」—— 移到 .ap-form-section-titlerow 跟 H2 同行,所以不带
   align-self / margin-top;无 border text-only,跟 dropzone 视觉层级拉开。 */
.ap-cv-more {
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: #86868b;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
}
.ap-cv-more:hover:not(:disabled) {
  color: #1d1d1f;
}
.ap-cv-more:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* （CvPickerModal 自定义 shell 的 8 个 class 已经废弃 ——
   .ap-cv-picker-backdrop / .ap-cv-picker / .ap-cv-picker-head /
   .ap-cv-picker-title / .ap-form-close--inline / .ap-cv-picker-list /
   .ap-cv-picker-foot / .ap-cv-picker-upload —— 现在直接用 ApModal
   + us-modal-backdrop 的标准 shell + UploadCard 两张顶部占位卡，
   不再需要 picker 专属样式。） */

/* ═══════════════════════════════════════════════════════════════════════
   ApplyModal "发个信号" 表单(.ap-modal--wide 内)
   ═══════════════════════════════════════════════════════════════════════
   设计参考 Figma file YXmy2pZgAePoLe4eHpNbSx, node 1:2。Bonjour token 做了
   适配:Figma 的 #007aff / #ff3b30 / Inter 字体都按设计系统转 ——
   - 链接走 var(--accent-verified, #2e84fa)
   - 必填星号 #ff3b30(单字形,排版约定,不算 status 色)
   - 字体走系统栈(Bonjour §1.2)
   - 卡片白底 + shadow-1 / radius-2xl(Bonjour §1.3 §1.4)
   - 分组靠标题 + 间距,不用 hr 分隔(Bonjour §1.5)
   ═════════════════════════════════════════════════════════════════════ */

.ap-form-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 999px;
  color: #86868b;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}
.ap-form-close:hover:not(:disabled) {
  background: #f5f5f7;
  color: #1d1d1f;
}

/* 滚动容器 —— body 自由滚,sticky footer 固定。.ap-modal 已经是 flex column,
   这里 flex: 1 + overflow-y: auto 接管。 */
.ap-form-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 56px 64px 32px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* ─── Header(eyebrow + 双色 H1 + lede) ─── */
.ap-form-head {
  display: flex;
  flex-direction: column;
  /* eyebrow → H1 紧凑(16);H1 → lede 在下面的 .ap-form-lede 加 margin-top
     单独拉开,所以总 gap 不均匀。Figma 原稿是均 36,但渲染时 eyebrow ↔ H1
     之间太空,收紧。 */
  gap: 16px;
}
.ap-form-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ap-form-eyebrow-logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
}
.ap-form-eyebrow-logo--placeholder {
  background: #1d1d1f;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.02em;
}
/* Eyebrow caption —— mono-sm 11/500 UPPER,Bonjour token */
.ap-form-eyebrow-text {
  font-size: 12px;
  font-weight: 500;
  color: #636366;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* H1 —— 双色,黑 + 灰。Figma 用 48px,在 980 modal 里 36 更和谐。 */
.ap-form-title {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #1d1d1f;
}
.ap-form-title-soft {
  color: #8e8e93;
}
/* 副文案 —— body 16/400 + ink-2。前面 .ap-form-head 已经 gap: 16,不再叠
   额外 margin-top —— 之前的 +12 让 H1 ↔ 副文案显得过空。 */
.ap-form-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #48484a;
  letter-spacing: -0.005em;
  max-width: 580px;
}

/* ─── Section ─── */
.ap-form-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* 标题 + 「查看全部 →」并排,baseline 对齐避免按钮文本浮在 H2 大字号上方 */
.ap-form-section-titlerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.ap-form-section-title {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  color: #1d1d1f;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
/* 必填红星 —— 单字形排版约定,不属于 Bonjour status 色范畴 */
.ap-form-section-req {
  color: #ff3b30;
  font-weight: 600;
  margin-left: 2px;
}
.ap-form-section-sub {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #48484a;
  letter-spacing: -0.005em;
}
/* eyebrow 之间分组:复用 .ap-form-eyebrow-text,加上 margin */
.ap-form-subhead {
  margin: 14px 0 0;
}

/* ─── Textarea ─── */
.ap-textarea {
  width: 100%;
  min-height: 168px;
  padding: 14px 16px;
  border: 1px solid #ececef;
  border-radius: 12px;
  background: #ffffff;
  color: #1d1d1f;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.ap-textarea::placeholder {
  color: #aeaeb2;
}
.ap-textarea:focus {
  outline: none;
  border-color: #1d1d1f;
}

/* ─── URL Input ─── */
.ap-form-link-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 8px;
}
.ap-input {
  flex: 1 1 auto;
  padding: 12px 14px;
  border: 1px solid #ececef;
  border-radius: 10px;
  background: #ffffff;
  color: #1d1d1f;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.ap-input::placeholder {
  color: #aeaeb2;
}
.ap-input:focus {
  outline: none;
  border-color: #1d1d1f;
}
.ap-form-link-remove {
  flex: 0 0 auto;
  width: 36px;
  border: 1px solid #ececef;
  background: #ffffff;
  border-radius: 10px;
  color: #86868b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.ap-form-link-remove:hover {
  border-color: #1d1d1f;
  color: #1d1d1f;
}

.ap-form-addlink {
  align-self: flex-start;
  margin-top: 8px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: #2e84fa;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
}
.ap-form-addlink:hover:not(:disabled) {
  text-decoration: underline;
}
.ap-form-addlink:disabled {
  color: #c7c7cc;
  cursor: not-allowed;
}

/* "或" 居中 eyebrow —— Bonjour §1.5 禁 hr,这里用单字形 + 间距分组 */
.ap-form-or {
  margin: 22px 0 14px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  color: #aeaeb2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* （.ap-form-dropzone* 已废弃 —— ApplyModal 空态改用「我的」管理弹窗那套
   两张 UploadCard(us-cv-emptywrap--chooser),不再用单个 dropzone。） */

/* ─── Section 3 profile 卡(只读,Bonjour §1.3 不用 bg-soft,白底 + 极轻 shadow) ─── */
.ap-profile-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 26px 28px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 24px -10px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ap-profile-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ap-profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #ececef;
  color: #636366;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}
.ap-profile-id {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ap-profile-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.ap-profile-handle {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 13px;
  color: #636366;
  letter-spacing: 0.005em;
}
.ap-profile-bio {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #3a3a3c;
  letter-spacing: -0.005em;
}
.ap-profile-edit {
  font-size: 13px;
  font-weight: 500;
  color: #2e84fa;
  text-decoration: none;
  letter-spacing: -0.005em;
}
.ap-profile-edit:hover {
  text-decoration: underline;
}

/* ─── Sticky Send Bar(footer)─── */
.ap-send-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid #ececef;
}
.ap-send-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.ap-send-meta-eyebrow {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  color: #8e8e93;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ap-send-meta-target {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: #1d1d1f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 创始人头像 —— 圆形 20×20。比 footer text(14/1.4 → ~20px lineheight)略大,
   跟 .ap-send-meta-name baseline 自然对齐。空头像走灰底 + 首字母占位。 */
.ap-send-meta-avatar {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  box-shadow: inset 0 0 0 0.5px #ececef;  /* line-1 描线,避免白头像跟 footer 白底糊一起 */
}
.ap-send-meta-avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  color: #1d1d1f;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}
/* §1.1 主副同字号同字重靠色拉:name ink-1,role ink-3。weight 都是 400 */
.ap-send-meta-name {
  font-weight: 400;
  color: #1d1d1f;
}
.ap-send-meta-rest {
  color: #8e8e93;
}
.ap-send-btn {
  flex: 0 0 auto;
  padding: 13px 26px;
  background: #1d1d1f;
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.ap-send-btn:hover:not(:disabled) {
  opacity: 0.88;
}
.ap-send-btn:disabled {
  background: #d1d1d6;
  color: #8e8e93;
  cursor: not-allowed;
}

/* ───────── ApplyModal 成功确认屏(投递成功"信号已送达"那一屏) ─────────
   不复用 .ap-modal--wide 的大尺寸:确认屏内容少,收成一张窄卡 + 按内容撑高,
   居中"时刻"。视觉走设计系统:white bg、无描边、文本靠色不靠字重。
   注:.ap-modal--success 在源顺序上晚于 .ap-modal / --wide,覆盖其 max-width/height。 */
/* 高度钉死(不用 auto)—— 删掉 hint/files 后内容变少,但弹窗尺寸保持不变,
   靠 .ap-success 撑满 + 垂直居中,让减少的内容更舒展地居中。 */
.ap-modal--success {
  max-width: 460px;
  height: 400px;
  max-height: calc(100dvh - 32px);
}
.ap-success {
  flex: 1 1 auto;          /* 撑满 .ap-modal--success 的固定高度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 内容在固定高度里垂直居中 */
  text-align: center;
  gap: 16px;
  padding: 32px;
}
/* 送达徽标 —— 巨型 📢 emoji(纯字形,无底圆) */
.ap-success-badge {
  flex: 0 0 auto;
  font-size: 72px;
  line-height: 1;
}
/* modal-title 22/600 —— 标题用 display 角色,可 600 字重(§1.1 是禁"靠字重分层级") */
.ap-success-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1d1d1f;
}
/* "已发送至 [avatar] X" —— 复用 footer 的 .ap-send-meta-avatar */
.ap-success-target {
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: #1d1d1f;
}
.ap-success-target-label {
  color: #86868b;
}
/* 跟上面"内容组"(emoji + 标题 + 发送至)明显拉开 —— 内部还是 16px gap,
   按钮单独多顶 40,形成两组分明的留白。 */
/* 尺寸跟随 base .ap-send-btn(13px padding / 15px 字号),不再单独放大 ——
   只多给 margin-top 跟内容组拉开 + min-width 保证居中按钮有存在感。 */
.ap-success-done {
  margin-top: 40px;
  min-width: 180px;
}

/* UploadChooserModal 内的 2 张 UploadCard 容器 —— 不要 page 级 280 min-height
   (那条是给 /user section 撑视觉用的);弹窗里 2 张卡自然伸缩就好。 */
.us-cv-emptywrap--chooser {
  min-height: 0;
  gap: 12px;
}
/* 有上传 item 时:占位符切横排,现在放在 body 第一行(`us-cv-emptywrap--chooser-top`
   再加 margin-bottom 跟下面列表分开) */
.us-cv-emptywrap--row {
  flex-direction: row;
  gap: 12px;
}
.us-cv-emptywrap--row .us-upload-card {
  flex: 1 1 0;
  min-width: 0;
}
/* 占位符在列表上方时跟列表留 16 间距;在底部时(legacy bottombar 用法)不加 */
.us-cv-emptywrap--chooser-top {
  margin-bottom: 16px;
}
/* 紧凑 UploadCard:无副标题、高度更矮、padding 收一点 —— 满足横排 2 列共存 */
.us-upload-card--compact {
  height: 64px;
  padding: 0 16px;
  gap: 8px;
}

/* 删除确认弹窗 —— 复用 .us-modal-backdrop,但 modal 本体比 .us-modal 小一圈
   (max-width 400 vs 700),内边距大 + 上下塞 title / msg / action row 三段。 */
.us-confirm {
  width: 100%;
  max-width: 400px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
    0 30px 80px -20px rgba(0, 0, 0, 0.35);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: us-rise 0.22s cubic-bezier(0.2, 0, 0, 1);
}
.us-confirm-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.us-confirm-msg {
  margin: 0;
  font-size: 15px;
  color: #3c3c43;
  line-height: 1.5;
  letter-spacing: -0.005em;
  /* 长文件名换行,不撑破弹窗 */
  word-break: break-word;
}
.us-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}
.us-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s cubic-bezier(0.2, 0, 0, 1),
    background 0.15s cubic-bezier(0.2, 0, 0, 1),
    opacity 0.15s cubic-bezier(0.2, 0, 0, 1);
}
.us-confirm-btn--cancel {
  background: #ffffff;
  border: 1px solid #86868b;
  color: #1d1d1f;
}
.us-confirm-btn--cancel:hover {
  border-color: #1d1d1f;
}
/* "删除" 走主操作按钮样式 —— 设计系统不让用红色 tint,所以用 ink-1 实底 + 白字。
   语义靠文字 "删除" + 弹窗 title 兜底,不靠颜色。 */
.us-confirm-btn--danger {
  background: #1d1d1f;
  border: 1px solid #1d1d1f;
  color: #ffffff;
}
.us-confirm-btn--danger:hover {
  opacity: 0.85;
}

/* 文件预览浮窗 —— iframe 嵌 PDF/图,大尺寸 modal,头部三块:文件名 / 新页打开 / 关。
   设计系统:white bg / 圆角 / shadow-modal / squircle 不在 CSS 里强制(浏览器
   还在试 corner-shape)。 */
.us-preview {
  width: 90vw;
  max-width: 1200px;
  height: 88vh;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
    0 30px 80px -20px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: us-rise 0.22s cubic-bezier(0.2, 0, 0, 1);
}
.us-preview-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  flex: 0 0 auto;
}
.us-preview-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  color: #1d1d1f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 头部右上"在新页打开"小按钮 —— 跟关闭键并排 */
.us-preview-newtab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: #86868b;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.us-preview-newtab:hover {
  background: #f5f5f5;
  color: #1d1d1f;
}
.us-preview-frame {
  flex: 1 1 auto;
  border: 0;
  background: #f5f5f5;
  width: 100%;
  display: block;
}

.us-modal-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px 12px;
  flex: 0 0 auto;
}
.us-modal-titlewrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 auto;
}
.us-modal-title {
  margin: 0;
  font-size: 16px;
  color: #1d1d1f;
  letter-spacing: -0.005em;
}
.us-modal-count {
  font-size: 13px;
  color: #86868b;
}
.us-modal-close {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #86868b;
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.2, 0, 0, 1);
}
.us-modal-close:hover {
  background: #f5f5f7;
}

.us-modal-search {
  flex: 0 0 auto;
  position: relative;
  margin: 0 20px 12px;
  background: #f5f5f7;
  border-radius: 12px;
  padding: 10px 14px 10px 38px;
  display: flex;
  align-items: center;
}
.us-modal-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #86868b;
  pointer-events: none;
}
.us-modal-search input {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  font-size: 14px;
  color: #1d1d1f;
  letter-spacing: -0.005em;
  padding: 0;
}
.us-modal-search input::placeholder {
  color: #86868b;
}

.us-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 12px 16px;
}
.us-modal-body .jp-list {
  gap: 2px;
}
/* modal 拉宽到 700 后,team 列从 jobs.css 的 200 收窄到 160,gap 保持 24
   —— role 既不挤到最左也不顶 jobs.css 的列宽 */
.us-modal-body .jp-team {
  width: 160px;
}
.us-modal-empty {
  margin: 32px 0;
  text-align: center;
  color: #86868b;
  font-size: 14px;
}

/* ───────── 移动端组件级 override ─────────
   这块必须放在文件最末尾(不能跟顶部的 .us-page 那个 @media 合并)——
   因为下面这些覆盖项的"原始规则" .us-cv-row / .us-upload-card svg / .ap-modal-body
   都在文件中段定义,源顺序在前面的 @media 会被原始规则在 cascade 里盖掉
   (同 specificity 时晚出现的赢)。
   规则尾置之后源顺序天然 cover 一切,不用拿 specificity 互相打架。 */
@media (max-width: 720px) {
  /* 弹窗(ap-modal 壳)横向 padding 全去 —— mobile 屏窄,body 24px gutter
     吃掉太多可读宽度。head 留着 padding 因为右上角 ✕ 不能贴边。
     副作用:ApplyModal 也吃这一刀 —— 它的 .ap-cv-item 自己有 16px padding,
     边到边视觉影响不大,可接受。 */
  .ap-modal-body {
    padding-left: 0;
    padding-right: 0;
  }
  /* 模态里的文件行也去掉自己的 16px 左右 padding —— 跟 body 一起,实现真"行
     内容顶模态边"。**只动模态里的**(`.ap-modal-body` 限定),/user 主页的
     `.us-cv-row` 还套着 .us-sec / .us-page 的 padding 走原 14×16 不变。 */
  .ap-modal-body .us-cv-row {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* ApplyModal 内 .ap-cv-item 去掉自己的 16px 横向 padding —— 主弹窗的
     .ap-form-scroll 已经给了 20px gutter，行自己不再叠 padding，内容贴
     gutter 内边。（picker modal 已经换成 ApModal + us-cv-row，这里只剩
     主弹窗内联 1-3 条 CV 那一处 .ap-cv-item 在用） */
  .ap-cv-item {
    padding-left: 0;
    padding-right: 0;
  }
  /* 但占位符卡(虚线 dropzone)不能贴边 —— 虚线 svg 边贴模态白边会糊,
     给它的容器单补 12 横向 padding,保留虚线视觉。仅 chooser 内的 wrap 加,
     /user 主页空态的 .us-cv-emptywrap 跟着 .us-page 16 padding 已经有边距了。 */
  .us-cv-emptywrap--chooser {
    padding-left: 12px;
    padding-right: 12px;
  }
  /* 但 ApplyModal 空态例外：它外层 .ap-form-scroll 已经给了 20px 横向 gutter，
     再叠 chooser 的 12px 就是双重 padding（卡片左右多出绿边）。这里 scope 到
     .ap-form-section 内单独清零，不动管理弹窗那边。 */
  .ap-form-section .us-cv-emptywrap--chooser {
    padding-left: 0;
    padding-right: 0;
  }
  /* compact 占位符的 icon 整体砍 50% —— mobile 上 40×40 icon 框跟旁边
     "上传 CV / 上传 Portfolio" 文字抢空间;砍到 20×20 文字能放开。
     内层 padding / radius 同比例缩。 */
  .us-upload-card--compact svg {
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 5px;
  }
  /* section 间距 mobile 收紧 —— 桌面 72,手机屏短,52 让"下一节"刚露头作
     滚动提示。`:last-of-type` 仍然 0(底部 .us-page 自己有 padding-bottom)。 */
  .us-sec {
    padding-bottom: 52px;
  }
  /* ApplyModal 宽变体在 mobile:横向贴边(100vw)+ 高度 75dvh,backdrop 上方
     露 25dvh 灰底,视觉上"卡片浮在底部 3/4 区域"。border-radius 回到 20 让
     不贴顶的部分有圆角收口。 */
  .ap-modal--wide {
    max-width: 100vw;
    width: 100vw;
    height: 75dvh;
    border-radius: 20px;
  }
  /* mobile 上头部 padding 收紧 —— 56/64 在窄屏上吃太多空间 */
  .ap-form-scroll {
    padding: 40px 20px 24px;
    gap: 40px;
  }
  /* H1 mobile 30px —— Figma 48px 在手机上"压迫感"太重 */
  .ap-form-title {
    font-size: 25px;
  }
  /* section 内 title ↔ 内容 的间距，mobile 显式钉到 14 */
  .ap-form-section {
    gap: 18px;
  }
  /* section title mobile：17px + 取消加粗（desktop 是 500，mobile 用 400），
     给信号弹窗里的"带上一件东西。"这种次级标题更轻量的视觉重量 */
  .ap-form-section-title {
    font-size: 17px;
    font-weight: 400;
  }
  /* CV 列表 icon mobile 缩 75%：40 → 30，里面的 emoji / 文档 icon 18 → 14，
     圆角 10 → 7.5。手机上 40 看起来太挤了。 */
  .ap-cv-icon {
    width: 30px;
    height: 30px;
    font-size: 14px;
    border-radius: 7.5px;
  }
  /* CV 名字 mobile 也跟着小一档：15 → 13.5，跟缩了的 icon 视觉对齐 */
  .ap-cv-name {
    font-size: 13.5px;
  }
  /* footer mobile padding 收紧 + 文字区 truncate */
  .ap-send-bar {
    padding: 12px 16px;
  }
  .ap-send-btn {
    padding: 11px 20px;
    font-size: 14px;
  }
  /* 关闭按钮往左让一点(整屏 modal 上贴右边过近触屏不舒服) */
  .ap-form-close {
    top: 12px;
    right: 12px;
  }
  /* 成功确认屏 mobile 横向 padding 收一点(高度仍由 .ap-modal--success 钉死) */
  .ap-success {
    padding: 24px;
  }
}