/* =========================================================
   Offerio 求职管家 · 全局样式
   ChatGPT 极简风格：白底 / 深色文本 / 柔和阴影 / 充足留白
   ========================================================= */

:root {
  /* ---- 主色（品牌蓝：logo 墨蓝提亮 + 提高饱和） ---- */
  --accent: #2F6FBE;
  --accent-hover: #2660A8;
  --accent-active: #1E518E;
  --accent-2: #5C96D8;
  --accent-light: #EAF2FB;
  --accent-soft: rgba(47, 111, 190, 0.12);

  /* ---- 中性色 ---- */
  --bg: #FFFFFF;              /* 页面背景 */
  --bg-2: #F7F7F8;            /* 次级填充（表头 / 空态 / 列底） */
  --sidebar-bg: #F9F9F9;      /* 侧边栏 */
  --hover: #ECECEC;           /* 悬停填充 */
  --hover-strong: #E6E6E6;    /* 选中/激活填充 */
  --card: #FFFFFF;
  --text: #0D0D0D;
  --text-2: #5D5D5D;
  --text-3: #6E6E6E;
  --border: #E5E5E5;
  --border-strong: #D9D9D9;
  --divider: #EDEDED;

  /* ---- 语义色 ---- */
  --danger: #D92D20;
  --danger-hover: #B42318;
  --danger-soft: #FEF3F2;
  --success: #12805C;
  --success-soft: #ECFDF3;
  --warning: #B54708;
  --warning-soft: #FFFAEB;
  --info: #2F6FBE;
  --coral: #B54708;
  --coral-light: #FFF4ED;

  /* ---- 兼容别名（旧变量名 → 新令牌，现有选择器无需改动） ---- */
  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --primary-soft: var(--accent-light);

  /* ---- 圆角 / 阴影 ---- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-card: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 2px 10px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14);

  /* ---- 排版 ---- */
  --font-body: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: var(--font-body);
  --fs-h1: 22px;
  --fs-h2: 17px;
  --fs-h3: 15px;
  --fs-body: 14px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --lh-tight: 1.3;
  --lh-body: 1.65;

  /* ---- 动效 ---- */
  --dur-1: .15s;
  --dur-2: .24s;
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---- 布局 ---- */
  --sidebar-w: 248px;         /* 左侧栏展开宽度 */
  --sidebar-w-rail: 72px;     /* 左侧栏收起宽度（仅图标） */
}

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

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.hidden { display: none !important; }
.muted { color: var(--text-2); }
.small { font-size: 12px; }
.mb-16 { margin-bottom: 16px; }
.mt-16 { margin-top: 16px; }
.text-center { text-align: center; }

/* ---------------- 布局骨架（ChatGPT 风格：固定左侧栏 + 右侧主区） ---------------- */
#app { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 10px 10px 12px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  z-index: 60;
  overflow: hidden;
  transition: width .24s cubic-bezier(.16, 1, .3, 1), transform .24s cubic-bezier(.16, 1, .3, 1);
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 2px 10px;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  transition: background-color var(--dur-1) ease;
}
.sidebar-brand:hover { background: var(--hover); text-decoration: none; }
/* 品牌 logo：整图为「图形 + 文字」横向组合，按高度定尺等比展示 */
.sidebar-brand-logo {
  display: block;
  flex: none;
  height: 30px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.sidebar-collapse {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.sidebar-collapse:hover { background: var(--hover); color: var(--text); }

.nav-items {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px;
  overflow-y: auto;
  overflow-x: hidden;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.nav-item:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--hover-strong); color: var(--text); font-weight: 600; }
.nav-item svg { flex: none; width: 18px; height: 18px; color: var(--text-2); }
.nav-item:hover svg,
.nav-item.active svg { color: var(--text); }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.sidebar-foot {
  flex: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background-color var(--dur-1) ease;
}
.sidebar-user:hover { background: var(--hover); }
.sidebar-avatar {
  position: relative;
  overflow: hidden;
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
/* 微信头像：覆盖在首字母之上，加载失败时由 JS 移除该节点 */
.sidebar-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.sidebar-user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.sidebar-user-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-user-sub {
  font-size: 11.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.sidebar-logout:hover { background: var(--hover); color: var(--text); }
.sidebar-logout svg { flex: none; }

/* 移动端抽屉遮罩（桌面/平板隐藏） */
.sidebar-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}
.sidebar-scrim.show { opacity: 1; pointer-events: auto; }

/* 收起态（桌面/平板）：仅保留图标轨道 */
body.sidebar-collapsed .sidebar { width: var(--sidebar-w-rail); padding: 10px 8px 12px; }
body.sidebar-collapsed .sidebar-head { flex-direction: column; gap: 4px; padding-bottom: 8px; }
body.sidebar-collapsed .sidebar-brand { padding: 4px; }
/* 收起态整图放不下，按左对齐裁出左侧图形部分（原图图形约占左侧 19% 宽度）当图标 */
body.sidebar-collapsed .sidebar-brand-logo {
  width: 30px;
  height: 30px;
  max-width: none;
  object-fit: cover;
  object-position: left center;
}
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .sidebar-user-meta,
body.sidebar-collapsed .sidebar-logout-text { display: none; }
body.sidebar-collapsed .nav-item { justify-content: center; padding: 9px 0; }
body.sidebar-collapsed .sidebar-user { justify-content: center; padding: 8px 0; }
body.sidebar-collapsed .sidebar-logout { justify-content: center; padding: 9px 0; }

/* 平板（≤1024px）：左侧栏保持图标轨道，收起按钮隐藏 */
@media (max-width: 1024px) {
  .sidebar-collapse { display: none; }
}

/* 移动端（≤640px）：左侧栏变抽屉，顶栏汉堡按钮开合 */
@media (max-width: 640px) {
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 264px;
    max-width: 84vw;
    height: 100dvh;
    padding: 12px 10px;
    transform: translateX(-100%);
    z-index: 70;
  }
  body.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
  }
  .topbar-toggle { display: inline-flex; }
  .topbar { padding: 0 12px; }
  .content { padding: 14px 14px 28px; }
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  min-width: 0;
  background: var(--bg);
}
/* 传统单页（job-detail 等）：主区随窗口滚动 */
.main-legacy { height: auto; min-height: 100vh; overflow: auto; }

/* 内容滚动容器：单页布局，仅展示当前激活页面 */
.scroll-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.page-section {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  min-height: 56px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.topbar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.topbar-toggle:hover { background: var(--bg-2); color: var(--text); }
.topbar-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-spacer { flex: 1; }

.content { padding: 22px 24px 40px; flex: 1; min-width: 0; width: 100%; }

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--card);
  color: var(--text);
  transition: all .18s;
  white-space: nowrap;
  font-family: inherit;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(47, 111, 190, .22); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); box-shadow: 0 2px 8px rgba(47, 111, 190, .26); }
.btn-outline { border-color: var(--border-strong); background: var(--card); color: var(--text); }
.btn-outline:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--danger-hover); }
.btn-danger-ghost { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger-ghost:hover:not(:disabled) { background: var(--danger-soft); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }

.icon-btn {
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.icon-btn:hover { color: var(--danger); background: var(--danger-soft); }

/* ---------------- 表单 ---------------- */
.input, .select, .textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--card);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { min-height: 84px; resize: vertical; }
.textarea-sm { min-height: 52px; }

.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }

/* ---------------- 多选选择器（msel，如：城市多选） ---------------- */
.msel { position: relative; }
.msel-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 38px;
  max-height: 108px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 32px 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  scrollbar-width: thin;
}
.msel-control::-webkit-scrollbar { width: 8px; }
.msel-control::-webkit-scrollbar-track { background: transparent; }
.msel-control::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.msel-control:hover { border-color: var(--accent-2); }
.msel.open .msel-control { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.msel-placeholder { color: var(--text-3); font-size: 14px; padding-left: 4px; }
.msel-caret {
  position: absolute;
  right: 10px;
  top: 11px;
  width: 15px;
  height: 15px;
  color: var(--text-3);
  pointer-events: none;
  transition: transform .18s;
}
.msel.open .msel-caret { transform: rotate(180deg); }
.msel-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 3px 3px 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-light);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}
/* 城市名过长时省略，保证「×」始终可见 */
.msel-chip > span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.msel-chip-x {
  flex: none;
  border: none;
  background: none;
  padding: 0 4px;
  border-radius: 50%;
  color: var(--accent);
  opacity: .55;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  font-family: inherit;
}
.msel-chip-x:hover { opacity: 1; background: var(--accent-soft); }
.msel-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.msel-search { padding: 8px; border-bottom: 1px solid var(--divider); }
.msel-search .input { height: 32px; padding: 0 10px; font-size: 13px; }
.msel-list {
  max-height: 264px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px;
  scrollbar-width: thin;
}
.msel-list::-webkit-scrollbar { width: 8px; }
.msel-list::-webkit-scrollbar-track { background: transparent; }
.msel-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.msel-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
/* 名称吸收剩余宽度并允许收缩：右侧的勾选/角标/箭头是固定宽，
   绝不会被长名字挤出可视区（Windows 的实体滚动条会吃掉 17px 宽度，Chrome 上尤其容易踩） */
.msel-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 省行 = 分组标题（点它选中整个省），下辖城市紧随其后 */
.msel-parent { background: var(--bg-2); font-weight: 600; }
.msel-parent:hover { background: var(--hover); }
.msel-opt:not(.msel-parent):hover { background: var(--bg-2); }
.msel-opt.on { color: var(--accent); font-weight: 600; }
.msel-box {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--card);
  color: transparent;   /* 勾是内联 SVG，用 currentColor：未选中透明，选中变白 */
}
.msel-box svg { display: block; }
.msel-opt.on .msel-box { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 二级：省 → 城市（子项缩进 + 右侧省名；省名命中时不自动下钻） */
.msel-child { padding-left: 22px; }
.msel-child .msel-box { width: 14px; height: 14px; }
.msel-sub {
  flex: none;
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
}
.msel-badge {
  flex: none;
  margin-left: auto;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 行右侧固定区（省名标注 / 已选计数 / 展开按钮）：永远贴右，不会被长名字挤出去 */
.msel-tail {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
/* 省行上的「全省」标记：明确点这一行 = 选中整个省 */
.msel-all {
  flex: none;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 400;
}
/* 下拉标识：只放一个箭头图标（内联 SVG，非字体符号），展开时翻转 180° */
.msel-more {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 5px;
  color: var(--text-3);
  cursor: pointer;
  font-family: inherit;
}
.msel-more:hover { background: var(--hover); color: var(--accent); }
.msel-more .msel-caret-sm { transition: transform .16s var(--ease-out); }
.msel-more.on { color: var(--accent); }
.msel-more.on .msel-caret-sm { transform: rotate(180deg); }
.msel-empty { padding: 14px; text-align: center; color: var(--text-3); font-size: 13px; }
.msel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-top: 1px solid var(--divider);
  font-size: 12px;
  color: var(--text-3);
}
.msel-hint {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.msel-foot .msel-clear { flex: none; }
.msel-clear {
  border: none;
  background: none;
  padding: 0;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.msel-clear:hover { text-decoration: underline; }
.msel-hint.is-error { color: var(--danger); cursor: pointer; text-decoration: underline; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* ---------------- 卡片 ---------------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}
.card-pad { padding: 20px; }
.card-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
/* 标题前置图标（内联 SVG）：与文字垂直居中，间距统一 */
.card-title-ic { display: flex; align-items: center; gap: 8px; }
.card-title-ic svg { flex: none; color: var(--accent); }

/* ---------------- 表格 ---------------- */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  padding: 12px 14px;
  background: var(--bg-2);
  font-size: 12px;
  color: var(--text-2);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--bg-2); }

/* ---------------- 标签 / Tab ---------------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tab {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--card);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2);
  transition: all .15s;
  font-family: inherit;
}
.tab:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.tab.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(47, 111, 190, .22); }

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  line-height: 1.6;
  background: var(--accent-light);
  color: var(--accent);
  white-space: nowrap;
}
.badge-gray { background: var(--bg-2); color: var(--text-2); }
.badge-green { background: var(--success-soft); color: var(--success); }

/* ---------------- 工具条 ---------------- */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------------- 筛选栏（校招岗位库） ---------------- */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(37, 50, 71, 0.06);
  padding: 16px 18px;
  margin-bottom: 18px;
}
/* 搜索行：关键词 + 查询按钮 */
.fb-search { position: relative; display: flex; align-items: center; gap: 10px; }
.fb-search > .fb-ic {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); pointer-events: none;
}
.fb-search .input { flex: 1; height: 40px; padding: 0 16px 0 40px; font-size: 14px; border-radius: 8px; }
.fb-search .btn { height: 40px; padding: 0 20px; font-size: 13px; border-radius: 8px; flex-shrink: 0; }
.fb-search .btn svg { width: 15px; height: 15px; }
/* 筛选网格 */
.fb-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fb-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fb-field label { font-size: 12px; color: var(--text-2); }
.fb-ctrl { position: relative; min-width: 0; }
.fb-ctrl .input, .fb-ctrl .select { width: 100%; height: 36px; padding: 0 10px; font-size: 13px; }
.fb-ctrl select { appearance: none; -webkit-appearance: none; padding-right: 30px; }
.fb-input > svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-3); pointer-events: none;
}
.fb-input .input { padding-left: 32px; }

/* ---------------- 分页 ---------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.page-info { color: var(--text-2); font-size: 13px; }

/* ---------------- 看板 ---------------- */
.kanban {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  align-items: flex-start;
  padding-bottom: 12px;
}
.kanban-col {
  min-width: 282px;
  max-width: 330px;
  flex: 1;
  background: rgba(28, 25, 23, 0.028);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 14px;
  padding: 2px 4px;
}
.kanban-col-count {
  background: var(--card);
  border-radius: 999px;
  padding: 0 8px;
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}

.job-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s;
  position: relative;
}
.job-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(62, 95, 138, .12); }
.job-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.job-company { font-weight: 600; font-size: 14px; }
.job-position { color: var(--text-2); font-size: 13px; margin: 2px 0 8px; }
.job-meta { color: var(--text-3); font-size: 12px; margin-bottom: 2px; }
.job-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 6px; }
.job-card-foot .select { padding: 4px 6px; font-size: 12px; }

.sat-star { cursor: pointer; font-size: 15px; line-height: 1; transition: transform .12s; }
.sat-star:hover { transform: scale(1.25); }

/* ---------------- 岗位列表（岗位库） ---------------- */
.job-list { display: flex; flex-direction: column; gap: 12px; }
.job-list-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  cursor: pointer;
  transition: box-shadow .15s;
}
.job-list-item:hover { box-shadow: 0 4px 14px rgba(62, 95, 138, .1); }
.job-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.job-list-title { font-size: 15px; font-weight: 600; }
.job-list-sub { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; color: var(--text-2); font-size: 13px; }
.job-list-sub span { display: inline-flex; align-items: center; gap: 5px; }
.job-list-sub span i { display: inline-flex; flex: none; font-style: normal; color: var(--text-3); }
/* 副信息行图标统一为 13px：同一行内不同来源的图标（薪资/标签/日期/截止）尺寸需一致 */
.job-list-sub span i svg { width: 13px; height: 13px; }
/* 岗位卡片的匹配理由：图标 + 文本两列对齐 */
.rec-reason { display: flex; gap: 6px; margin-top: 8px; }
.rec-reason svg { flex: none; margin-top: 3px; color: var(--accent-2); }
.job-list-detail { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 12px; display: none; }
.job-list-item.open .job-list-detail { display: block; }
.detail-block { margin-bottom: 10px; }
.detail-block h4 { font-size: 13px; color: var(--text-2); margin-bottom: 4px; font-weight: 600; }
.detail-block p, .detail-block li { font-size: 13px; line-height: 1.7; color: var(--text); }
.detail-block ul { padding-left: 18px; }

/* ---------------- 公司卡片 ---------------- */
.company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.company-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .15s;
}
.company-card:hover { box-shadow: 0 4px 14px rgba(62, 95, 138, .1); }
.company-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.company-line { font-size: 13px; color: var(--text-2); }
.company-line i { font-style: normal; color: var(--text-3); margin-right: 4px; }

/* ---------------- 弹窗 ---------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 23, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  padding: 24px;
}
.modal h3 { font-size: 16px; margin-bottom: 16px; padding-right: 24px; }
.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text-2);
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover { color: var(--text); }

/* ---------------- Toast ---------------- */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  padding: 10px 16px;
  border-radius: var(--radius);
  color: #fff;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-8px);
  transition: all .25s;
  max-width: 360px;
  word-break: break-word;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
.toast.info { background: var(--info); }

/* ---------------- SSE 加载动画 ---------------- */
.sse-loading { display: inline-flex; gap: 4px; padding: 6px 0; }
.sse-loading span {
  width: 6px; height: 6px;
  background: var(--primary);
  border-radius: 50%;
  animation: sse-bounce .9s infinite ease-in-out;
}
.sse-loading span:nth-child(2) { animation-delay: .15s; }
.sse-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes sse-bounce {
  0%, 80%, 100% { transform: scale(.6); opacity: .45; }
  40% { transform: scale(1); opacity: 1; }
}

/* ---------------- AI 聊天 ---------------- */
.chat-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  min-height: 300px;
  max-height: 460px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.msg {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.user { align-self: flex-end; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: #fff; border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: var(--bg-2); color: var(--text); border-bottom-left-radius: 4px; }
.msg.empty-hint { align-self: center; background: transparent; color: var(--text-3); font-size: 13px; }
.chat-input-row { display: flex; gap: 10px; align-items: flex-start; }
.chat-input-row .textarea { flex: 1; min-height: 64px; }

/* ---------------- 简历编辑 ---------------- */
.module-card { margin-bottom: 16px; padding: 20px; }
.module-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.module-head h3 { font-size: 15px; }
.exp-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 12px;
  background: var(--bg);
}
.exp-item-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.exp-item-head .exp-title { flex: 1; min-width: 200px; }
.bullet-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.bullet-row .textarea { flex: 1; min-height: 40px; }

/* 子简历模块顺序 */
.order-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
}
.checkbox-line { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; }
.checkbox-line input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }

/* ---------------- AI 荐岗 ---------------- */
.recommend-layout { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
/* 吸顶偏移必须 ≤ .content 的上内边距：否则静止时左栏会被向下推开，与右栏卡片顶部错位 */
.recommend-layout .rec-filter { position: sticky; top: 22px; }
@media (max-width: 760px) { .recommend-layout .rec-filter { top: 16px; } }
@media (max-width: 640px) { .recommend-layout .rec-filter { top: 14px; } }
.rec-right { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rec-analysis { flex: none; }
.rec-analysis-inner { max-height: 300px; overflow-y: auto; padding-right: 4px; }
.rec-analysis-inner h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  margin: 14px 0 8px;
  color: var(--text);
}
.rec-analysis-inner h4 svg { flex: none; color: var(--accent); width: 15px; height: 15px; }
.rec-analysis-inner .plain { color: var(--text-2); line-height: 1.7; }
.rec-results { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rec-results-inner {
  flex: 1;
  min-height: 380px;
  max-height: calc(100vh - 430px);
  overflow-y: auto;
  padding-right: 4px;
}
.recommend-result h4 { font-size: 14px; margin: 14px 0 8px; color: var(--text); }
.recommend-result .plain { color: var(--text-2); line-height: 1.7; }
/* 无简历空态图标（内联 SVG，居中显示） */
.rec-empty-ic { margin-bottom: 16px; line-height: 0; color: var(--accent); }
.score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  font-size: 13px;
}
.keyword-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.keyword-chips span {
  background: var(--bg-2);
  color: var(--text-2);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
}

/* ---------------- 讨论区 ---------------- */
.post-card { margin-bottom: 14px; padding: 18px 20px; }
.post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.post-nickname { font-weight: 600; font-size: 14px; }
.post-time { color: var(--text-3); font-size: 12px; }
.post-content { font-size: 14px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.post-actions { margin-top: 10px; display: flex; gap: 12px; align-items: center; }
.comments-area { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 12px; }
.comment-item { display: flex; gap: 8px; padding: 6px 0; font-size: 13px; }
.comment-item .c-nick { color: var(--primary); font-weight: 600; white-space: nowrap; }
.comment-item .c-time { color: var(--text-3); font-size: 12px; white-space: nowrap; }

/* ---------------- 登录 / 注册 ---------------- */
.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 40%);
  padding: 20px;
}
.auth-card {
  width: 400px;
  max-width: 94vw;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px;
}
.auth-brand { text-align: center; margin-bottom: 24px; }
/* 登录页品牌 logo：整图等比展示，窄屏下自动缩小不溢出卡片 */
.auth-logo {
  display: block;
  margin: 0 auto 12px;
  height: 48px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.auth-brand p { color: var(--text-2); font-size: 13px; margin-top: 6px; }
.auth-tabs {
  display: flex;
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: 24px;
}
.auth-tab {
  flex: 1;
  padding: 9px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  color: var(--text-2);
  font-family: inherit;
  transition: all .15s;
}
.auth-tab.active { background: var(--card); color: var(--accent); font-weight: 600; box-shadow: var(--shadow); }

/* 登录页：用户协议 / 隐私条款 同意行（未勾选时登录按钮前先抖动提示该行） */
.auth-agree {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin: 4px 0 14px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
}
.auth-agree-check {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin: 0 6px 0 0;
  border: 1.5px solid var(--border-strong, #cbd5e1);
  border-radius: 4px;
  background: var(--card);
  cursor: pointer;
  position: relative;
  flex: none;
  transition: background .15s ease, border-color .15s ease;
}
.auth-agree-check:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.auth-agree-check:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.auth-agree-text { cursor: pointer; user-select: none; }
.auth-link {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.auth-link:hover { text-decoration: underline; }
@keyframes agreeShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.auth-agree.shake { animation: agreeShake .35s ease; }

/* ---------------- 用户协议 / 隐私条款（独立空白页） ---------------- */
.legal-body {
  background: var(--bg);
  padding: 40px 20px 72px;
}
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 44px 52px 56px;
}
.legal-head { border-bottom: 1px solid var(--border); padding-bottom: 18px; margin-bottom: 26px; }
.legal-head h1 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.legal-head .legal-meta { color: var(--text-3); font-size: 12.5px; }
.legal-toc {
  background: var(--bg-2);
  border-radius: var(--radius-card);
  padding: 14px 18px;
  margin-bottom: 30px;
  font-size: 13.5px;
}
.legal-toc-title { font-weight: 700; margin-bottom: 8px; }
.legal-toc ol { margin: 0; padding-left: 20px; color: var(--text-2); }
.legal-toc a { color: var(--text-2); text-decoration: none; }
.legal-toc a:hover { color: var(--accent); }
.legal-body-text h2 { font-size: 17px; font-weight: 700; margin: 30px 0 12px; }
.legal-body-text h3 { font-size: 14.5px; font-weight: 700; margin: 16px 0 6px; }
.legal-body-text p { font-size: 14px; line-height: 1.9; color: var(--text); margin: 8px 0; }
.legal-body-text strong { font-weight: 700; color: var(--ink, #1f2430); }
.legal-placeholder {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-3);
}
.legal-placeholder .legal-placeholder-ico {
  width: 58px; height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.legal-placeholder h2 { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.legal-placeholder p { font-size: 13.5px; line-height: 1.8; }
@media (max-width: 640px) {
  .legal-page { padding: 28px 20px 40px; }
  .legal-head h1 { font-size: 20px; }
}

/* ---------------- 空状态 ---------------- */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-3);
}
.empty-state .empty-icon { font-size: 40px; margin-bottom: 12px; }
.empty-state p { margin-bottom: 16px; }

/* ---------------- 详情页 ---------------- */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-bottom: 18px; }
.detail-item .k { color: var(--text-3); font-size: 12px; margin-bottom: 2px; }
.detail-item .v { font-size: 14px; word-break: break-word; }
.section-title { font-size: 15px; font-weight: 600; margin: 22px 0 12px; display: flex; align-items: center; gap: 8px; }

.ai-tabs { display: flex; gap: 8px; margin-bottom: 14px; }

/* =========================================================
   index2 版型 · 岗位看板（上传CTA / 提示条 / 筛选卡 / 推荐表格）
   ========================================================= */

/* 页面进入动画 */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }
.delay-4 { animation-delay: 0.32s; }
.delay-5 { animation-delay: 0.4s; }

/* 上传 CTA */
.upload-cta {
  background: var(--card);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-card);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.upload-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, var(--accent-light) 0%, transparent 55%);
  pointer-events: none;
}
.upload-cta:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.upload-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.upload-text h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.upload-text p { margin: 0; color: var(--text-2); font-size: 13px; }
.upload-btn {
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 1px 2px rgba(47, 111, 190, .22);
  white-space: nowrap;
  font-family: inherit;
}
.upload-btn:hover {
  transform: translateY(-1px);
  background: var(--accent-hover);
  box-shadow: 0 2px 8px rgba(47, 111, 190, .26);
}

/* 提示条 */
.alert-banner {
  background: linear-gradient(90deg, var(--coral-light) 0%, #fff7ed 100%);
  border: 1px solid #fed7aa;
  border-radius: 16px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c2410c;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 24px;
}

/* 筛选卡 */
.filter-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.filter-tab {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.filter-tab:hover { background: var(--bg-2); color: var(--text); }
.filter-tab.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 2px 8px rgba(62, 95, 138, 0.2);
}
.filter-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.filter-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.filter-section:hover {
  border-color: var(--accent-2);
  box-shadow: 0 2px 8px rgba(62, 95, 138, 0.08);
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.filter-label {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.chip:hover { border-color: var(--accent-2); color: var(--accent); }
.chip.active {
  background: var(--accent-light);
  border-color: var(--accent-2);
  color: var(--accent);
  font-weight: 600;
}
.chip-toggle { display: inline-flex; align-items: center; gap: 6px; }
.toggle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
}
.chip.active .toggle-dot { background: var(--accent); }

/* 来源 */
.sources-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.source-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 12px;
  background: var(--bg-2);
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.2s ease;
}
.source-item:hover { background: var(--accent-light); color: var(--accent); }
.source-logo {
  width: 16px;
  height: 16px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 8px;
  font-weight: 700;
}

/* 推荐表格 */
.table-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}
.toolbar-title {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toolbar-count {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
  background: var(--bg-2);
  padding: 2px 8px;
  border-radius: 20px;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  min-width: 220px;
  transition: all 0.2s ease;
}
.search-box:focus-within {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.search-box input {
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  width: 100%;
}
.search-box input::placeholder { color: var(--text-3); }

.table-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table-card thead th {
  text-align: left;
  padding: 14px 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table-card tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease;
}
.table-card tbody tr:last-child { border-bottom: none; }
.table-card tbody tr:hover { background: rgba(62, 95, 138, 0.04); }
.table-card tbody td {
  padding: 16px;
  vertical-align: middle;
  white-space: nowrap;
}
.col-date { color: var(--text-3); font-size: 12px; }
.col-tag {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}
.tag-hot { background: #fee2e2; color: #dc2626; }
.tag-new { background: var(--coral-light); color: #c2410c; }
.tag-urgent { background: var(--accent-light); color: var(--accent); }
.company-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.company-logo {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--accent);
  font-size: 12px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.company-name { font-weight: 700; color: var(--text); }
.company-industry { font-size: 12px; color: var(--text-2); }
.match-score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--text);
}
.score-bar {
  width: 48px;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-2);
  overflow: hidden;
}
.score-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.job-title {
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.job-title:hover { color: var(--accent); }
.job-tag {
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  background: var(--bg-2);
  color: var(--text-2);
}
.job-tag.match { background: var(--coral-light); color: var(--coral); }
.stars {
  display: inline-flex;
  gap: 2px;
  color: #fbbf24;
}
.rating-count {
  font-size: 11px;
  color: var(--text-3);
  margin-left: 4px;
}
.col-plain { color: var(--text-2); }

.row-tag-select {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text-2);
  outline: none;
  cursor: pointer;
  font-family: inherit;
  max-width: 110px;
}
.row-tag-select:focus { border-color: var(--accent-2); }

/* 行进入动画 */
@keyframes rowFadeIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
.row-animate {
  opacity: 0;
  animation: rowFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 悬浮助手 */
.fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral) 0%, #fb923c 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.3);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
}
.fab:hover {
  transform: scale(1.1) rotate(8deg);
  box-shadow: 0 8px 28px rgba(249, 115, 22, 0.4);
}

/* =========================================================
   校招岗位库 · 公司目录 + 分页（ChatGPT 极简风）
   配色统一走全局令牌：brand = --accent · card = --card · border = --border
   ========================================================= */
:root {
  --ap-brand: var(--accent);
  --ap-brand-hover: var(--accent-hover);
  --ap-border: var(--border);
  --ap-input-border: var(--border-strong);
  --ap-text: var(--text);
  --ap-muted: var(--text-3);
  --ap-accent: var(--accent-light);
  --ap-muted-bg: var(--bg-2);
  --ap-success-bg: var(--accent-light);
  --ap-success: var(--success);
}

/* 页面容器 */
.ap-page { background: var(--bg); min-height: 100%; border-radius: 8px; padding: 20px; }

/* 搜索 + 筛选工具栏（统一卡片） */
.ap-toolbar {
  background: var(--card);
  border: 1px solid var(--ap-border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.ap-search-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ap-search-box { position: relative; flex: 1; min-width: 240px; max-width: 480px; }
.ap-search-box input {
  width: 100%; height: 40px; padding: 0 36px 0 40px;
  border: 1px solid var(--ap-input-border); border-radius: 10px;
  background: var(--card); color: var(--ap-text); font-size: 14px; outline: none;
  transition: border-color .18s, box-shadow .18s; font-family: inherit;
}
.ap-search-box input:focus { border-color: var(--ap-brand); box-shadow: 0 0 0 3px rgba(62, 95, 138, 0.12); }
.ap-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ap-muted); display: flex; align-items: center;
}
.ap-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border: none; border-radius: 999px;
  background: var(--ap-muted-bg); color: var(--ap-muted); cursor: pointer;
  font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.ap-total { font-size: 13px; color: var(--ap-muted); white-space: nowrap; }

/* 筛选胶囊 */
.ap-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ap-select-wrap { position: relative; }
.ap-select-wrap select {
  appearance: none; -webkit-appearance: none;
  height: 36px; padding: 0 34px 0 14px;
  border: 1px solid var(--ap-border); border-radius: 999px;
  background: var(--card); color: var(--ap-text); font-size: 13px; cursor: pointer;
  outline: none; transition: border-color .18s, background .18s; font-family: inherit;
}
.ap-select-wrap select:hover { border-color: var(--ap-brand); }
.ap-select-wrap select.ap-active { border-color: var(--ap-brand); background: var(--ap-accent); font-weight: 600; }
.ap-chevron {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--ap-muted); pointer-events: none;
}
.ap-city { position: relative; width: 150px; }
.ap-city svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--ap-muted); }
.ap-city input {
  width: 100%; height: 36px; padding: 0 12px 0 32px;
  border: 1px solid var(--ap-border); border-radius: 999px;
  background: var(--card); color: var(--ap-text); font-size: 13px; outline: none; font-family: inherit;
}
.ap-reset-btn {
  height: 36px; padding: 0 12px; border: none; background: transparent;
  color: var(--ap-brand); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}

/* 插件横幅 */
.ap-banner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 4px 0 24px; padding: 14px 18px;
  border: 1px solid var(--ap-border); border-radius: 12px;
  background: var(--ap-accent); box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.ap-banner p { margin: 0; font-size: 14px; color: #374151; line-height: 1.5; flex: 1; min-width: 200px; }
.ap-banner strong { color: var(--ap-text); font-weight: 600; }
.ap-pill-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 34px; padding: 0 16px; border-radius: 999px;
  background: var(--ap-brand); color: #fff; font-size: 13px; font-weight: 600;
  text-decoration: none; transition: background .18s; white-space: nowrap;
}
.ap-pill-btn:hover { background: var(--ap-brand-hover); text-decoration: none; }
.ap-pill-btn-sm { height: 26px; padding: 0 12px; font-size: 12px; }

/* 表格卡片 */
.ap-table-card {
  border: 1px solid var(--ap-border); border-radius: 12px;
  background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow: hidden;
}
.ap-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ap-table th {
  padding: 8px 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ap-muted); text-align: left;
  border-bottom: 1px solid var(--ap-border); background: var(--ap-muted-bg);
  white-space: nowrap;
}
.ap-table td {
  padding: 8px 10px; font-size: 13px; line-height: 1.35; color: #374151;
  border-bottom: 1px solid var(--ap-border); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 0;
}
.ap-table tr.ap-row:hover { background: var(--ap-accent); }
.ap-table td.ap-td-nowrap { white-space: normal; word-break: break-all; }

/* 徽章 */
.ap-badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.ap-badge-gray { background: var(--ap-muted-bg); color: var(--ap-muted); }
.ap-badge-green { background: var(--ap-success-bg); color: var(--ap-success); }

/* 移动端卡片 */
.ap-mobile { display: none; }
.ap-m-card { padding: 16px; border-bottom: 1px solid var(--ap-border); background: var(--card); }
.ap-m-card:last-child { border-bottom: none; }
.ap-m-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ap-m-name {
  font-size: 15px; font-weight: 600; color: var(--ap-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}
.ap-m-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ap-m-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.ap-m-meta span { font-size: 12px; color: var(--ap-muted); }
.ap-m-loc { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: #374151; font-size: 13px; }
.ap-m-pos {
  font-size: 13px; color: #374151; margin-bottom: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-m-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ap-m-date { font-size: 13px; color: var(--ap-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
  .ap-desktop { display: none; }
  .ap-mobile { display: block; }
}

/* 骨架屏 */
@keyframes ap-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.ap-skeleton {
  height: 11px; border-radius: 4px;
  background: linear-gradient(90deg, var(--ap-muted-bg) 25%, var(--ap-accent) 50%, var(--ap-muted-bg) 75%);
  background-size: 400px 100%; animation: ap-shimmer 1.2s ease-in-out infinite;
}

/* Apple 分页 */
.ap-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 24px; padding-bottom: 8px; flex-wrap: wrap;
}
.ap-pagination button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 10px; border-radius: 12px;
  border: 1px solid var(--ap-border); background: var(--card); color: var(--ap-text);
  font-size: 13px; cursor: pointer; transition: background .18s; font-family: inherit;
}
.ap-pagination button:hover:not(:disabled):not(.active) { background: var(--ap-accent); }
.ap-pagination button.active { background: var(--ap-brand); color: #fff; border-color: var(--ap-brand); }
.ap-pagination button:disabled { opacity: .42; cursor: not-allowed; }

/* =========================================================
   简历展示（高端版）：hero 区 + 档案卡栅格 + 简历文件卡
   ========================================================= */
.resume-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.resume-hero-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  background: linear-gradient(120deg, var(--text) 0%, var(--accent) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.resume-hero-sub { color: var(--text-2); font-size: 14px; }
.resume-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.resume-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px;
  margin-bottom: 38px;
}

.resume-card {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 26px 26px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.resume-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: 0;
  transition: opacity 0.25s;
}
.resume-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.resume-card:hover::before { opacity: 1; }

.resume-card-top { display: flex; gap: 16px; align-items: center; }
.resume-ico {
  width: 54px; height: 54px;
  border-radius: 18px;
  flex: none;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(47, 111, 190, 0.22);
}
.resume-card-master-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 70%, var(--accent-light) 100%);
}
.resume-card-info { min-width: 0; flex: 1; }
.resume-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.resume-name-text {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resume-name-input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--accent-2);
  border-radius: 8px;
  padding: 4px 9px;
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-light);
}
.resume-rename-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: all .2s ease;
}
.resume-rename-btn:hover {
  color: var(--accent);
  border-color: var(--accent-2);
  background: var(--accent-light);
}
.resume-sub { font-size: 12.5px; color: var(--text-2); margin-top: 5px; }
.badge-master {
  display: inline-block;
  flex: none;
  vertical-align: 2px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 99px;
}

.resume-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
}
.meta-chip svg { width: 13px; height: 13px; color: var(--accent); flex: none; }

.resume-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

/* ---------- 在线简历拖拽排序 ---------- */
.resume-card[draggable="true"] { cursor: grab; }
.resume-card[draggable="true"]:active { cursor: grabbing; }
.resume-card-grip {
  position: absolute;
  top: 14px; right: 14px;
  color: var(--text-2);
  opacity: 0;
  transition: opacity .2s ease;
  display: flex; align-items: center; justify-content: center;
}
.resume-card:hover .resume-card-grip { opacity: .55; }
.resume-card-grip:hover { opacity: 1; }
.resume-card.dragging {
  opacity: .45;
  transform: scale(.97);
  border-style: dashed;
}
.resume-card.drag-over {
  border-color: var(--accent);
  border-style: dashed;
  box-shadow: 0 0 0 3px var(--accent-light), var(--shadow);
  transform: translateY(-2px);
}

/* ---------- 上传记录：并入「上传简历」卡片内部，与上传行以分隔线区隔（不单独成模块） ---------- */
.resume-files-hint {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
}
.upload-records-block {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.upload-records-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.upload-records-title { font-size: 13px; font-weight: 700; }
.upload-records {
  display: flex;
  flex-direction: column;
}
.upload-record {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
}
.upload-record:last-child { border-bottom: 0; padding-bottom: 2px; }
.upload-record-ico {
  width: 32px; height: 32px;
  border-radius: 9px;
  flex: none;
  background: var(--accent-light);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.upload-record-ico svg { width: 16px; height: 16px; }
.upload-record-info { flex: 1; min-width: 0; }
.upload-record-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-record-sub {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  margin-top: 3px;
}
.upload-record-sub svg { width: 12px; height: 12px; flex: none; }
.upload-record-actions { display: flex; gap: 6px; flex: none; }

.upload-records-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 0 4px;
  color: var(--text-3);
  font-size: 12.5px;
}
.upload-records-empty svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 640px) {
  .upload-record { flex-wrap: wrap; }
  .upload-record-actions { width: 100%; }
  .upload-record-actions .btn { flex: 1; justify-content: center; }
}

.resume-empty {
  background: var(--card);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-card);
  padding: 60px 24px;
  text-align: center;
}
.resume-empty-ico {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.resume-empty-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.resume-empty-sub { color: var(--text-2); font-size: 13.5px; max-width: 380px; margin: 0 auto; }

/* 上传简历模块：上传卡片 + 上传记录，同属一块，纵向排列 */
.resume-files-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.resume-files-panel .section-title:first-child { margin-top: 4px; }

.resume-file-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  border-left: 4px solid var(--accent);
}
.resume-file-main {
  display: flex;
  align-items: center;
  gap: 14px;
}
.resume-file-ico {
  width: 40px; height: 40px;
  border-radius: 12px;
  flex: none;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 12px rgba(47, 111, 190, 0.26);
}
.resume-file-info { flex: 1; min-width: 0; }
.resume-file-title { font-size: 15px; font-weight: 700; }
.resume-file-sub { font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.5; }

/* ---------- 文件解析 → 格式化面板 ---------- */
.resume-file-pick { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex: none; }
.resume-file-pick-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border: 1.5px solid var(--accent-2);
  border-radius: 9px;
  background: var(--accent-light);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: all .2s ease;
}
.resume-file-pick-btn:hover { border-color: var(--accent); background: var(--card); box-shadow: 0 3px 10px rgba(47, 111, 190, 0.12); }
.resume-file-name { font-size: 13px; color: var(--text-2); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#parse-btn { padding: 11px 26px; font-size: 14px; }
.parse-error {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: 8px;
  color: var(--danger);
  font-size: 13px;
}
/* ---------- 技能分点已改为「模块级大文本框」（样式见 .re-note-input / .rp-rich） ---------- */
.rp-item-degree { width: 62px; font-size: 1.08em; font-weight: 400; color: var(--text-2); }
.rp-item-major { width: 120px; font-size: 1.08em; font-weight: 400; color: var(--text-2); }
/* 教育条目学历下拉 */
.exp-degree { flex: none; width: 96px; cursor: pointer; }
/* 教育条目：学校/学历/专业/时间段 一行排布（不换行） */
[data-module="education"] .exp-item .re-item-head { flex-wrap: nowrap; }
[data-module="education"] .exp-item .exp-org { flex: 1.6; min-width: 120px; }
[data-module="education"] .exp-item .exp-degree { flex: none; width: 72px; padding-left: 6px; padding-right: 6px; }
[data-module="education"] .exp-item .exp-major { flex: 1; min-width: 100px; }
[data-module="education"] .exp-item .re-date { width: 78px; padding-left: 6px; padding-right: 6px; }

/* ---------- 解析进度条（嵌在文件卡片内） ---------- */
.parse-progress { padding: 18px 0 6px; text-align: center; }
.parse-progress-bar {
  height: 8px;
  max-width: 460px;
  margin: 0 auto;
  background: #dbe3ee;
  border-radius: 99px;
  overflow: hidden;
}
.parse-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 99px;
  transition: width .5s ease;
}
.parse-progress-label { margin-top: 12px; font-size: 13px; color: var(--text-2); }

/* =========================================================
   岗位看板 · 五阶段看板
   ========================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.jobs-page {
  width: 100%;
  min-width: 0;
  color: var(--text);
}

.jobs-tip,
.jobs-toolbar,
.jobs-view-switch,
.jobs-status-tab,
.tracking-card-topline,
.tracking-card-heading,
.tracking-card-meta,
.tracking-card-tags,
.tracking-card-footer,
.tracking-date,
.tracking-list-title,
.tracking-list-actions,
.job-modal-heading {
  display: flex;
  align-items: center;
}

.jobs-tip-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.jobs-tip {
  min-height: 42px;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid #e0e7ef;
  border-radius: 7px;
  background: #f7f9fb;
  color: #536176;
  font-size: 12px;
}

.jobs-tip > svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: #b78313;
}

.jobs-tip span { min-width: 0; }
.jobs-tip-plugin { background: #f1f5fa; }
.jobs-tip-plugin > svg { color: var(--accent); }
.jobs-tip a {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 5px;
  background: #168b68;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.jobs-tip a:hover { background: #117355; text-decoration: none; }

.jobs-status-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 0 0 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.jobs-status-tab {
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 10px;
  flex: none;
  border: 1px solid #e0e5ec;
  border-radius: 5px;
  background: var(--card);
  color: var(--text-2);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}

.jobs-status-tab:hover {
  border-color: #aebed0;
  color: var(--text);
}

.jobs-status-tab.active {
  border-color: var(--accent);
  background: #f5f8fb;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.jobs-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a5b0bd;
}

.jobs-status-tab strong {
  min-width: 14px;
  padding: 0 4px;
  border-radius: 8px;
  background: #f0f2f5;
  color: inherit;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

.jobs-status-tab.tone-all .jobs-status-dot { background: var(--accent); }
.jobs-status-tab.tone-pending .jobs-status-dot { background: #9db5cd; }
.jobs-status-tab.tone-applied .jobs-status-dot { background: #8398ae; }
.jobs-status-tab.tone-early .jobs-status-dot { background: #4f91d8; }
.jobs-status-tab.tone-late .jobs-status-dot { background: #cf9531; }
.jobs-status-tab.tone-closed .jobs-status-dot { background: #4b9c70; }

.jobs-toolbar {
  gap: 8px;
  margin-bottom: 12px;
  min-width: 0;
}

.jobs-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 420px);
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  transition: border-color .15s, box-shadow .15s;
}

.jobs-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(62, 95, 138, .1);
}

.jobs-search svg { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.jobs-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.jobs-search input::placeholder { color: var(--text-3); }

.jobs-result-count {
  color: var(--text-3);
  font-size: 11px;
  white-space: nowrap;
}

.jobs-toolbar-spacer { flex: 1; }

.io-recommend-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  cursor: pointer;
  user-select: none;
  flex: none;
}
.io-recommend-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.io-recommend-label svg { width: 13px; height: 13px; color: var(--accent-2); }
.io-recommend-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.io-recommend-toggle .toggle-track {
  position: relative;
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: #d7dee6;
  transition: background .18s;
  flex: none;
}
.io-recommend-toggle .toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: left .18s;
}
.io-recommend-toggle input:checked + .toggle-track { background: var(--accent); }
.io-recommend-toggle input:checked + .toggle-track .toggle-thumb { left: 15px; }

/* io 推荐卡（待投递列底部） */
.io-recommend-card {
  border: 1.5px dashed #C3D6EA;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--accent-light), #F7FAFC);
  padding: 9px 10px;
  margin-top: 10px;
}
.io-recommend-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.io-recommend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: #E6F0FB;
  border-radius: 999px;
  padding: 2px 8px;
}
.io-recommend-badge svg { width: 11px; height: 11px; }
.io-recommend-refresh {
  display: inline-flex;
  padding: 2px;
  border: none;
  background: none;
  color: #9BB4CE;
  cursor: pointer;
}
.io-recommend-refresh svg { width: 14px; height: 14px; }
.io-recommend-refresh:hover { color: var(--accent); }
.io-recommend-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-top: 5px;
  line-height: 1.35;
}
.io-recommend-sub { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.io-recommend-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 6px;
}
.io-recommend-meta svg { width: 12px; height: 12px; }
.io-recommend-track {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 5px 0;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .12s;
}
.io-recommend-track:hover { opacity: .9; }

.jobs-select-wrap,
.tracking-stage-select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.jobs-select-wrap select {
  width: 118px;
  height: 34px;
  padding: 0 28px 0 10px;
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  background: var(--card);
  color: var(--text-2);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.jobs-select-wrap select:focus { border-color: var(--accent); }
.jobs-select-wrap > svg,
.tracking-stage-select > svg {
  position: absolute;
  right: 8px;
  width: 13px;
  height: 13px;
  pointer-events: none;
  color: var(--text-3);
}

.jobs-add-button { height: 34px; padding: 0 12px; font-size: 12px; }
.jobs-add-button svg { width: 15px; height: 15px; }

.jobs-view {
  width: 100%;
  min-width: 0;
  padding-bottom: 8px;
  overflow-x: auto;
}

/* 看板插槽：flex:1 占据 jobs-page 剩余高度（上限 3 卡由 .job-board 的 max-height 限制） */
.jobs-board-slot {
  flex: 1;
  min-height: 0;
}

.job-board {
  height: 100%;
  display: flex;
  gap: 10px;
  min-width: 1040px;
  overflow-x: auto;
  padding-bottom: 8px;
  max-height: 672px;          /* 列头 54px + 卡片区 3 卡（3×206px），最多同时展示 3 张 */
  min-height: 0;
  align-items: stretch;
}

/* 岗位看板页：内容区与看板纵向撑满页面剩余高度（不超屏幕） */
body[data-page="jobs"] .content,
body[data-page="jobs"] .jobs-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
body[data-page="jobs"] .content { flex: 1; }
body[data-page="jobs"] .jobs-page { flex: 1; }

.job-board-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 200px;
  min-height: 0;
  height: 100%;
  border: 1px solid #dfe5ec;
  border-top: 3px solid #a7b5c4;
  border-radius: 7px;
  background: #f8fafc;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.job-board-column.tone-applied { border-top-color: #8197ad; }
.job-board-column.tone-early { border-top-color: #4f91d8; }
.job-board-column.tone-late { border-top-color: #cf9531; }
.job-board-column.tone-closed { border-top-color: #4b9c70; }

.job-board-column.is-dragover {
  border-color: var(--accent);
  background: #eef4fa;
  box-shadow: inset 0 0 0 1px var(--accent);
}

.job-board-column-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 54px;
  flex: none;
  padding: 10px 10px 8px;
  border-bottom: 1px solid #e4e9ef;
}

.job-board-column-head h3 {
  margin: 0;
  color: #34445a;
  font-size: 12px;
  font-weight: 700;
}

.job-board-column-head p {
  margin: 2px 0 0;
  color: var(--text-3);
  font-size: 10px;
  line-height: 1.35;
}

.job-board-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid #e1e6ec;
  border-radius: 10px;
  background: var(--card);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 600;
}

.job-board-column-body {
  flex: 1;
  min-height: 0;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  scrollbar-width: thin;
  scrollbar-color: #c2ccd6 transparent;
}

.job-board-column-body::-webkit-scrollbar { width: 6px; }
.job-board-column-body::-webkit-scrollbar-track { background: transparent; }
.job-board-column-body::-webkit-scrollbar-thumb {
  background: #c2ccd6;
  border-radius: 3px;
}
.job-board-column-body::-webkit-scrollbar-thumb:hover { background: #9fb0c0; }

.job-board-empty {
  display: flex;
  min-height: calc(100% - 16px);
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  border: 1px dashed #e1e6ec;
  border-radius: 6px;
  color: #abb4c0;
  font-size: 10px;
}

.job-board-empty svg { width: 16px; height: 16px; }

.tracking-card {
  margin-bottom: 8px;
  padding: 11px;
  border: 1px solid #dfe5ec;
  border-radius: 7px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(37, 50, 71, .04);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
}

.tracking-card:last-child { margin-bottom: 0; }
.tracking-card:hover {
  border-color: #bdcad8;
  box-shadow: 0 4px 12px rgba(62, 95, 138, .1);
  transform: translateY(-1px);
}
.tracking-card.is-dragging { opacity: .42; transform: rotate(1deg); }

.tracking-card-topline {
  gap: 7px;
  min-width: 0;
  margin-bottom: 7px;
}

.tracking-company-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid #dbe3ec;
  border-radius: 5px;
  background: #edf2f7;
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
}

.tracking-company {
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tracking-drag-handle {
  display: inline-flex;
  margin-left: auto;
  color: #b4bdc8;
  cursor: grab;
}
.tracking-drag-handle svg { width: 14px; height: 14px; }

.tracking-card-heading {
  align-items: flex-start;
  gap: 6px;
}

.tracking-card-heading h4 {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: #27364a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tracking-card-actions,
.tracking-list-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.tracking-card-actions button,
.tracking-list-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #8e9aaa;
  cursor: pointer;
}

.tracking-card-actions button:hover,
.tracking-list-actions button:hover {
  background: #edf2f7;
  color: var(--accent);
}

.tracking-card-actions button[data-job-action="delete"]:hover,
.tracking-list-actions button[data-job-action="delete"]:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.tracking-card-actions svg,
.tracking-list-actions svg { width: 13px; height: 13px; }

.tracking-card-meta {
  flex-wrap: wrap;
  gap: 5px 10px;
  min-height: 17px;
  margin-top: 6px;
  color: var(--text-2);
  font-size: 10px;
}

.tracking-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tracking-card-meta svg { width: 12px; height: 12px; color: #8b98a8; }

.tracking-card-tags {
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.tracking-stage-badge,
.tracking-source-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
}

.tracking-stage-badge.tone-pending { background: #edf2f7; color: #66809c; }
.tracking-stage-badge.tone-applied { background: #eef1f5; color: #61768d; }
.tracking-stage-badge.tone-early { background: #eaf3fd; color: #3579bd; }
.tracking-stage-badge.tone-late { background: #fff4dc; color: #a86f09; }
.tracking-stage-badge.tone-closed { background: #e9f7ef; color: #287d50; }
.tracking-source-badge { background: #f3f4f6; color: #7a8594; font-weight: 500; }

.tracking-rating {
  display: flex;
  align-items: center;
  gap: 1px;
  min-height: 18px;
  margin-top: 6px;
}

.tracking-star {
  width: 15px;
  height: 17px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d8dde4;
  font-size: 13px;
  line-height: 17px;
  cursor: pointer;
}
.tracking-star:hover,
.tracking-star.active { color: #e3a82f; }

.tracking-card-footer {
  justify-content: space-between;
  gap: 6px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid #edf0f4;
}

.tracking-date {
  gap: 4px;
  color: var(--text-3);
  font-size: 9px;
  white-space: nowrap;
}
.tracking-date svg { width: 11px; height: 11px; }

.tracking-stage-select select {
  max-width: 92px;
  height: 25px;
  padding: 0 24px 0 7px;
  appearance: none;
  border: 1px solid #e0e5eb;
  border-radius: 5px;
  outline: none;
  background: #f8fafc;
  color: var(--text-2);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}
.tracking-stage-select select:focus { border-color: var(--accent); }
.tracking-stage-select > svg { right: 6px; width: 11px; height: 11px; }

.tracking-list-wrap {
  min-width: 860px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--card);
}

.tracking-list-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tracking-list-table th {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: #f3f5f7;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
  text-align: left;
}
.tracking-list-table th:first-child { width: 28%; }
.tracking-list-table th:nth-child(2) { width: 18%; }
.tracking-list-table th:nth-child(3) { width: 14%; }
.tracking-list-table th:nth-child(4) { width: 12%; }
.tracking-list-table th:nth-child(5) { width: 18%; }
.tracking-list-table th:last-child { width: 70px; }
.tracking-list-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #edf0f4;
  color: var(--text-2);
  font-size: 11px;
  vertical-align: middle;
}
.tracking-list-table tr:last-child td { border-bottom: 0; }
.tracking-list-table tbody tr { cursor: pointer; }
.tracking-list-table tbody tr:hover { background: #f7f9fb; }
.tracking-list-title { gap: 9px; min-width: 0; }
.tracking-list-title div { min-width: 0; }
.tracking-list-title strong,
.tracking-list-title span,
.tracking-list-main,
.tracking-list-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tracking-list-title strong { color: var(--text); font-size: 12px; }
.tracking-list-title div span,
.tracking-list-sub { margin-top: 2px; color: var(--text-3); font-size: 10px; }
.tracking-list-table .tracking-rating { margin-top: 0; }

.jobs-empty {
  min-height: 430px;
  padding: 60px 20px;
  border: 1px dashed var(--border);
  border-radius: 7px;
  background: #f9fafc;
  color: var(--text-2);
  text-align: center;
}
.jobs-empty > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border-radius: 7px;
  background: var(--accent-light);
  color: var(--accent);
}
.jobs-empty > span svg { width: 21px; height: 21px; }
.jobs-empty h3 { margin: 0 0 4px; color: var(--text); font-size: 14px; }
.jobs-empty p { margin: 0 0 14px; font-size: 11px; }

.job-modal-heading {
  gap: 10px;
  margin-bottom: 20px;
}
.job-modal-heading > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 7px;
  background: var(--accent-light);
  color: var(--accent);
}
.job-modal-heading svg { width: 18px; height: 18px; }
.job-modal-heading h3 { margin: 0; font-size: 16px; }
.job-modal-heading p { margin: 2px 0 0; color: var(--text-2); font-size: 11px; }
.job-ai-import {
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #f7f9fb;
}
.job-ai-import > label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.job-ai-import .btn { margin-top: 8px; }
.job-ai-import .btn svg { width: 14px; height: 14px; }

@media (max-width: 1180px) {
  .jobs-tip-row { grid-template-columns: 1fr; }
  .jobs-toolbar { flex-wrap: wrap; }
  .jobs-toolbar-spacer { display: none; }
  .jobs-search { width: 100%; max-width: none; }
  .jobs-result-count { margin-right: auto; }
}

@media (max-width: 760px) {
  #app { height: 100dvh; }
  .main { height: 100dvh; }
  .content { padding: 16px 14px 30px; }

  .jobs-tip { align-items: flex-start; }
  .jobs-tip-plugin { flex-wrap: wrap; }
  .jobs-tip a { margin-left: 24px; }
  .jobs-status-tabs { margin-right: -12px; padding-right: 12px; }
  .jobs-result-count { order: 2; }
  .io-recommend-toggle { order: 3; }
  .jobs-select-wrap { order: 4; flex: 1; }
  .jobs-select-wrap select { width: 100%; }
  .jobs-add-button { order: 5; }
  body[data-page="jobs"] .content,
  body[data-page="jobs"] .jobs-page { height: auto; }
  .jobs-board-slot { flex: none; }
  .job-board {
    height: auto;
    max-height: none;
    min-width: 1130px;
  }
  .job-board-column { height: 460px; }
  .job-board-empty { min-height: calc(100% - 16px); }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
}

/* =========================================================
   工具中心（GPT 风格：左侧功能区 + 右侧内容区）
   ========================================================= */
/* 工具中心列表：铺满内容区（左对齐），不再居中收窄成一列 */
.tk-page { max-width: 1440px; }
.tk-sub { margin: -4px 0 16px; color: var(--text-3); font-size: 13px; }
/* 工具卡片固定三列网格：后续新增工具自动按每行 3 个向下排列 */
.tk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.tk-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.tk-card:hover { background: #f7f7f7; border-color: #dcdcdc; }
.tk-card:active { transform: scale(.995); }
.tk-card-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-card);
  background: var(--accent);
  color: #fff;
}
.tk-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tk-card-title { font-size: 14.5px; font-weight: 600; }
.tk-card-desc { font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.tk-card-arrow { flex: none; color: var(--text-3); }
/* 平板两列（≤1080px），手机单列见文末 640px 媒体查询 */
@media (max-width: 1080px) {
  .tk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 工具打开 / 返回转场 ---
   卡片 → 整页工具：内容区用 clip-path 从卡片矩形揭开 + 轻微放大，列表快照淡出；
   整页工具 → 卡片：内容区按卡片矩形反向裁剪收拢并淡出，卡片随后回弹。
   只动 clip-path / transform / opacity（合成层），不触发布局，保证动画顺滑。 */
.tk-ghost {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  background: var(--bg);
}
.tk-card.is-appearing { animation: tkCardIn 420ms cubic-bezier(.22,1,.28,1); }
@keyframes tkCardIn {
  from { transform: scale(.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-card.is-appearing { animation: none; }
}

/* ---------------- 网申工具 ---------------- */
.na-app { display: flex; align-items: flex-start; gap: 18px; max-width: 1180px; margin: 0 auto; }

.na-side {
  flex: none;
  width: 268px;
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--sidebar-bg);
}
.na-side-head { display: flex; flex-direction: column; gap: 6px; }
.na-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 5px 7px;
  margin-bottom: 2px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.na-back:hover { background: var(--hover); color: var(--text); }
.na-side-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.na-side-desc { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-3); }

.na-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}
.na-picker-label { font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.na-picker select {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.na-picker select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.na-picker-error, .na-picker-empty { gap: 8px; align-items: flex-start; }
.na-picker-error-text { font-size: 12px; line-height: 1.5; color: var(--danger); }

.na-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text-3);
  transition: border-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.na-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--text-2); }
.na-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}

.na-groups { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.na-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.na-group:hover { background: var(--hover); }
.na-group.active { background: var(--hover-strong); font-weight: 600; }
/* 选中项左侧的品牌色指示条 */
.na-group.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 15px;
  margin-top: -7.5px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.na-group.active .na-group-count { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.na-group svg { flex: none; color: var(--text-2); }
.na-group-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-group-count {
  flex: none;
  min-width: 20px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--text-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.na-side-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.na-btn-primary, .na-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.na-btn-primary { border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.na-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; text-decoration: none; }
.na-btn-ghost { border: 1px solid var(--border); background: var(--card); color: var(--text-2); }
.na-btn-ghost:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.na-btn-ghost:disabled { opacity: .55; cursor: not-allowed; }

.na-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}
.na-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.na-main-title { flex: 1 1 auto; min-width: 0; }
.na-main-title h3 { margin: 0 0 3px; font-size: 15px; font-weight: 700; color: var(--text); }
.na-main-title p { margin: 0; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.na-body { display: flex; flex-direction: column; gap: 20px; padding: 16px 18px 22px; }

.na-section { display: flex; flex-direction: column; gap: 10px; }
/* 分组之间加细分隔线，长表单更有层次 */
.na-section + .na-section { padding-top: 18px; border-top: 1px solid var(--border); }
.na-section-head { display: flex; align-items: center; gap: 8px; }
.na-section-head h4 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text); }
.na-section-head span {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--text-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.na-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }

/* 列表模块：按条目卡片填写 */
.na-items { display: flex; flex-direction: column; gap: 12px; }
.na-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-2);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.na-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.na-item-head { display: flex; align-items: center; gap: 8px; }
.na-item-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.na-item-del {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.na-item-del:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); }
.na-add {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  cursor: pointer;
  transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.na-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.na-inline-empty {
  padding: 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  text-align: center;
  color: var(--text-3);
  font-size: 12.5px;
}
.na-dirty {
  flex: none;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--coral-light);
  color: var(--coral);
  font-size: 11.5px;
}

.na-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 11px 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.na-field:hover { border-color: var(--border-strong); }
.na-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* 未填写：虚线框 + 透明底 + 灰标签 + 灰点，一眼扫出还要补哪些字段 */
.na-field-empty { border-style: dashed; background: transparent; }
.na-field-empty:hover { background: var(--bg-2); }
.na-field-empty .na-field-label { color: var(--text-3); font-weight: 500; }
.na-field-empty .na-field-label::before { background: var(--border-strong); box-shadow: none; }
.na-field-empty:focus-within { border-style: solid; border-color: var(--accent); background: var(--card); }
.na-field-empty:focus-within .na-field-label { color: var(--text-2); font-weight: 600; }
.na-field-wide { grid-column: 1 / -1; }
.na-field-ai { border-style: dashed; background: var(--bg-2); }
.na-field-head { display: flex; align-items: center; gap: 6px; }
.na-field-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
}
/* 标签前的状态点：已填写为品牌色，未填写为浅灰 */
.na-field-label::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.na-field-tag {
  flex: none;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--text-3);
  font-size: 10.5px;
}
.na-copy {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.na-copy:hover:not(.is-off) { background: var(--hover); color: var(--text); }
.na-copy.is-off { opacity: .4; cursor: not-allowed; }
.na-field-value {
  width: 100%;
  min-height: 24px;
  max-height: 320px;
  padding: 0;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.65;
  caret-color: var(--accent);
}
.na-field-value::placeholder { color: var(--text-3); }
.na-empty { padding: 48px 16px; text-align: center; color: var(--text-3); font-size: 13px; }

/* 平板：功能区移到顶部，分组横向滚动 */
@media (max-width: 1080px) {
  .na-app { flex-direction: column; gap: 14px; }
  .na-side { width: 100%; position: static; }
  .na-groups { flex-direction: row; flex-wrap: nowrap; max-height: none; padding-bottom: 4px; }
  .na-group { flex: none; }
  .na-group-label { flex: none; }
  .na-side-foot { flex-direction: row; }
  .na-side-foot > * { flex: 1; }
}

/* 移动端：单列卡片 */
@media (max-width: 640px) {
  .na-main-head { padding: 12px 14px; }
  .na-body { padding: 14px; }
  .na-grid { grid-template-columns: 1fr; }
  .tk-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   岗位详情弹窗（看板卡片点击打开，通栏圆角设计）
   ========================================================= */
.jd-overlay .modal {
  padding: 0;
  overflow-y: auto;          /* 兜底滚动：即使内部滚动失效也能整体滚动 */
  max-height: 88vh;
  border-radius: 24px;
}
.jd-modal {
  display: flex;
  flex-direction: column;
  max-height: 86vh;
}
.jd-hero { flex: none; }
.jd-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c2ccd6 transparent;
}
.jd-body::-webkit-scrollbar { width: 6px; }
.jd-body::-webkit-scrollbar-track { background: transparent; }
.jd-body::-webkit-scrollbar-thumb { background: #c2ccd6; border-radius: 3px; }
.jd-overlay .modal-body { padding: 0; }
.jd-overlay .modal-close {
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: #5b6b80;
  font-size: 17px;
  box-shadow: 0 1px 4px rgba(37, 50, 71, .12);
}
.jd-overlay .modal-close:hover {
  background: var(--card);
  color: var(--text);
}

/* 头部渐变区 */
.jd-hero {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 26px 26px 22px;
  background: linear-gradient(135deg, #eef3fa 0%, #f7f9fc 70%, #fbfcfe 100%);
  border-bottom: 1px solid #e6ebf2;
}
.jd-avatar {
  width: 58px;
  height: 58px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #4a6b93, #6f89aa);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(62, 95, 138, .25);
}
.jd-heading { min-width: 0; flex: 1; }
.jd-company {
  font-size: 12px;
  font-weight: 600;
  color: #7a8aa0;
  margin-bottom: 3px;
  letter-spacing: .02em;
}
.jd-heading h3 {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.4;
  color: #24334a;
  padding-right: 28px;
  word-break: break-word;
}
.jd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid #e2e8f0;
  color: #5b6b80;
  font-size: 11px;
  font-weight: 600;
}
.jd-chip-stage.tone-pending { background: #eef1f6; border-color: #dfe5ec; color: #5b6b80; }
.jd-chip-stage.tone-applied { background: #e8eff8; border-color: #d3e0ef; color: #3e5f8a; }
.jd-chip-stage.tone-early { background: #e7f1fc; border-color: #cfe3f7; color: #2f6fae; }
.jd-chip-stage.tone-late { background: #fbf3e3; border-color: #f1e2c3; color: #a06a14; }
.jd-chip-stage.tone-closed { background: #eef3ee; border-color: #dce8dd; color: #4d7a55; }

/* 主体 */
.jd-body { padding: 20px 26px 26px; }

.jd-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.jd-info {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 14px;
  background: #f6f8fb;
  border: 1px solid #eef1f5;
  color: #3d4c61;
  font-size: 13px;
}
.jd-info i {
  width: 30px;
  height: 30px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--card);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(37, 50, 71, .06);
}
/* 岗位详情弹窗的图标容器为 30px 方块：内部图标统一 16px 并居中 */
.jd-info i svg { width: 16px; height: 16px; }
.jd-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.jd-section {
  margin-bottom: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #fbfcfe;
  border: 1px solid #edf1f6;
}
.jd-section h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #8897ab;
  letter-spacing: .04em;
}
.jd-section p {
  margin: 0;
  color: #3d4c61;
  font-size: 13px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 右上角招聘链接 */
.jd-link-top {
  flex: none;
  margin-left: auto;
  margin-top: 4px;
  margin-right: 38px;   /* 避开右上角关闭按钮 */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid #e2e8f0;
  color: #3e5f8a;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(37, 50, 71, .08);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.jd-link-top:hover {
  border-color: #c9d4e0;
  box-shadow: 0 3px 10px rgba(37, 50, 71, .12);
}
.jd-link-top:active { transform: scale(.97); }
.jd-link-top i { width: 13px; height: 13px; }

.jd-loading, .jd-empty {
  padding: 56px 24px;
  text-align: center;
  color: #8b98aa;
  font-size: 13px;
}

@media (max-width: 520px) {
  .jd-hero { flex-direction: column; }
  .jd-avatar { width: 48px; height: 48px; border-radius: 14px; }
  .jd-info-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Excel 风格表格（岗位库 / 校招岗位库）：固定列宽 + 横向滚动
   ========================================================= */
.xl-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
}
.xl-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #c2ccd6 #f1f3f6;
}
.xl-scroll::-webkit-scrollbar { height: 8px; }
.xl-scroll::-webkit-scrollbar-track { background: #f1f3f6; }
.xl-scroll::-webkit-scrollbar-thumb { background: #c2ccd6; border-radius: 4px; }
.xl-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 13px;
}
.xl-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f6f8fa;
  color: #3b4656;
  font-weight: 600;
  font-size: 12.5px;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid #eef1f5;
  white-space: nowrap;
  position: relative;
  user-select: none;
}
.xl-table thead th:last-child { border-right: none; }
.xl-th-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px;
}
.xl-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid #f0f2f5;
  border-right: 1px solid #f5f7f9;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xl-table tbody tr:last-child td { border-bottom: none; }
.xl-table tbody tr:hover { background: #f7f9fc; }
.xl-table tbody tr.xl-empty td {
  text-align: center;
  color: var(--text-3);
  padding: 40px 12px;
  white-space: normal;
}
.xl-cell { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xl-title {
  display: block;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xl-ellip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xl-muted { color: var(--text-3); }
.xl-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.xl-actions .btn { padding: 4px 10px; font-size: 12px; }

/* =========================================================
   简历引导弹窗（登录后未上传简历）
   ========================================================= */
.rg-overlay .modal { border-radius: 18px; }
.rg-modal { text-align: center; }
.rg-ico {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.rg-modal h3 { font-size: 18px; margin: 0 0 8px; }
.rg-sub { font-size: 13px; color: var(--text-2); line-height: 1.6; margin: 0 0 18px; }
.rg-upload {
  border: 1.5px dashed #C3D6EA;
  background: #F7FAFC;
  border-radius: 12px;
  padding: 22px 16px;
  cursor: pointer;
  transition: all .15s;
  margin-bottom: 18px;
}
.rg-upload.is-over { border-color: var(--accent); background: var(--accent-light); }
.rg-upload input[type="file"] { display: none; }
.rg-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rg-drop-ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #E6F0FB;
  color: var(--accent);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.rg-hint { font-size: 12px; color: var(--text-3); }
.rg-modal .modal-actions { justify-content: center; }

/* 关闭弹窗时的收缩动画：缩小并飞向导航区底部的小球 */
.rg-overlay.rg-collapse { opacity: 0; transition: opacity .3s ease; }
.rg-overlay.rg-collapse .modal {
  transform: translate(var(--rg-tx, 0px), var(--rg-ty, 0px)) scale(0.05);
  opacity: 0;
  transition: transform .3s cubic-bezier(.55, .06, .68, .19), opacity .3s ease;
}

/* 简历引导小球：导航区底部（最后一个菜单项与账户信息之间的空白区），点击重新打开弹窗
   横向与菜单文字左对齐；侧边栏收起为图标轨道时居中。
   两种尺寸状态：基础 scale(1) ↔ 悬停/聚焦 scale(1.2)，0.35s 平滑过渡 */
.nav-items .rg-ball {
  --ball-size: 44px;
  position: relative;
  flex: none;
  width: var(--ball-size);
  height: var(--ball-size);
  /* 顶边 auto 把小球压到导航区底部；左缩进 = nav-item 左内边距 + 图标 18 + 间距 12，与菜单文字对齐 */
  margin: auto 0 16px;
  margin-left: calc(12px + 18px + 12px);
  border: none;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  transform: scale(1); /* 基础尺寸状态 */
  box-shadow: 0 4px 12px rgba(47, 111, 190, 0.4);
  /* 过渡动画：缩放 + 阴影 + 颜色提示，时长 0.35s（0.3~0.5s 区间） */
  transition: transform .35s cubic-bezier(.25, .8, .25, 1), box-shadow .35s ease, filter .35s ease;
  -webkit-transition: -webkit-transform .35s cubic-bezier(.25, .8, .25, 1), box-shadow .35s ease, filter .35s ease;
  z-index: 5;
  animation: rg-ball-pop .45s cubic-bezier(.34, 1.56, .64, 1);
}
/* 侧边栏收起为图标轨道：小球在导航列内居中 */
body.sidebar-collapsed .nav-items .rg-ball { margin-left: auto; margin-right: auto; }
/* 悬停/聚焦尺寸状态：平滑放大至 1.2 倍，阴影加深 + 颜色提亮，提示可交互 */
.nav-items .rg-ball:hover, .nav-items .rg-ball:focus-visible {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  box-shadow: 0 10px 26px rgba(47, 111, 190, 0.55);
  filter: brightness(1.12) saturate(1.12);
  -webkit-filter: brightness(1.12) saturate(1.12);
}
.nav-items .rg-ball svg { width: 20px; height: 20px; }
/* 放缩动画：弹出 + 呼吸光圈（循环 3 次提示绑定简历） */
@keyframes rg-ball-pop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
.rg-ball::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(47, 111, 190, 0.5);
  animation: rg-ball-pulse 1.6s ease-out 3;
  pointer-events: none;
}
@keyframes rg-ball-pulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 111, 190, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(47, 111, 190, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 111, 190, 0); }
}

/* 岗位详情/公司详情弹窗底部操作区 */
.jd-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 0 4px;
  border-top: 1px dashed var(--border);
  margin-top: 4px;
}
.jd-body .detail-blocks .detail-block:last-child { margin-bottom: 8px; }

/* 移动卡片：查看详情 / 一键追踪 操作行 */
.ap-m-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* =========================================================
   简历编辑器（复刻 jlxg 高端版：左侧分栏折叠编辑 + 右侧实时预览）
   配色沿用全局变量（--accent #3e5f8a / --bg #f5f7fa 等）
   ========================================================= */
.resume-editor-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 58px);
  margin: -22px -24px -40px;
  background: var(--bg);
  overflow: hidden;
}

/* ---------- 顶栏 ---------- */
.re-toolbar {
  flex: none;
  min-height: 58px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px;
  z-index: 10;
}
.re-toolbar-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.re-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease;
}
.re-btn-ghost:hover { background: var(--bg-2); color: var(--text); }
.re-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 11px;
  border: none;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(62, 95, 138, .22);
  transition: all .2s ease;
}
.re-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(62, 95, 138, .3); }
.re-btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.re-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 11px;
  border: 1px solid var(--accent-2);
  background: var(--card);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease;
}
.re-btn-outline:hover { background: var(--accent-light); border-color: var(--accent); }
.re-btn-outline:disabled { opacity: .55; cursor: not-allowed; }
.re-btn-tiny {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s ease;
}
.re-btn-tiny:hover { color: var(--accent); border-color: var(--accent-2); background: var(--accent-light); }
.re-doc-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 10px;
  outline: none;
  font-family: inherit;
  min-width: 140px;
  max-width: 320px;
  flex: 1;
  transition: all .2s ease;
}
.re-doc-title:hover { border-color: var(--border); background: var(--bg); }
.re-doc-title:focus { border-color: var(--accent-2); background: var(--card); box-shadow: 0 0 0 3px var(--accent-light); }

/* ---------- 工作区 ---------- */
.re-workspace { flex: 1; display: flex; overflow: hidden; position: relative; min-height: 0; }
.re-panel { display: flex; flex-direction: column; min-width: 0; }
.re-editor-panel {
  width: 46%;
  min-width: 360px;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.re-preview-panel {
  flex: 1;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.re-panel-header {
  flex: none;
  padding: 13px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.re-panel-title { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.re-title-ico {
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(62, 95, 138, 0.18);
}
.re-panel-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.re-panel-actions { display: flex; align-items: center; gap: 8px; }
.re-panel-body { flex: 1; overflow-y: auto; padding: 18px; }
/* 纸张比可视区宽时必须可横向滚动；用 auto 外边距居中而非 justify-content，
   否则溢出时左侧会被裁掉且无法滚动到。
   scrollbar-gutter: stable 始终预留纵向滚动条宽度，让自适应缩放拿到的可用宽度稳定，
   避免「出现滚动条→宽度变小→缩放变化→滚动条消失」的来回抖动。 */
.re-preview-scroller { flex: 1; overflow: auto; padding: 24px 0; display: flex; justify-content: flex-start; align-items: flex-start; scrollbar-gutter: stable; }
.re-icon-btn {
  width: 30px; height: 30px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s ease;
}
.re-icon-btn:hover { background: var(--bg-2); color: var(--accent); }
.re-zoom-label {
  font-size: 12px; color: var(--text-2); min-width: 42px; text-align: center;
  padding: 3px 6px; border-radius: 7px; cursor: pointer; user-select: none;
}
.re-zoom-label:hover { color: var(--accent); background: var(--accent-light); }

/* ---------- 预览区头部：左侧展示设置条，右侧缩放 + 同步 ---------- */
.re-preview-header { align-items: center; gap: 12px; position: relative; z-index: 70; overflow: visible; }
.re-preview-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.re-zoom-row { display: flex; align-items: center; gap: 6px; }

/* 面板头部线对齐：JS 测量「编辑区」头部高度并写入 --re-header-h 作为基准线，
   预览区头部取同一高度 → 两个面板 header 的下边线精确对齐。
   预览区头部内含两行工具（缩放 / 同步），故压缩其内边距与控件尺寸以容纳基准高度。 */
.re-editor-panel > .re-panel-header { box-sizing: border-box; }
.re-preview-panel > .re-panel-header {
  box-sizing: border-box;
  overflow: visible;
  height: var(--re-header-h, auto);
  padding-top: 6px;
  padding-bottom: 6px;
}
.re-preview-panel > .re-panel-header .re-icon-btn { width: 26px; height: 26px; border-radius: 8px; font-size: 15px; }
.re-preview-panel > .re-panel-header .re-zoom-label { font-size: 11px; min-width: 38px; padding: 2px 5px; }

/* 点击预览框联动：编辑区目标字段短暂高亮 */
@keyframes re-jump-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent); background: var(--accent-light); }
  70%  { box-shadow: 0 0 0 2px var(--accent); background: var(--accent-light); }
  100% { box-shadow: 0 0 0 2px transparent; background: transparent; }
}
.re-jump-flash { animation: re-jump-flash 1.2s ease; border-radius: 8px; }

/* 展示设置条：白色卡片配色，从左向右展开 */
.re-dsettings { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-item { position: relative; display: inline-flex; }
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: all .18s ease;
}
.ds-btn:hover { color: var(--accent); border-color: var(--accent-2); background: var(--accent-light); }
.ds-btn.open { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }
.ds-btn svg { flex: none; }
.ds-btn .ds-val { min-width: 18px; text-align: center; color: var(--text); }
.ds-btn.open svg:last-child { transform: rotate(180deg); }
/* 字体按钮里的「Aa」标记（与其他按钮的 SVG 图标同位） */
.ds-btn .ds-aa { flex: none; font-size: 12px; font-weight: 700; line-height: 1; color: var(--accent); }

/* 向下弹出的面板（字号 / 行距 / 展示模块） */
.ds-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  min-width: 132px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-lg);
}
.ds-opt {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all .15s ease;
}
.ds-opt:hover { background: var(--bg-2); color: var(--text); }
.ds-opt.on { background: var(--accent-light); color: var(--accent); font-weight: 700; }

/* 字体下拉：选项左侧字体名（按自身字体渲染）+ 右侧说明 */
.ds-pop-family { min-width: 168px; }
.ds-opt--fam {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ds-opt-note { flex: none; font-size: 11px; font-weight: 400; color: var(--text-3); }
.ds-opt.on .ds-opt-note { color: var(--accent); }

/* 展示模块面板：可拖动排序 + 眼睛切换隐藏 */
.ds-pop-modules { min-width: 216px; }
.ds-mods { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.ds-mod {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid transparent;
  font-size: 13px;
  color: var(--text);
  cursor: grab;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.ds-mod:hover { background: var(--bg-2); border-color: var(--border); }
.ds-mod.dragging { opacity: .55; border-color: var(--accent-2); background: var(--accent-light); cursor: grabbing; }
.ds-mod.off { opacity: .55; }
.ds-mod.off .ds-mod-name { text-decoration: line-through; }
.ds-mod-drag { flex: none; display: inline-flex; color: var(--text-3); }
.ds-mod-name { flex: 1; min-width: 0; }
.ds-mod-eye {
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all .15s ease;
}
.ds-mod-eye:hover { background: var(--accent-light); color: var(--accent); }
.ds-mods-hint { margin-top: 6px; padding: 0 8px 2px; font-size: 11px; color: var(--text-3); }

/* ---------- 折叠分区卡片（头浅蓝底+品牌标题，内容白底，层次分明） ---------- */
.re-section-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease;
}
.re-section-card:hover { box-shadow: var(--shadow-hover); }
.re-section-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: var(--accent-light);
  transition: background .2s ease;
  user-select: none;
}
.re-section-header:hover { background: #e0e9f4; }
.re-section-title { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: var(--accent); }
.re-section-card.open .re-section-header { border-bottom: 1px solid var(--border); }
.re-chevron { color: var(--text-3); display: inline-flex; transition: transform .25s ease; }
.re-section-card.open .re-chevron { transform: rotate(180deg); }
.re-section-content {
  max-height: 0;
  overflow: hidden;
  background: var(--card);
  transition: max-height .35s cubic-bezier(.16, 1, .3, 1);
}
.re-section-card.open .re-section-content { max-height: 6000px; }
.re-section-inner { padding: 14px 16px 16px; }

/* ---------- 表单 ---------- */
.re-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.re-form-group { margin-bottom: 14px; }
.re-form-group:last-child { margin-bottom: 0; }
.re-form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.re-input, .re-select, .re-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.re-input:focus, .re-select:focus, .re-textarea:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px var(--accent-light);
  background: var(--card);
}
.re-textarea { resize: vertical; min-height: 72px; line-height: 1.6; }

/* ---------- 自我评价：富文本气泡工具栏（编辑文字时浮现，复刻参考深色胶囊） ---------- */
/* 有序列表「序号」样式：只保留数字，去掉数字后的「.」点号；
   suffix 置空，且仍是原生列表编号（沿用 start 属性，跨页续号不重排） */
@counter-style decimal-plain {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: " ";
}
.re-richtext {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  overflow: visible;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.re-richtext:focus-within {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.re-rt-bubble {
  position: fixed;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* 左对齐所跟随的输入框（left 即输入框左边）；纵向位置由 JS 直接算出 top，
     浮在输入框上边框上方 8px（上方空间不足时翻到下方），此处不再做 transform 偏移 */
  transition: opacity .15s ease;
}
.re-rt-bubble.show { opacity: 1; visibility: visible; pointer-events: auto; }
.re-rt-btn {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, color .15s ease;
}
.re-rt-btn:hover, .re-rt-btn:focus-visible { background: var(--bg-2); color: var(--accent); outline: none; }
.re-rt-btn.active { background: var(--accent-light); color: var(--accent); }
.re-rt-btn svg { width: 16px; height: 16px; stroke-width: 2.1; }
.re-rt-editor {
  border: none;
  border-radius: 10px;
  min-height: 128px;
  padding: 10px 12px;
  line-height: 1.65;
  outline: none;
  background: transparent;
}
.re-rt-editor:focus { box-shadow: none; }
.re-rt-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-3);
  pointer-events: none;
}
.re-rt-editor p, .re-rt-editor div { margin: 0 0 4px; }
.re-rt-editor > :last-child { margin-bottom: 0; }
.re-rt-editor ul, .re-rt-editor ol { margin: 4px 0; padding-left: 22px; }
.re-rt-editor ol { list-style: decimal-plain; }
.re-rt-editor li { margin: 2px 0; }
.re-rt-editor a { color: var(--accent); text-decoration: underline; }

/* 预览区富文本：与正文同字号 / 颜色 / 行距，列表与链接按简历观感排版 */
.rp-rich { min-height: 0; resize: none; white-space: normal; }
.rp-rich:empty::before {
  content: attr(data-placeholder);
  color: var(--text-3);
  pointer-events: none;
}
.rp-rich p, .rp-rich div { margin: 0 0 4px; }
.rp-rich > :last-child { margin-bottom: 0; }
.rp-rich ul, .rp-rich ol { margin: 4px 0; padding-left: 18px; }
.rp-rich ol { list-style: decimal-plain; }
.rp-rich li { margin: 2px 0; }
.rp-rich a { color: var(--accent); text-decoration: underline; }
/* 富文本加粗显式锁定 700：不用 UA 默认的 bolder（相对父级计算，父级已是 700 时会跳到
   900，而字体只打包了 400/700，反而匹配不到精确 face）。编辑区与纸张用同一条规则，
   保证「富文本里加粗 ↔ 纸张/导出显示加粗」严格联动。 */
#re-editor-body b, #re-editor-body strong,
.rp-page b, .rp-page strong { font-weight: 700; }
.re-select { cursor: pointer; }
.re-date { flex: none; width: 96px; }
/* 单值字段用多行自适应输入：内容超过一行时自动换行并撑高，
   避免长文本（单位名称 / 专业 / 奖项名称等）被横向截断看不见。
   高度由 JS 按内容同步，这里给出单行时的高度基线。 */
textarea.re-input {
  display: block;
  resize: none;
  overflow: hidden;
  line-height: 1.55;
  min-height: 40px;
}
/* 富文本化后的同构字段（contenteditable 替代 textarea）：盒模型与旧 textarea 一致 */
div.re-input[contenteditable] {
  display: block;
  line-height: 1.55;
  min-height: 40px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
}
/* 通用编辑区富文本字段：空态占位与内部块排版 */
.re-rt { white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.re-rt:empty::before {
  content: attr(data-placeholder);
  color: var(--text-3);
  pointer-events: none;
}
.re-rt p, .re-rt div { margin: 0 0 2px; }
.re-rt > :last-child { margin-bottom: 0; }
.re-rt ul, .re-rt ol { margin: 2px 0; padding-left: 20px; white-space: normal; }
.re-rt li { margin: 1px 0; }
.re-rt a { color: var(--accent); text-decoration: underline; }
.re-bullet-text[contenteditable] { min-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.re-hint { font-size: 12px; color: var(--text-3); margin-bottom: 8px; line-height: 1.6; }

/* ---------- 经历条目（常显边框与卡片区分，hover 品牌色） ---------- */
.re-item-list { display: flex; flex-direction: column; gap: 12px; }
.exp-item {
  margin-bottom: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  transition: border-color .2s ease;
}
.exp-item:hover { border-color: var(--accent-2); }
.re-item-head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.re-item-head .exp-org { flex: 2; min-width: 170px; }
.re-item-head .exp-role { flex: 1; min-width: 150px; }
.re-del-btn {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}
.re-del-btn:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.re-del-sm { width: 26px; height: 26px; border-radius: 8px; }

/* ---------- 经历条目排序：模块顶部「按时间排序」+ 条目内上/下移 ---------- */
.re-item-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.re-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s ease;
}
.re-sort-btn:hover:not(:disabled) { border-color: var(--accent-2); color: var(--accent); background: var(--accent-light); }
.re-item-acts { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.re-move-btn {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}
.re-move-btn:hover:not(:disabled) { background: var(--accent-light); border-color: var(--accent-2); color: var(--accent); }
.re-move-btn:disabled, .re-sort-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- 模块描述大文本框（旧数据兜底）与条目独立描述框 ----------
   边框/聚焦态由外层 .re-richtext 提供，这里只给出文本框的尺寸与排版基线 */
.re-bullets-empty { font-size: 12px; color: var(--text-3); padding: 4px 2px; }
.re-note-wrap { margin-top: 10px; }
.re-note-input {
  width: 100%;
  min-height: 96px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  cursor: text;
}
/* 每个经历条目独立的描述富文本框（紧跟条目头部字段之后） */
.re-desc-wrap { margin-top: 2px; }
.re-desc-input {
  width: 100%;
  min-height: 72px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  cursor: text;
}
/* 预览区：条目独立描述块与条目头部留一点间距 */
.rp-item .rp-item-desc { margin-top: 2px; }

/* ---------- 照片上传（编辑区最上方的 UI 入口） ---------- */
.re-photo { display: flex; gap: 14px; align-items: flex-start; }
.re-photo-preview {
  flex: none;
  width: 96px;
  height: 128px;              /* 3:4，贴近 1 寸证件照比例 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fafbfc;
  border: 1px dashed var(--border);
  border-radius: 6px;
}
.re-photo-preview.has-img { border-style: solid; background: #fff; }
.re-photo-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.re-photo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-3);
}
.re-photo-side { flex: 1; min-width: 0; }
.re-photo-btns { display: flex; gap: 8px; }
.re-photo-btn {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
}
.re-photo-btn.is-ghost { background: transparent; color: var(--text-2); border-color: var(--border); }
.re-photo-btn:disabled { opacity: .45; cursor: not-allowed; }
.re-photo-hint { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--text-3); }

/* ---------- 添加按钮 ---------- */
.re-add-btn {
  width: 100%;
  padding: 9px;
  border-radius: 11px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.re-add-btn:hover { border-color: var(--accent-2); color: var(--accent); background: var(--accent-light); }
.re-add-block { margin-top: 12px; }

/* ---------- 右侧实时预览：A4 纸张堆叠 ----------
   每张 .rp-page 精确定尺 210×297mm（96dpi 下 794×1123px），内边距即页边距；
   内容超出时由 JS 分页为多张 .rp-page，导出逐页同源渲染，保证预览与 PDF 完全一致。 */
.rp-zoom-wrap { position: relative; flex: none; margin: 0 auto; }
.rp-stack {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: top left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.rp-page {
  position: relative;
  width: 793px;
  height: 1122px;
  box-sizing: border-box;
  padding: 48px 52px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(37, 50, 71, .16);
  overflow: hidden;
  /* 简历主字体统一为思源宋体（产品专属族名 Offerio Serif SC，400=Regular 标准版 /
     700=Bold 加粗版，分片与系统字体零同名冲突）；其后的系统宋体名仅作码位兜底。
     顶栏「字体」下拉的 rf-font-sans / rf-font-serif 置于样式表末尾，可覆盖此默认。 */
  font-family: 'Offerio Serif SC', 'Noto Serif CJK SC', 'Source Han Serif CN',
    'Songti SC', 'STSong', 'SimSun', 'Times New Roman', serif;
}
/* 测量用流式容器：沿用同一套模板样式，但高度自适应、不裁切、无纸面装饰 */
.rp-flow {
  width: 793px;
  height: auto;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}
.rp-measure-stage {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 793px;
  visibility: hidden;
  pointer-events: none;
}
.rp-header {
  text-align: center;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid var(--text);
}
/* 简历照片：绝对定位在纸张右上角（相对 .rp-page 的 padding 角），
   不占文档流、不参与分页测量；仅第一页渲染（跟随 header）。
   单栏模板（business / english）header 居中，右上角是空白区，照片放这里正好。
   尺寸随「行间距」动态缩放：基准值 × --rp-photo-scale（由 resume.js 按行距算出，
   行距 1.4 时 scale = 1，行距越大照片越大，与整页疏密观感保持一致）。 */
.rp-photo {
  position: absolute;
  top: 48px;
  right: 52px;
  width: calc(90px * var(--rp-photo-scale, 1));
  height: calc(120px * var(--rp-photo-scale, 1));
  object-fit: cover;
  background: #f6f7f9;
  border: 1px solid rgba(37, 50, 71, .16);
  z-index: 1;
}
/* 现代侧栏模板：照片随侧栏文档流，放在侧栏顶部、姓名上方居中（参考设计稿）。
   基准尺寸 150×200（约占侧栏宽 2/3），同样随行距缩放，圆角无边框。 */
.rp-page.tpl-modern .rp-photo {
  position: static;
  display: block;
  width: calc(150px * var(--rp-photo-scale, 1));
  height: calc(200px * var(--rp-photo-scale, 1));
  margin: 2px auto 16px;
  border: 0;
  border-radius: 6px;
}
/* Classic（english）模板：照片锚定在 header 上（而非纸张），底边固定在下划线上方 16px，
   随线的实际位置一起移动 → 预览与导出严格一致（此前锚在纸张 top:32，
   打印时 header 高度与屏幕有差异导致线位漂移、照片压线）。 */
.rp-page.tpl-english .rp-header { position: relative; }
.rp-page.tpl-english .rp-photo {
  top: auto;
  bottom: 16px;
  right: 0;
  width: calc(84px * var(--rp-photo-scale, 1));
  height: calc(112px * var(--rp-photo-scale, 1));
}
/* 预览纸张字号全部用 em：根字号由 state.font(pt) 内联在 .rp-page 上，
   调整展示设置条的正文字号时，姓名 / 标题 / 正文等所有文字等比缩放。
   基准 12px = 默认 9pt（26px 姓名 → 2.17em，以此类推）。 */
.rp-name { font-size: 2.17em; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.rp-target { font-size: 1.08em; color: var(--text-2); margin-bottom: 6px; }
.rp-contact {
  font-size: 1.04em;
  color: var(--text-2);
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.rp-section { margin-bottom: 20px; }
.rp-section-title {
  font-size: 1.08em;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.rp-item { margin-bottom: 12px; }
.rp-item:last-child { margin-bottom: 0; }
.rp-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.rp-item-title-line { display: flex; align-items: baseline; flex: 1; min-width: 0; flex-wrap: wrap; row-gap: 3px; }
.rp-item-title { flex: 0 1 auto; min-width: 80px; font-size: 1.17em; font-weight: 700; color: var(--text); }
.rp-item-role { flex: 0 1 auto; min-width: 60px; font-size: 1.08em; font-weight: 400; color: var(--text-2); }
.rp-item-sep { color: var(--text-3); flex: none; }
.rp-item-meta-line { display: flex; align-items: baseline; gap: 2px; flex: none; font-size: 1em; color: var(--text-2); }
.rp-item-start, .rp-item-end { width: 72px; font-size: 1em; color: var(--text-2); text-align: right; }
.rp-item-dash { color: var(--text-3); flex: none; }
/* 行距统一继承纸张（.rp-page 内联 line-height = 展示设置「行间距」），
   不再硬编码 1.7，避免正文与描述文本行距不一致 */
.rp-text { font-size: 1.08em; line-height: inherit; color: var(--text); white-space: pre-wrap; }

/* ---------- 预览区可编辑（悬浮/聚焦时显示输入态） ---------- */
.rp-edit {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 4px;
  padding: 1px 4px;
  outline: none;
  min-width: 0;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
/* .rp-edit 的 font:inherit 简写会把 .rp-text 的 1.08em 覆盖回 1em，
   导致自我评价（#rp-self）比技能/经历描述等正文字号小一号、行距也随之不一致；
   这里显式对齐，保证简历内所有正文的字体、字号、行距、颜色完全统一 */
.rp-text.rp-edit { font-size: 1.08em; line-height: inherit; color: var(--text); }

.rp-edit:hover { border-color: var(--border); }
.rp-edit:focus {
  border-color: var(--accent-2);
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 0 0 2px var(--accent-light);
}
.rp-name { display: block; width: 100%; text-align: center; font-size: 2.17em; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.rp-target { display: block; width: 100%; text-align: center; font-size: 1.08em; color: var(--text-2); margin-bottom: 6px; }
.rp-contact .rp-edit { width: auto; }
.rp-item-title { font-size: 1.17em; font-weight: 700; color: var(--text); }
.rp-textarea-edit { width: 100%; resize: vertical; min-height: 48px; line-height: inherit; }

/* ---------- 简历样式预览：文本字段自动换行 ----------
   .rp-ta：文本承载字段（contenteditable，兼容旧 textarea），宽占满所在行并自动折行，
   高度由内容自动伸展。.rp-fit：行内字段，宽度由 JS 按「min(内容自然宽度, 所在行宽)」
   设置，超过行宽时自动折行。 */
.rp-edit.rp-ta {
  display: block;
  width: 100%;
  overflow: hidden;
  resize: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: inherit;
  cursor: text;
}
.rp-fit { flex: 0 0 auto; min-width: 40px; }
.rp-name.rp-ta, .rp-target.rp-ta { text-align: center; }
.rp-text.rp-ta { line-height: inherit; }
/* 富文本空态占位（预览区字段现为只读静态文本，故不再依赖 contenteditable 属性） */
.rp-edit:empty::before {
  content: attr(data-placeholder);
  color: var(--text-3);
  pointer-events: none;
}
/* 字段内列表/段落/链接的排版（富文本指令产出） */
.rp-edit p, .rp-edit div { margin: 0; }
.rp-edit ul, .rp-edit ol { margin: 2px 0; padding-left: 18px; }
.rp-edit li { margin: 1px 0; }
.rp-edit a { color: var(--accent); text-decoration: underline; }

/* ---------- 响应式 ---------- */
/* 工作区栏宽与堆叠规则统一在文件末尾的「模板面板 / 预览区响应式」段落维护，避免多处冲突 */
@media (max-width: 860px) {
  .resume-editor-wrap { margin: 0; height: auto; overflow: visible; }
  .re-toolbar { flex-wrap: wrap; min-height: auto; padding: 10px 14px; }
  .re-workspace { flex-direction: column; overflow: visible; }
}

/* ================= 在线编辑器 · 网申模块化（对齐网申字段清单） ================= */

.re-btn-tiny:disabled { opacity: .5; cursor: not-allowed; }

/* 单值字段网格中独占整行的字段（通讯地址 / 个人主页等） */
.re-form-row .full { grid-column: 1 / -1; }

/* 简单列表模块（语言能力 / IT技能与证书 / 学术成果 / 家庭信息） */
.si-list { display: flex; flex-direction: column; gap: 12px; }
.si-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  padding: 12px 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.si-item:hover { border-color: var(--accent-2); box-shadow: var(--shadow-hover); }
.si-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.si-item-title { font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: .04em; }
.si-item .re-form-row { gap: 6px 14px; }
.si-item .re-form-group { margin-bottom: 8px; }
.si-item .re-form-group:last-child { margin-bottom: 0; }

/* 简历样式预览：语言/证书/学术/家庭 等列表模块（只读展示） */
.rp-simple { padding: 2px 0; }
.rp-simple + .rp-simple { margin-top: 6px; }
.rp-simple-title { font-size: 1.08em; font-weight: 700; color: var(--text); }
.rp-simple-sub { font-size: 1.04em; color: var(--text-2); line-height: inherit; margin-top: 1px; }

/* 页面内确认弹窗（替代 window.confirm） */
.cd-modal .cd-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 10px; padding-right: 24px; }
.cd-modal .cd-msg { font-size: 13.5px; line-height: 1.7; color: var(--text-2); margin-bottom: 18px; word-break: break-word; }

/* =========================================================
   全局丝滑优化 · 交互动效统一 / 键盘可达 / 闪烁抑制
   集中收尾覆盖，便于统一迭代
   （动效令牌 --dur-1 / --dur-2 / --ease-out 已在文件顶部 :root 定义）
   ========================================================= */

/* --- 键盘焦点环（统一） --- */
.btn:focus-visible,
.icon-btn:focus-visible,
.nav-item:focus-visible,
.chip:focus-visible,
.tab:focus-visible,
.modal-close:focus-visible,
.tracking-star:focus-visible,
.jobs-status-tab:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* --- 输入控件 hover 提示 --- */
.input:hover, .select:hover, .textarea:hover { border-color: var(--accent-2); }

/* --- 按钮按压反馈与状态过渡 --- */
.btn {
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease,
    color var(--dur-1) ease, box-shadow var(--dur-1) ease, transform var(--dur-1) ease;
}
.btn:not(:disabled):active { transform: translateY(1px); }
.icon-btn {
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease, transform var(--dur-1) ease;
}
.icon-btn:not(:disabled):active { transform: translateY(1px); }

/* 看板/列表动作按钮、星级按钮 hover 过渡 */
.tracking-card-actions button,
.tracking-list-actions button,
.tracking-star {
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease,
    border-color var(--dur-1) ease, transform var(--dur-1) ease;
}
.tracking-star:not(:disabled):active { transform: scale(.88); }

/* 表格行 hover 平滑（其余 hover 具体色由各组件自己控制） */
.table tbody tr,
.tracking-list-table tbody tr,
.xl-table tbody tr,
.ap-table tbody tr,
.jobs-table tbody tr { transition: background-color var(--dur-1) ease; }

/* --- 弹窗统一出入场 --- */
.modal-overlay { animation: mfade-in var(--dur-2) ease; }
.modal { animation: mpop-in var(--dur-2) var(--ease-out); }
@keyframes mfade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mpop-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-overlay.m-close {
  animation: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-1) ease;
}
.modal-overlay.m-close .modal {
  animation: none;
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity var(--dur-1) ease, transform var(--dur-1) ease;
}

/* --- SPA 页面切换：目标页淡入（仅透明度，避免 transform 影响内部 sticky/fixed） --- */
.page-section.p-enter { animation: psec-fade var(--dur-2) ease; }
@keyframes psec-fade { from { opacity: 0; } to { opacity: 1; } }

/* --- Toast 退场 --- */
.toast.hide { opacity: 0; transform: translateY(-8px); transition: opacity var(--dur-1) ease, transform var(--dur-1) ease; }

/* --- 区块加载反馈 --- */
/* 首次加载占位 */
.page-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 56px 16px; color: var(--text-2); font-size: 13px;
}
.page-loading::before {
  content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: pg-spin .7s linear infinite;
}
@keyframes pg-spin { to { transform: rotate(360deg); } }

/* 数据刷新中：旧内容轻微淡出并暂不可点，避免整块清空造成的闪烁 */
.is-loading {
  opacity: .55;
  pointer-events: none;
  transition: opacity var(--dur-1) ease;
}

/* =========================================================
   简历模板：预览区右侧模板选择面板 + 四种版式（作用于 .rp-page）
   新增模板：在 resume.js 的 TEMPLATES 追加一项，并在此补 `.rp-page.tpl-<key>` 样式
   ========================================================= */

/* --- 模板选择面板（工作区第三列） --- */
.re-template-panel {
  flex: none;
  width: 204px;
  background: var(--card);
  border-left: 1px solid var(--border);
  overflow: hidden;
}
.re-template-panel .re-panel-body { padding: 14px 14px 18px; }
.tpl-list { display: flex; flex-direction: column; gap: 10px; }

.tpl-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease,
    background-color var(--dur-1) ease, transform var(--dur-1) ease;
}
.tpl-card:hover {
  border-color: var(--accent-2);
  background: var(--card);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 50, 71, .10);
}
.tpl-card.active {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 2px rgba(47, 143, 131, .18);
}
.tpl-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.tpl-meta { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.tpl-name { font-size: 13px; font-weight: 700; color: var(--text); }
.tpl-tag {
  font-size: 10px; font-weight: 600; color: var(--text-2);
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 6px; white-space: nowrap;
}
.tpl-desc { display: block; margin-top: 3px; font-size: 11px; color: var(--text-2); }
.tpl-check {
  position: absolute; top: 12px; right: 12px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(37, 50, 71, .28);
}
.tpl-card.active .tpl-check { display: flex; }
.tpl-hint { margin: 14px 2px 0; font-size: 11px; line-height: 1.6; color: var(--text-3); }

/* --- 缩略图：占位线条模拟版式骨架（无需图片资源） --- */
.tpl-thumb {
  display: flex; flex-direction: column; gap: 6px;
  height: 96px; padding: 8px 9px;
  background: var(--card); border: 1px solid var(--border); border-radius: 7px;
  overflow: hidden;
}
.tpl-thumb.tt-sidebar { flex-direction: row; gap: 7px; }
.tt-line { display: block; height: 3px; border-radius: 2px; background: #dde4ec; }
.tt-line.tt-h { height: 5px; background: #c3cfdd; }
.tt-line.tt-center { margin-left: auto; margin-right: auto; }
.tt-head, .tt-sec, .tt-side, .tt-main { display: flex; flex-direction: column; gap: 5px; }
.tt-sec { gap: 4px; }
.tt-side { flex: 0 0 38%; background: #eef3f8; border-radius: 5px; padding: 7px 6px; }
.tt-main { flex: 1; gap: 8px; }

/* 缩略图配色 / 布局随模板区分，便于一眼辨别 */
.tpl-card[data-tpl="modern"] .tt-side .tt-h { background: #2f6fb0; }
.tpl-card[data-tpl="modern"] .tt-side { background: #e8f0fa; }
.tpl-card[data-tpl="business"] .tt-h { background: #002060; height: 6px; }
.tpl-card[data-tpl="english"] .tt-h { background: #1f2328; }
.tpl-card[data-tpl="english"] .tt-head { padding-bottom: 6px; border-bottom: 1px solid #1f2328; }
.tpl-card[data-tpl="english"] .tt-line.tt-center { margin-left: 0; margin-right: 0; }

/* --- 模板：作用于预览与导出的纸张内容 --- */
.rp-page { --rp-accent: #2f8f83; --rp-ink: #24313f; }

/* ① 现代侧栏（中文）：左侧信息栏（联系方式/技能/语言/证书）+ 右侧主栏 */
.rp-page.tpl-modern {
  display: grid;
  grid-template-columns: 33% 1fr;
  gap: 24px;
  align-items: start;
}
.rp-page.tpl-modern .rp-side {
  background: #eef4fa;
  border-radius: 10px;
  padding: 18px 16px;
  align-self: stretch;
}
.rp-page.tpl-modern .rp-main { min-width: 0; }
.rp-page.tpl-modern > .rp-side:only-child,
.rp-page.tpl-modern > .rp-main:only-child { grid-column: 1 / -1; }
/* 续页中无内容的一列：保留列宽占位，但不显示侧栏底色 */
.rp-page.tpl-modern > .rp-side--empty { background: transparent; border-radius: 0; }
.rp-page.tpl-modern .rp-header {
  text-align: left;
  border: 0;
  padding: 0 0 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(47, 111, 176, .25);
}
.rp-page.tpl-modern .rp-name { text-align: left; font-size: 1.75em; color: #1f4e7a; }
.rp-page.tpl-modern .rp-target { text-align: left; font-size: 1em; color: #2f6fb0; }
.rp-page.tpl-modern .rp-contact {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 3px;
}
.rp-page.tpl-modern .rp-section-title {
  color: #2f6fb0;
  border-bottom: 0;
  border-left: 3px solid #2f6fb0;
  padding: 0 0 0 8px;
  margin-bottom: 10px;
}
.rp-page.tpl-modern .rp-side .rp-section-title { font-size: 1em; }

/* ② 英文单栏（Classic）：国际规范单栏、左对齐。
   字体跟随全局统一（.rp-page 的思源宋体栈），不再单独声明无衬线栈，
   避免切换字号 / 字体后与其余模板观感不一致；Latin 字形由分片自带。 */
.rp-page.tpl-english .rp-header {
  text-align: left;
  border-bottom: 2px solid #1f2328;
  padding-bottom: 12px;
}
.rp-page.tpl-english .rp-name {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 1.92em;
  color: #1f2328;
}
.rp-page.tpl-english .rp-target {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .92em;
  color: #4a5560;
}
.rp-page.tpl-english .rp-contact { justify-content: flex-start; gap: 16px; }
.rp-page.tpl-english .rp-section { margin-bottom: 18px; }
.rp-page.tpl-english .rp-section-title {
  color: #1f2328;
  border-bottom: 1px solid #1f2328;
  font-size: 1em;
  letter-spacing: .1em;
}
/* 条目标题字号不再单独覆盖，统一用全局 .rp-item-title（1.17em），消除模板间字号差异 */

/* ③ 商务深蓝（中文）：参考商务简历范本（思源宋体/Times 衬线正文、深蓝板块标题、粗分隔线、居中抬头） */
.rp-page.tpl-business {
  --rp-accent: #002060;
  --rp-ink: #1f2430;
  /* 字体栈与全局 .rp-page 一致，无需单独声明 */
}
/* 抬头：姓名大字居中 + 联系方式一行（范本抬头无分隔线，分隔交给首个板块标题的粗底线） */
.rp-page.tpl-business .rp-header {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 20px;
}
.rp-page.tpl-business .rp-name { letter-spacing: .14em; }
.rp-page.tpl-business .rp-target { color: #002060; letter-spacing: .2em; }
.rp-page.tpl-business .rp-contact { gap: 14px; }
/* 联系方式前缀标签（仅显示层；伪元素不进入 innerHTML，编辑与回写同步不受影响，
   宽度已由 rpNaturalWidth 计入，不会挤压折行） */
.rp-page.tpl-business .rp-contact [data-pk="phone"]::before { content: "电话："; }
.rp-page.tpl-business .rp-contact [data-pk="email"]::before { content: "邮箱："; }
.rp-page.tpl-business .rp-contact [data-pk="city"]::before { content: "城市："; }
/* 板块标题：深蓝加粗 + 2.5px 粗底线（范本的核心分隔语言） */
.rp-page.tpl-business .rp-section-title {
  color: #002060;
  border-bottom: 2.5px solid #002060;
  padding-bottom: 4px;
  margin-bottom: 10px;
}

/* --- 模板面板 / 预览区响应式 ---
   A4 纸张按 794px 定尺渲染，由 JS 用 transform 等比缩放去适配预览框，
   因此排版、字号、间距在任何屏幕下都是同一套比例的等比缩放（不会变形或掉版）。
   这里只负责逐步回收编辑区 / 模板面板占用的宽度，把空间优先让给 A4 预览框。 */

/* 中桌面（≤1500）：三栏并存，模板面板略收窄 */
@media (max-width: 1500px) {
  .re-editor-panel { width: 45%; }
  .re-template-panel { width: 196px; }
}
/* 小桌面 / 横屏平板（≤1280）：模板卡片只留缩略图 + 名称 */
@media (max-width: 1280px) {
  .re-editor-panel { width: 43%; }
  .re-template-panel { width: 178px; }
  .re-template-panel .re-panel-body { padding: 12px; }
  .tpl-desc { display: none; }
  .tpl-thumb { height: 88px; }
}
/* 平板（≤1100）：模板面板收成纯缩略图窄条，宽度让给 A4 预览 */
@media (max-width: 1100px) {
  .re-editor-panel { width: 40%; min-width: 300px; }
  .re-template-panel { width: 100px; }
  .re-template-panel .re-panel-header { padding: 12px 8px; justify-content: center; }
  .re-template-panel .re-panel-title { font-size: 12px; gap: 0; justify-content: center; }
  .re-template-panel .re-title-ico,
  .re-template-panel .re-panel-sub { display: none; }
  .re-template-panel .re-panel-body { padding: 10px 8px 14px; }
  .tpl-list { gap: 10px; }
  .tpl-card { padding: 5px; border-radius: 8px; }
  .tpl-meta, .tpl-desc, .tpl-hint { display: none; }
  .tpl-thumb { height: 84px; padding: 6px; gap: 5px; }
  .tpl-check { top: 8px; right: 8px; }
}
/* 移动端 / 竖屏平板（≤860）：编辑区与预览区上下堆叠，模板面板转为横向缩略图条
   注意：堆叠后主轴变为纵向，必须用 flex: none 关掉基础样式的 flex: 1
   （flex-basis:0 会让显式 height 失效、预览区被压扁到只剩几十像素） */
@media (max-width: 860px) {
  .re-editor-panel {
    flex: none;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 56vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .re-preview-panel { flex: none; height: 68vh; min-height: 360px; }
  .re-preview-scroller { padding: 12px 0; }
  .re-template-panel { flex: none; width: 100%; border-left: none; border-top: 1px solid var(--border); }
  .re-template-panel .re-panel-header { padding: 12px 14px; justify-content: flex-start; }
  .re-template-panel .re-panel-title { font-size: 14px; gap: 8px; justify-content: flex-start; }
  .re-template-panel .re-title-ico { display: inline-flex; }
  .re-template-panel .re-panel-sub { display: block; }
  .re-template-panel .re-panel-body { padding: 12px 14px 16px; }
  .tpl-list { flex-direction: row; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
  .tpl-card { flex: 0 0 128px; padding: 6px; }
  .tpl-meta { display: flex; }
  .tpl-tag { display: none; }
  .tpl-thumb { height: 84px; }
  .tpl-hint { display: none; }
}
/* 手机竖屏（≤640）：进一步压缩面板头部与工具条，避免换行溢出 */
@media (max-width: 640px) {
  .re-panel-header { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }
  .re-editor-panel { height: 52vh; }
  .re-preview-panel { height: 62vh; min-height: 300px; }
  .re-preview-scroller { padding: 10px 0; }
}

/* --- 低动效偏好 --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* 加载指示器保留缓慢旋转，静态圆环无法表达「进行中」 */
  .page-loading::before {
    animation-duration: .9s !important;
    animation-iteration-count: infinite !important;
  }
}

/* --- 富文本内字号控件（工具栏最左，点「A」向下展开档位面板） --- */
.re-rt-sep { flex: none; width: 1px; height: 18px; margin: 0 4px; background: var(--border); }
.re-rt-fontbtn .re-rt-fontval { font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: -.5px; }
.re-rt-fontpop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: none;
  z-index: 2;
  grid-template-columns: repeat(3, 44px);
  gap: 2px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  max-height: 208px;
  overflow-y: auto;
}
.re-rt-fontpop.open { display: grid; }
.re-rt-size {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.re-rt-size:hover { background: var(--bg-2); color: var(--accent); }

/* --- 合体按钮组：中间无缝、无边框，左右圆角外露 --- */
.re-merge-group { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--card); }
.re-merge-group .re-btn-tiny { border: none; border-radius: 0; background: transparent; box-shadow: none; }
.re-merge-group .re-btn-tiny:hover { background: var(--accent-light); border-color: transparent; }
.re-merge-group .re-btn-tiny + .re-btn-tiny { border-left: 1px solid var(--border); }

/* ==================== 简历内容字体（顶栏「字体」下拉） ====================
   微软雅黑是商业授权字体，不能随站点分发：无衬线字体栈优先命中用户本机字体，
   未安装时回退 data/fonts 下的开源替代思源黑体（SIL OFL 1.1）。
   衬线直接使用随仓库分发的思源宋体（data/SourceHanSerifCN-Regular.otf 分片）。
   这两条规则置于样式表末尾，确保能覆盖各模板自带的 font-family。 */
.rf-font-sans {
  font-family: 'Resume Sans SC', 'Microsoft YaHei', 'Microsoft YaHei UI',
    'PingFang SC', 'Hiragino Sans GB', 'Helvetica Neue', Arial, sans-serif;
}
.rf-font-serif {
  font-family: 'Offerio Serif SC', 'Noto Serif CJK SC', 'Source Han Serif CN',
    'Songti SC', 'STSong', 'SimSun', 'Times New Roman', serif;
}

/* ==================== 导出简历：矢量打印（印刷级） ====================
   1. 纸张与 A4 页盒同为 794×1123px（96dpi），@page 去掉页边距后「一张纸 = 一页」；
   2. 文字与矢量图形直接写入 PDF，可无限缩放不失真（旧截图方案仅约 192dpi 位图）；
   3. 仅在 resume.js 打印前给 body 加 .printing-resume 时生效，不影响其他页面打印。 */
@media print {
  @page { size: A4 portrait; margin: 0; }

  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }

  /* 只打印纸面：应用外壳、编辑区、模板栏、富文本气泡一律不出现 */
  body.printing-resume .sidebar,
  body.printing-resume .sidebar-scrim,
  body.printing-resume .topbar,
  body.printing-resume .toast-container,
  body.printing-resume .re-toolbar,
  body.printing-resume .re-panel-header,
  body.printing-resume .re-editor-panel,
  body.printing-resume .re-template-panel,
  body.printing-resume .re-rt-bubble,
  body.printing-resume .rp-measure-stage { display: none !important; }

  /* #app 是 flex + 100vh + overflow:hidden 的应用外壳，漏掉它会把整份简历裁到一屏高度，
     导出的 PDF 就只剩一页（与所选模板无关） */
  body.printing-resume #app {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* 解除外壳的固定高度 / 滚动 / 缩放包裹，让纸张回到普通文档流 */
  body.printing-resume .main,
  body.printing-resume .scroll-wrap,
  body.printing-resume .page-section[data-key="resume"],
  body.printing-resume .content,
  body.printing-resume .resume-editor-wrap,
  body.printing-resume .re-workspace,
  body.printing-resume .re-preview-panel,
  body.printing-resume .re-preview-scroller,
  body.printing-resume .rp-zoom-wrap,
  body.printing-resume .rp-stack {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.printing-resume .rp-page {
    /* 纸张尺寸与左右边距与屏幕完全一致（793×1122，padding 48×52），
       预览与导出用同一套版心，换行/分页才可能严格一致；
       overflow:hidden 杜绝内容撑破页盒多出空白页。
       「导出比预览提前折行」的根因是打印时个别 unicode-range 分片未加载、
       缺字回退到更宽的系统宋体——改由 printResumePdf 打印前加载整页文字的分片解决。 */
    width: 793px;
    height: 1122px;
    max-height: 1122px;
    padding: 48px 52px;
    overflow: hidden;
    border-radius: 0 !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
    break-after: page;
    page-break-after: always;
  }
  body.printing-resume .rp-page:last-child { break-after: auto; page-break-after: auto; }
  /* 空字段不把浅灰占位文案印到纸上 */
  body.printing-resume .rp-page .rp-edit:empty::before { content: "" !important; }
  /* 底色 / 色块按原样输出（浏览器打印默认会丢弃背景） */
  body.printing-resume .rp-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==================== 侧栏 io 图标（IO求职社区） ==================== */
.nav-io {
  flex: none;
  width: 18px; height: 18px;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* ==================== IO求职社区 ==================== */
.cm-page { max-width: 1200px; margin: 0 auto; padding: 26px 6px 56px; }

/* 入场动画：backwards 保证延迟期间隐藏、结束后交还控制权给 hover */
.cm-anim { animation: cmIn 560ms cubic-bezier(.22, 1, .28, 1) backwards; animation-delay: var(--d, 0ms); }
@keyframes cmIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* ---- 大标题：直接排版在页面背景上（无卡片框） ---- */
.cm-title {
  margin: 0 0 32px;
  font-size: 40px; font-weight: 800; line-height: 1.3;
  letter-spacing: 1px; color: var(--text);
}
.cm-title .cm-tick { color: var(--accent); }

/* ---- 用户评价墙：浅蓝灰底、无边框圆角卡片 ---- */
.cm-voices {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.cm-card {
  display: flex; flex-direction: column; gap: 14px;
  background: #F6F8FB;
  border-radius: 14px;
  padding: 24px 22px 20px;
  transition: transform 220ms cubic-bezier(.22, 1, .28, 1), box-shadow 220ms ease, background 220ms ease;
}
.cm-card:hover {
  transform: translateY(-4px);
  background: #EFF3F9;
  box-shadow: 0 12px 28px rgba(31, 58, 94, .08);
}
.cm-stars { display: flex; gap: 3px; color: var(--accent); }
.cm-stars svg { width: 14px; height: 14px; fill: currentColor; }
.cm-quote {
  flex: 1;
  font-size: 13.5px; line-height: 1.95; color: var(--text-2);
  letter-spacing: .2px;
}
.cm-who { display: flex; align-items: center; gap: 10px; }
.cm-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.cm-name em { font-style: normal; font-weight: 400; color: var(--text-3); margin-left: 6px; font-size: 12.5px; }

/* 评价墙下的小字说明 */
.cm-note {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12px; letter-spacing: .5px;
  color: var(--text-3);
}

/* ---- 底部：开发者的话 + 双二维码（纯排版，仅顶部分隔线） ---- */
.cm-join {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--divider);
  display: grid; grid-template-columns: 1.4fr .9fr .9fr; gap: 28px;
  align-items: start;
}
.cm-dev h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--text);
  margin-bottom: 12px;
}
.cm-dev h2 svg { width: 16px; height: 16px; color: var(--accent); }
.cm-dev p { font-size: 13.5px; line-height: 2.1; color: var(--text-2); letter-spacing: .2px; }
.cm-dev p.cm-dev-hi { color: var(--text); font-weight: 600; }

.cm-qr {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
.cm-qr-title {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.cm-qr-title svg { width: 14px; height: 14px; color: var(--accent); }
.cm-qr-avatar { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.cm-qr-box { width: 100%; max-width: 196px; }
.cm-qr-box img { display: block; width: 100%; height: auto; border-radius: 10px; }
.cm-qr-tip { font-size: 12px; color: var(--text-3); letter-spacing: .5px; }

/* ---- 响应式 ---- */
@media (max-width: 1024px) {
  .cm-title { font-size: 32px; }
  .cm-voices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-join { grid-template-columns: 1fr 1fr; }
  .cm-dev { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .cm-title { font-size: 26px; letter-spacing: .5px; }
  .cm-voices { grid-template-columns: 1fr; }
  .cm-join { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-anim { animation: none; }
  .cm-card, .cm-qr { transition: none; }
}