/* === app.css：主页 index.html 业务样式（result / score / study-plan / history / tour / onboard / compare / etc） === */


/* 历史抽屉 */
.history-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 92vw;
  height: 100%;
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: -6px 0 24px rgba(0, 0, 0, .08);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
}

.history-drawer.show { transform: translateX(0); }


.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.drawer-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}


.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}


.history-item {
  padding: 12px;
  margin-bottom: 10px;
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.history-item:hover {
  border-color: var(--primary);
  box-shadow: 0 1px 4px rgba(16, 163, 127, .12);
}

.history-item-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.history-item-time {
  font-size: 12px;
  color: var(--muted);
}

.history-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Task 20260624：.history-fav / .history-del 旧样式已合并到 .modal-btn--icon 体系，这里保留语义钩子供 JS 切换态 */

.history-item-summary {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  margin: 4px 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.history-item-score {
  font-size: 13px;
  font-weight: 600;
}


.drawer-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Task 20260624：.drawer-clear / .drawer-compare 旧样式已合并到 .modal-btn--danger / .modal-btn--primary
   HTML 类名作语义钩子保留，CSS 不再单独定义 */

/* 历史卡片选中态（抽屉卡片 / 选择 modal 复用） */
.history-item.selected {
  border-color: var(--primary);
  background: #ecfdf5;
}

/* Task 38：.history-item-compare 相关样式已删除（抽屉复选框移除） */

.history-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}


.layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
  padding: 16px 32px 32px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}


/* Sticky 左侧表单：分析报告很长时，滚动右侧结果区，左侧表单始终可见
   - align-self: start 防止 grid item 拉伸到 row 全高（否则 sticky 失效）
   - top: 16px 留出 layout padding 的视觉间距
   - max-height + overflow-y: 表单本身很高时（JD/简历都很长）也能内部滚动
   - 移动端（≤900px 单列布局）取消 sticky，避免遮挡 */
.input-panel {
  position: sticky;
  top: 16px;
  align-self: start;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

@media (max-width: 900px) {
  .input-panel { position: static; max-height: none; overflow-y: visible; }
}


.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.tabs button {
  background: none;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
}

.tabs button.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tabs button:disabled { opacity: .4; cursor: not-allowed; }


#submit {
  width: 100%;
  padding: 10px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

#submit:disabled { opacity: .6; cursor: not-allowed; }

#submit:hover:not(:disabled) { background: #0e8e6e; }


.error {
  margin-top: 10px;
  padding: 8px 10px;
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 6px;
  font-size: 13px;
}


/* Task 9：错误提示分层 —— 黄色 warning（NO_API_KEY / PROVIDER_TIMEOUT） */
.error.warning {
  background: #fef3c7;
  color: #92400e;
  border-left: 4px solid #f59e0b;
}


.result-panel { display: flex; flex-direction: column; }

.score-board {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0 16px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 16px;
}

.score-meta b { font-size: 14px; }

/* Provider/Model 隐藏后，空 .score-meta 不占高度 */
.score-meta:empty { display: none; }

.score-meta-label { font-size: 15px; font-weight: 600; color: var(--text); }

.score-meta-hint { font-size: 12px; color: #6b7280; margin-top: 2px; }

.score-meta-anchor-brief { font-size: 11px; color: #9ca3af; margin-top: 2px; }


.result { flex: 1; min-height: 400px; }


.export-toolbar {
  display: flex;
  gap: 8px;
  padding: 10px 0;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.export-btn {
  padding: 6px 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.export-btn:hover { background: #0e8e6e; }

.export-btn:active { transform: translateY(1px); }

.placeholder {
  color: var(--muted);
  text-align: center;
  padding: 80px 20px;
  font-size: 13px;
}


/* ============================================================
   Task 7：分阶段进度卡 + 失败横条
   - .progress-card：默认隐藏，分析中显示，500ms 后淡出
   - .progress-step：单条进度项（图标 + 文案）
   - .result-error：第二段失败红色横条
   ============================================================ */
.progress-card[hidden] { display: none !important; }


.progress-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: opacity .4s ease;
}


.progress-card.fading {
  opacity: 0;
}


.progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
}


.progress-step[hidden] { display: none !important; }


.progress-step .progress-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}


.progress-step .progress-label {
  flex: 1;
  min-width: 0;
}


/* 进行中：⏳ 旋转动画 */
.progress-step.is-active .progress-icon {
  animation: progress-spin 1.2s linear infinite;
}


/* 完成：✓ 绿色 */
.progress-step.is-done {
  border-color: #bbf7d0;
  background: #f0fdf4;
}


.progress-step.is-done .progress-icon {
  color: var(--primary);
  font-weight: 600;
}


.progress-step.is-done .progress-label {
  color: #166534;
}


/* 失败：✗ 红色 */
.progress-step.is-error {
  border-color: #fca5a5;
  background: #fef2f2;
}


.progress-step.is-error .progress-icon {
  color: #ef4444;
  font-weight: 600;
}


.progress-step.is-error .progress-label {
  color: #b91c1c;
}


@keyframes progress-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* 第二段失败红色横条（结果区顶部） */
.result-error[hidden] { display: none !important; }


.result-error {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: #fee2e2;
  color: #b91c1c;
  border-left: 4px solid #ef4444;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
}


/* Task 9：黄色 warning（NO_API_KEY / PROVIDER_TIMEOUT / 兜底降级后的警告） */
.result-error.warning {
  background: #fef3c7;
  color: #92400e;
  border-left-color: #f59e0b;
}


/* ============================================================
   Task 3：对比可视化组件（雷达图 + 柱状图）样式
   纯 SVG，统一坐标系，所有元素由 viewBox 控制
   ============================================================ */
.chart-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px;
}

.radar-chart,
.bar-chart {
  display: block;
  background: #fff;
  font-family: inherit;
}

.radar-chart {
  width: 240px;
  height: 240px;
}

.bar-chart {
  width: 100%;
  max-width: 320px;
  height: auto;
}


/* 雷达图：网格、坐标轴、多边形 */
.radar-grid {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 1;
}

.radar-grid-outer {
  stroke: #d1d5db;
}

.radar-axis {
  stroke: #e5e7eb;
  stroke-width: 1;
}

.radar-axis-label {
  fill: #4b5563;
  font-size: 11px;
  font-family: inherit;
}

.radar-scale-label {
  fill: #9ca3af;
  font-size: 9px;
  font-family: inherit;
}

.radar-polygon {
  fill-opacity: 0.15;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.radar-vertex {
  stroke-width: 1.5;
}


/* 雷达图图例（位于 SVG 下方） */
.radar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  font-size: 12px;
  color: var(--text);
}

.radar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.radar-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}


/* 柱状图：柱体、轴线、标签 */
.bar-axis {
  stroke: #d1d5db;
  stroke-width: 1;
}

.bar-track {
  fill: #f3f4f6;
}

.bar-fill {
  stroke: none;
}

.bar-label {
  fill: var(--text);
  font-size: 11px;
  font-family: inherit;
}

.bar-value {
  fill: var(--text);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
}

.bar-title {
  fill: var(--muted);
  font-size: 12px;
  font-family: inherit;
}

.chart-empty {
  fill: var(--muted);
  font-size: 13px;
  font-family: inherit;
}


/* ============================================================
   Task 5：对比视图 modal 弹窗样式
   - .compare-modal-mask：半透明遮罩，fixed 全屏覆盖
   - .compare-modal：容器，居中、限宽限高、内部滚动
   - 主页 .layout 不再隐藏，仅靠遮罩盖住
   ============================================================ */
.compare-modal-mask[hidden] { display: none !important; }

.compare-modal[hidden] { display: none !important; }


.compare-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, .45);
}


.compare-modal {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2001;
  width: calc(100vw - 48px);
  max-width: 1200px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  padding: 0 24px 24px;
}


.compare-modal-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 12px;
  margin-bottom: 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}


.compare-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}


.compare-modal-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


/* Task 20260624：.compare-modal-btn / .compare-modal-close 旧样式已合并到 .modal-btn--ghost / .modal-btn--icon */

.compare-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}


/* modal 打开时锁定背景滚动 */
body.compare-modal-open { overflow: hidden; }

.compare-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}

.compare-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .compare-charts { grid-template-columns: 1fr; }
}

.compare-chart-wrap {
  padding: 12px;
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.compare-section-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.compare-conclusion {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.conclusion-main {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.conclusion-main b {
  color: var(--primary);
  font-weight: 600;
}

.conclusion-warn {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 6px;
  font-size: 13px;
}

.conclusion-tip {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 6px;
  font-size: 13px;
}


/* ============================================================
   Task 8：P0-4 evidence 突出展示 + 评分锚点说明
   - .score-anchor：ⓘ 图标 + 悬浮 tooltip（CSS-only，无 JS 库）
   - .report-disclaimer：报告顶部声明（小号灰字 + 左边框）
   - .evidence-board / .evidence-card：维度卡片网格（响应式 2 列 / 1 列）
   ============================================================ */

/* score-board 不能 overflow:hidden 否则 tooltip 被裁剪 */
.score-board { overflow: visible; }


.score-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  /* button 默认样式重置（原 div → button 后避免灰边/默认背景污染视觉） */
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: help;
  outline: none;
}


.score-anchor:focus-visible {
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(16, 163, 127, .35);
}


.anchor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 1;
}


.score-anchor-tooltip,
.anchor-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100;
  /* min-width 必须容纳最长 desc「不建议直接投递，先补强简历」13 字符 + dot+score+gap+padding
     总宽 ≈ 16+10+50+10+162+28(padding) ≈ 276px，设 300px 留余量防换行 */
  min-width: 300px;
  padding: 12px 14px;
  background: #1f2937;
  color: #fff;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.7;
  /* 双层阴影：深色 tooltip 在浅色背景上的标配 */
  box-shadow:
    0 8px 24px rgba(0, 0, 0, .22),
    0 2px 6px rgba(0, 0, 0, .12);
  /* 确保在 score-board 边界外可见 */
  white-space: normal;
}


/* 顶部小标题：信息分层 + 上下文标识 */
.anchor-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}


/* 用原生 <table> 强制 3 行 dot/score/desc 列对齐
 * 浏览器 table 布局原生保证「同一列所有 cell 起点对齐」
 * 比 grid/flex 更稳，避免任何渲染差异（用户主观「没对齐」的兜底） */
.anchor-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;        /* 固定列宽，不因内容扩展 */
}
.anchor-table td {
  padding: 4px 6px 4px 0;     /* 右 padding 留间距 */
  vertical-align: middle;
  border: none;
}
.anchor-table .dot-cell {
  width: 16px;
  text-align: center;
}
.anchor-table .score-cell {
  width: 52px;
  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.anchor-table .desc-cell {
  color: rgba(255, 255, 255, .72);
}


.anchor-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  /* 深色环增强 dot 视觉权重 */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .08);
}


/* 说明文字次级灰白：与分数主白形成层次 */
.anchor-desc {
  color: rgba(255, 255, 255, .72);
}


/* 三角指示器 */
.anchor-tooltip::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 14px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #1f2937;
}


.score-anchor:hover .anchor-tooltip,
.score-anchor:focus .anchor-tooltip,
.score-anchor:focus-within .anchor-tooltip,
.score-anchor.is-open .anchor-tooltip {
  display: block;
}


/* 报告顶部声明 */
.report-disclaimer {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: #f9fafb;
  color: var(--muted);
  border-left: 3px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.6;
}


.report-disclaimer[hidden] { display: none !important; }


/* evidence 卡片网格 */
.evidence-board[hidden] { display: none !important; }


.evidence-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}


.evidence-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}


.evidence-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}


.evidence-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  /* 长 name 截断避免撑破 grid */
  max-width: 75%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.evidence-card-score {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}


.evidence-card-body {
  margin: 0;
  padding: 8px 10px;
  background: #f9fafb;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  /* blockquote 风格但不过分突出，让整张卡更协调 */
  border-left: 2px solid #e5e7eb;
  /* 文本过多时垂直滚动而非破坏卡片高度 */
  max-height: 180px;
  overflow-y: auto;
  word-break: break-word;
}


/* ============================================================
   Task 10：30 天学习计划（按需触发，独立 section）
   - .study-plan-toolbar：与 .export-toolbar 同级，按钮 + 失败横条
   - .study-plan-section：渲染区域，追加到 #result 末尾
   - .study-week-card：单周卡片（响应式 2x2 / 单列）
   ============================================================ */

.study-plan-toolbar[hidden] { display: none !important; }


.study-plan-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
  margin-bottom: 12px;
}


.study-plan-btn {
  /* 复用 .export-btn 基础样式，加一点学习计划独有的视觉强调 */
  background: var(--accent);
}


.study-plan-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}


.study-plan-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  background: #d1d5db;
}


/* Task 11 H6：学习计划按钮下方常显 hint */
.study-plan-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}


/* 学习计划按钮下方的失败横条 —— 复用 .result-error 基础样式 */
#study-plan-error[hidden] { display: none !important; }


#study-plan-error {
  margin: 0;
}


/* 学习计划渲染区域 */
.study-plan-section[hidden] { display: none !important; }


.study-plan-section {
  margin: 24px 0 0;
  /* Task 33：避免被顶栏/浮动按钮遮挡 scrollIntoView 的目标位置 */
  scroll-margin-top: 80px;
  /* 2026-07-01：去掉外层 padding/background/border/border-radius —— 让内层 details 直接显示，
     与面试题折叠（.interview-collapse）视觉一致，避免「框中框」嵌套感。
     外层只负责 hidden 控制 + scroll 锚点。 */
}


/* Task 34：学习计划导出工具栏
 * - 复用 .export-toolbar / .export-btn 基础样式
 * - 默认 hidden（HTML 已设），studyPlanGenerated=true 时由 JS 移除 hidden
 */
.study-plan-export-toolbar[hidden] { display: none !important; }

.study-plan-export-toolbar {
  margin-bottom: 12px;
  padding: 8px 0;
}

/* 2026-07-01：toolbar 被移到 details 内（summary 之后、content 之前），
   需要让 toolbar 不贴 summary 的 border-bottom，且左右与 content 对齐（content 是 16px 20px）。
   去掉 margin-bottom（紧邻 content，无需再拉远）。 */
.study-plan-collapse > .study-plan-export-toolbar {
  padding: 12px 20px 0;
  margin-bottom: 0;
}


.study-plan-header {
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}


.study-plan-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}


.study-plan-goal {
  font-size: 14px;
  color: #1f2937;
  line-height: 1.6;
  margin-bottom: 6px;
}


.study-plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}


.study-plan-hours b {
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}


.study-plan-warning {
  margin-top: 8px;
  padding: 8px 12px;
  background: #fef3c7;
  color: #92400e;
  border-left: 4px solid #f59e0b;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.6;
}


.study-plan-weeks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}


@media (max-width: 900px) {
  .study-plan-weeks {
    grid-template-columns: 1fr;
  }
}


.study-week-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}


.study-week-header {
  display: flex;
  align-items: center;
  gap: 8px;
}


.study-week-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}


.study-week-theme {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.study-week-hours {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
}


.study-week-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


.study-block-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}


.study-task-list,
.study-resource-list,
.study-acceptance-list {
  margin: 0;
  padding: 0;
  list-style: none;
}


.study-task {
  padding: 6px 8px;
  background: #f9fafb;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.6;
}


.study-task + .study-task {
  margin-top: 4px;
}


.study-task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}


.study-task-name {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-weight: 500;
  word-break: break-word;
}


.study-task-hours {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  background: var(--accent-bg);
  color: var(--accent-text);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}


.study-task-detail {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  word-break: break-word;
}


.study-resource {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
}


.study-resource + .study-resource {
  margin-top: 4px;
}


.study-resource:hover {
  background: #f3f4f6;
}


.study-resource-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 14px;
  flex-shrink: 0;
}


.study-resource-body {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}


.study-resource-link {
  color: var(--accent-hover);
  text-decoration: none;
  font-weight: 500;
}


.study-resource-link:hover {
  text-decoration: underline;
}


.study-resource-title {
  color: var(--text);
  font-weight: 500;
}


.study-resource-note {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}


.study-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}


.acceptance-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #10a37f;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 3px;
}


.study-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 4px 8px;
}


.study-plan-footer {
  margin-top: 16px;
  padding: 12px 14px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
}


.study-plan-acceptance-summary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: #166534;
}


.study-plan-acceptance-summary .acceptance-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #10a37f;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}


/* ============================================================
   Task 11 H1：右下角浮动「试试示例」按钮
   - position: fixed 避免被主页滚动影响
   - z-index: 1500（高于 .history-drawer 的 1000，低于 .compare-modal 的 2000）
   - hover 时上浮 2px，加阴影
   ============================================================ */
.floating-example-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1500;
  padding: 10px 18px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(16, 163, 127, .28);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}


.floating-example-btn:hover {
  background: #0e8e6e;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 163, 127, .35);
}


.floating-example-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(16, 163, 127, .25);
}


.floating-example-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}


/* 引导气泡容器 */
.onboard-bubble[hidden] { display: none !important; }


.onboard-bubble {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 1600;
  width: 360px;
  max-width: calc(100vw - 48px);
  background: var(--panel);
  border: 1px solid var(--primary);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(16, 163, 127, .18), 0 2px 6px rgba(0, 0, 0, .06);
  padding: 20px 20px 16px;
  font-family: inherit;
  /* 进入动画 */
  animation: onboard-pop .25s ease;
}


@keyframes onboard-pop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* 小三角指向 #btn-example（右下角） */
.onboard-bubble::after {
  content: '';
  position: absolute;
  right: 28px;
  bottom: -7px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--primary);
}

.onboard-bubble::before {
  /* 内层白三角，覆盖在外三角上，做出边框效果 */
  content: '';
  position: absolute;
  right: 29px;
  bottom: -5px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--panel);
  z-index: 1;
}


.onboard-close {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  /* 触摸友好：实际命中区域 44x44 */
}

.onboard-close:hover {
  color: var(--text);
  background: #f3f4f6;
}


.onboard-title {
  margin: 0 32px 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}


.onboard-subtitle {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}


.onboard-steps {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.onboard-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 8px;
}


.onboard-step-icon {
  font-size: 18px;
  line-height: 22px;
  flex-shrink: 0;
}


.onboard-step-body {
  flex: 1;
  min-width: 0;
}


.onboard-step-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}


.onboard-step-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  word-break: break-word;
}


.onboard-footer {
  display: flex;
  justify-content: flex-end;
}


.onboard-ok-btn {
  min-height: 44px;
  padding: 10px 24px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}

.onboard-ok-btn:hover { background: #0e8e6e; }

.onboard-ok-btn:active { transform: translateY(1px); }


/* 移动端：≤768px 居中全宽（减边距），三角居中 */
@media (max-width: 768px) {
  .onboard-bubble {
    left: 16px;
    right: 16px;
    bottom: 24px;
    width: auto;
    max-width: none;
    margin: 0;
  }
  .onboard-bubble::after,
  .onboard-bubble::before {
    /* 移动端不再指向右下角按钮（气泡已全宽），隐藏小三角 */
    display: none;
  }
  /* ≤768px：按钮缩小 padding，保持文字可见（回滚 Task 38 隐藏 label 的改动） */
  .help-btn,
  .history-btn,
  .compare-btn,
  .auth-login-btn,
  .auth-logout-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
}


/* ============================================================
   Task 18：登录页 + 顶栏登录区域 + 401 banner
   - .auth-area：topbar 右侧登录区域容器
   - .auth-login-btn / .auth-logout-btn：与 .history-btn 同风格
   - .auth-user：已登录时的用户名显示
   - .auth-expired-banner：401 后顶部红色横条，5 秒自动隐藏
   - .login-page / .login-main / .login-card：登录页主体布局
   ============================================================ */

/* 登录区域容器：用 border-left 与前面的按钮组分隔（回滚 Task 38 的 margin-left 改动） */
.auth-area {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-left: 1px solid var(--border);
  padding-left: 12px;
}

.auth-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}


/* 401 banner：固定在顶栏下方居中 */
.auth-expired-banner[hidden] { display: none !important; }


.auth-expired-banner {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1900;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
  border-left: 4px solid #ef4444;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(239, 68, 68, .15);
  animation: auth-banner-pop .25s ease;
}


@keyframes auth-banner-pop {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}


.auth-expired-text {
  font-weight: 500;
}


.auth-expired-link {
  color: #b91c1c;
  font-weight: 600;
  text-decoration: underline;
}


.auth-expired-link:hover {
  color: #991b1b;
}


.github-icon {
  font-size: 16px;
  line-height: 1;
}


/* 用户名 / email */
.col-name { min-width: 180px; }

.user-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.user-name {
  font-weight: 500;
  color: var(--text);
}

.user-name:has(+ .self-badge) {
  display: inline-block;
}

.user-email {
  color: var(--muted);
  font-size: 12px;
}

.self-badge {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 6px;
  font-size: 11px;
  color: #fff;
  background: var(--primary);
  border-radius: 9px;
  line-height: 1.4;
}


/* 类型 / external_id */
.col-type { min-width: 130px; }

.external-id {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
  word-break: break-all;
}


/* 角色 / 状态 badge */
.col-role, .col-status { min-width: 90px; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 500;
  white-space: nowrap;
}


/* 试用次数 */
.col-trial { min-width: 150px; }

.trial-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trial-text {
  font-size: 12px;
  color: var(--text);
}

.trial-danger {
  color: #b91c1c;
  font-weight: 600;
}

.trial-bar {
  height: 6px;
  background: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
}

.trial-bar-fill {
  height: 100%;
  background: var(--primary);
  transition: width 0.2s ease;
}

.trial-bar-danger {
  background: #ef4444;
}


.col-time {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  min-width: 140px;
}


/* 操作按钮组 */
.col-ops { min-width: 260px; }

.ops-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.code-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  word-break: break-all;
}

.code-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--text);
  letter-spacing: 0.3px;
  user-select: all;
  word-break: break-all;
  max-width: 280px;
}

.code-copy-btn {
  padding: 2px 8px;
  font-size: 12px;
}

.code-name {
  color: var(--text);
}

.quota-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quota-text {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}

.quota-danger {
  color: #b91c1c;
  font-weight: 600;
}

.quota-bar {
  height: 6px;
  background: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
}

.quota-bar-fill {
  height: 100%;
  background: var(--primary);
  transition: width 0.2s ease;
}

.quota-bar-danger {
  background: #ef4444;
}

.code-bound-empty {
  color: var(--muted);
  font-size: 13px;
}

.code-bound-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text);
}


/* ============================================================
   Task 33：学习计划生成感知增强
   - 区域边框闪烁（3 次 × 800ms = 2400ms）
   - 顶部 toast banner（成功语义，主色绿）
   - 按钮已生成态（灰底 + ✓ 前缀，复用 :disabled 视觉，但 disabled=false）
   - 打印兼容 + prefers-reduced-motion 无障碍降级
   ============================================================ */

/* 1. 区域闪烁动画（border-color + box-shadow，不动 layout） */
@keyframes study-plan-flash {
  0%, 100% {
    border-color: var(--primary);
    box-shadow: 0 0 0 0 rgba(16, 163, 127, 0);
  }
  50% {
    border-color: var(--primary);
    box-shadow: 0 0 12px 2px rgba(16, 163, 127, 0.4);
  }
}


/* flash 动画转嫁到内层 details（外层 .study-plan-section 已透明去嵌套）
 * 原本 .study-plan-section.flash 加 border 会导致「框中框」+ 动画期间视觉错乱 */
.study-plan-section.flash .study-plan-collapse {
  animation: study-plan-flash 800ms ease-in-out 3;
}


/* 2. 顶部 toast banner（独立实例，不复用 .toast-container） */
.study-plan-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  font-weight: 500;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  max-width: calc(100% - 32px);
}


.study-plan-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


.study-plan-toast[hidden] {
  display: none !important;
}


/* 3. 按钮已生成态：灰底，但 disabled=false 仍可点击（触发 confirm） */
.study-plan-btn.is-done,
.study-plan-btn.is-done:hover {
  background: #9ca3af;
  color: #fff;
  cursor: pointer;
  opacity: 1;
}


/* 5. 无障碍：减少动画偏好下关闭闪烁（保留静态高亮 + 缩短 toast 过渡） */
@media (prefers-reduced-motion: reduce) {
  .study-plan-section.flash {
    animation: none;
    border: 2px solid var(--primary);
    box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.18);
  }
  .study-plan-toast {
    transition: opacity 0.1s ease;
  }
  /* smooth 滚动对部分用户也会引起不适，降级为 auto */
  html {
    scroll-behavior: auto;
  }
}


/* ============================================================
 * Task 36：实时反馈（JD 技能 chip + 简历命中/缺失 + 预估匹配度）
 * ============================================================ */
.realtime-feedback {
  margin-bottom: 8px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.6;
}

.realtime-feedback[hidden] { display: none !important; }


/* JD 字符计数（10K 上限提示） */
.input-counter {
  text-align: right;
  font-size: 11px;
  color: var(--muted);
  margin: 2px 0 6px;
  user-select: none;
}
.input-counter.is-over {
  color: #ef4444;
  font-weight: 600;
}


.rt-label { color: var(--muted); margin-right: 6px; }

.rt-empty { color: var(--muted); font-style: italic; }

.rt-more { color: var(--muted); margin-left: 4px; font-size: 11px; }


.rt-chip {
  display: inline-block;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 11px;
  color: var(--text);
}

.rt-chip.rt-hit {
  background: #ecfdf5;
  border-color: var(--primary);
  color: #065f46;
}

.rt-chip.rt-miss {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}


.rt-score-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.rt-score {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.rt-score-high { color: var(--primary); }

.rt-score-mid { color: #f59e0b; }

.rt-score-low { color: #ef4444; }

.rt-detail { color: var(--muted); font-size: 12px; }


.rt-group {
  margin: 6px 0;
}


.rt-hint {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}


/* ============================================================
   Task 37：topbar 对比按钮 + 选择岗位 modal
   - .compare-btn 样式由顶部 .help-btn / .history-btn 共享基底提供
   - .compare-badge.full：已选满 3 条时的红色提示态
   - .compare-select-modal-*：与对比结果 modal（Task 5）同 z-index，互斥显示
   ============================================================ */
/* .compare-btn 样式见顶部统一基底（与 .help-btn / .history-btn 一致） */

/* 选择岗位 modal —— hidden 强制隐藏，覆盖 flex 布局 */
.compare-select-modal-mask[hidden] { display: none !important; }

.compare-select-modal[hidden] { display: none !important; }


.compare-select-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .25s ease;
}

.compare-select-modal-mask.show { opacity: 1; }


.compare-select-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.96);
  z-index: 2001;
  width: 600px;
  max-width: 90vw;
  max-height: 70vh;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.compare-select-modal.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}


.compare-select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.compare-select-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}


.compare-select-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}


/* 选择 modal 内的卡片 —— 复用 .history-item 卡片基底，简化布局 */
.compare-select-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  margin: 0 0 10px;
  padding: 10px 12px;
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color .15s ease, background .15s ease;
}

.compare-select-item:hover {
  border-color: var(--primary);
}

.compare-select-item.selected {
  border-color: var(--primary);
  background: #ecfdf5;
}

.compare-select-item input[type="checkbox"] {
  margin-top: 3px;
  width: auto;
  accent-color: var(--primary);
  cursor: pointer;
}

.compare-select-item-body { flex: 1; min-width: 0; }

.compare-select-item-time {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 4px;
}

.compare-select-item .history-item-summary {
  margin-bottom: 4px;
}


.compare-select-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.compare-select-count {
  flex: 1;
  color: var(--muted);
  font-size: 13px;
}


/* 移动端：modal 自适应视口宽度 */
@media (max-width: 768px) {
  .compare-select-modal {
    width: calc(100vw - 32px);
    max-width: 600px;
  }
  .compare-select-item {
    padding: 10px;
  }
}


/* ============================================================
 * 刷新续跑 banner（20260624j：删除「强制重置」按钮，改为纯文字提示 + 自动恢复）
 * ============================================================ */
.analyze-guard-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  color: #92400e;
  font-size: 13px;
  line-height: 1.5;
}


.analyze-guard-banner .analyze-guard-text {
  flex: 1 1 auto;
  word-break: break-word;
}


/* 失败态：红色，与「正在恢复」黄色区分 */
.analyze-guard-banner.is-failed {
  background: #fee2e2;
  border-color: #ef4444;
  color: #991b1b;
}


/* === Task: 首页增强 - .home-banner-stack 容器 + 功能 A 引导条 ===
   容器在 <header class="topbar"> 与 <main class="layout"> 之间，
   垂直堆叠 A 引导条 / B 缩略卡 / D 提示条三个横条。
   max-width / padding 与 .layout 对齐保持视觉一致。
   :empty 兜底：所有子元素 hidden 时容器不占位（避免空白条）。 */

.home-banner-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 32px 0;
  background: transparent;
}

.home-banner-stack:empty { display: none; }


/* --- 功能 A：首次登录引导条 .onboarding-bar（独立类，不复用 .info-bar） ---
   视觉权重降级（2026-07-01）：原「主色实底 + 白字」视觉过重，与 recent-strip /
   resume-plan-banner 堆叠时挤满首屏。改为「浅绿底 + 主色边 + 深字」与 recent-strip
   统一语言，圆角 / 字号 / 间距保持现有规范。 */
.onboarding-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--primary-bg);
  color: var(--text);
  border: 1px solid var(--primary);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  font-size: 13px;
}

.onboarding-bar[hidden] { display: none !important; }


.onboarding-bar-icon {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
}


.onboarding-bar-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.onboarding-bar-text strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}

.onboarding-bar-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}


/* CTA 按钮：主色实底 + 白字（浅绿底上需高对比 CTA），padding 6px 14px / 圆角 6px */
.onboarding-bar-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  border-radius: 6px;
  font: 500 13px/1 inherit;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease;
}

.onboarding-bar-cta:active { transform: translateY(1px); }

.onboarding-bar-cta:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (hover: hover) {
  .onboarding-bar-cta:hover { background: #0e8e6f; }
}


/* 跳过按钮：透明底 + 灰字 + 灰边（浅绿底上不再用半透明白） */
.onboarding-bar-skip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font: 500 12px/1 inherit;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.onboarding-bar-skip:active { transform: translateY(1px); }

.onboarding-bar-skip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (hover: hover) {
  .onboarding-bar-skip:hover {
    color: var(--text);
    border-color: var(--primary);
  }
}


@media (prefers-reduced-motion: reduce) {
  .onboarding-bar-cta,
  .onboarding-bar-skip {
    transition: none;
  }
}


/* ============================================================
   Task 4：功能 A Tour 高亮层 CSS
   - .tour-spotlight：position:fixed 全屏遮罩，z-index 1700
     （高于 .floating-example-btn z:1500；低于 .compare-modal z:2000）
     通过 JS 动态设置 left/top/width/height + outline 大值
     实现「中央开窗 + 周围半透明」效果。outline 不占布局空间，
     比 box-shadow 不会撑大元素。
   - .tour-tooltip：z-index 1701（贴 spotlight 之上），320px 宽，
     白底 + 主色边 + 10px 圆角，位置由 JS 动态计算。
   - 全局 [hidden] 兜底已在 style.css 顶部存在（line 7），
     这里仍显式声明 [hidden] 兜底，与 .onboard-bubble / .onboarding-bar
     等其他覆盖层组件的写法保持一致。
   ============================================================ */

.tour-spotlight {
  position: fixed;
  /* JS 会动态覆盖 left/top/width/height；inset 初始值用于未启动时占位 */
  inset: 0;
  z-index: 1700;
  /* background 必须为 transparent：开窗效果完全靠 outline 实现 */
  background: transparent;
  /* outline 颜色 + 大小由 JS 动态设置（覆盖整个视口） */
  outline: 0 solid transparent;
  /* 圆角与目标元素呼应，让开窗边缘更柔和 */
  border-radius: 6px;
  /* pointer-events: auto 让 backdrop 可点击关闭；默认 auto 即可，显式声明便于阅读 */
  pointer-events: auto;
  /* 过渡让步骤切换有视觉连续性；reduced-motion 下禁用 */
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease, outline-width .25s ease;
}

.tour-spotlight[hidden] { display: none !important; }


.tour-tooltip {
  position: fixed;
  z-index: 1701;
  top: 0;
  left: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--primary);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .06);
  font-size: 13px;
  color: var(--text);
  /* 位置由 JS 动态设置 top/left；这里 transition 让步骤切换平滑 */
  transition: top .25s ease, left .25s ease;
}

.tour-tooltip[hidden] { display: none !important; }


/* 关闭按钮：复用 .modal-btn--icon 视觉（透明 + hover 浅灰），
   绝对定位右上角；使用 SVG cross 跨字体一致（EXP-014） */
.tour-tooltip-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  transition: background .15s ease, color .15s ease;
}

.tour-tooltip-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (hover: hover) {
  .tour-tooltip-close:hover {
    background: var(--hover-bg);
    color: var(--text);
  }
}

.tour-tooltip-close .modal-btn-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}


.tour-tooltip-title {
  margin: 0 0 6px;
  padding-right: 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}


.tour-tooltip-desc {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}


.tour-tooltip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}


/* 步骤圆点：JS 动态生成 N 个 span.tour-dot */
.tour-tooltip-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tour-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d1d5db;
  transition: background .15s ease;
}

.tour-dot.active {
  background: var(--primary);
}


/* 下一步 / 完成按钮：复用 .modal-btn .modal-btn--primary 风格（主色实心底），
   padding 缩小为 6px 14px 以匹配 tooltip 内部紧凑布局 */
.tour-tooltip-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 6px;
  color: #fff;
  font: 500 13px/1 inherit;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.tour-tooltip-next:active { transform: translateY(1px); }

.tour-tooltip-next:focus-visible {
  outline: 2px solid var(--primary-hover);
  outline-offset: 2px;
}

@media (hover: hover) {
  .tour-tooltip-next:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
  }
}


/* reduced-motion：spotlight + tooltip 的过渡全部禁用 */
@media (prefers-reduced-motion: reduce) {
  .tour-spotlight,
  .tour-tooltip,
  .tour-tooltip-close,
  .tour-tooltip-next,
  .tour-dot {
    transition: none;
  }
}


/* ============================================================
 * Task 6：功能 B — 顶部最近分析预览（缩略卡容器 + 卡片样式）
 * 复用 .info-bar / .info-card 视觉语言，不引入新色相
 * ============================================================ */
.recent-strip {
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* [hidden] 全局兜底已在 style.css 顶部声明（EXP-021），不再写局部补丁 */

.recent-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}


.recent-strip-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}


.recent-strip-more {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
}

.recent-strip-more:hover {
  color: var(--primary);
  text-decoration: underline;
}

.recent-strip-more:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}


.recent-strip-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}


/* 缩略卡：在 .info-card.info-card--clickable 基础上略缩 padding */
.recent-card {
  padding: 10px 12px;
  gap: 4px;
  min-width: 0;                  /* 2026-06-29 修复：grid item 默认 min-width: auto，
                                   配合子元素 white-space: nowrap 会撑开列宽（子div超过父div）。
                                   设 min-width: 0 让 grid item 允许压缩到列宽以下，
                                   子元素 text-overflow: ellipsis 才能正确生效 */
}


.recent-card-time {
  font-size: 11px;
  color: var(--muted);
  line-height: 1;
}


.recent-card-score {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.recent-card-score-label {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.recent-card-score--high { color: var(--primary); }

.recent-card-score--mid  { color: var(--text); }

.recent-card-score--low  { color: var(--danger, #ef4444); }


/* Task 22：岗位行（LLM 提取的 job_title）+ 职责行（jd_summary 截断） */
.recent-card-line {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
  max-width: 100%;              /* 2026-06-29：兜底，确保不超过父卡片宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;          /* 单行省略，避免卡片高度参差 */
}

.recent-card-line--muted {
  color: var(--muted);
}

.recent-card-line-label {
  color: var(--muted);
  font-weight: 400;
}


/* 保留旧 class 兼容（如其他地方仍在用） */
.recent-card-summary {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* 空态：复用 .info-bar.info-bar--neutral，跨满 3 列 */
.recent-strip-empty {
  grid-column: 1 / -1;
  justify-content: center;
}


/* ============================================================
 * Task 9：功能 C 能力卡 — 右侧默认展示能力说明
 * 替代 #result-placeholder 的视觉，未分析时显示。
 * 复用 .info-card 基类 + 左主色边强调（参考 .evidence-card）。
 * ============================================================ */
.capability-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}


/* 单卡：在 .info-card 基类之上覆盖（基类已定义 .info-card flex-column） */
.capability-rail .capability-card {
  flex-direction: row;          /* 横向：图标左 / 文字右 */
  align-items: flex-start;
  gap: 12px;
  border-left: 4px solid var(--primary);  /* 左主色边强调 */
  padding-left: 14px;                     /* 比基类略大，让左边主色边有视觉重量 */
}


.capability-rail-hint {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  font-style: italic;
}


/* --- 功能 D：学习计划进度恢复提示条 .resume-plan-banner ---
   继承 .info-bar.info-bar--success（浅绿底 + 主色边），
   仅在此补充 icon / text / week 强调样式，按钮复用 .info-bar-cta / .info-bar-close */
.resume-plan-banner-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}

.resume-plan-banner-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

.resume-plan-banner-text strong {
  color: var(--primary);
  font-weight: 600;
}


/* ============================================================
 * Task 12：4 功能响应式降级（≤768px / ≤480px）
 * 集中处理 .home-banner-stack 内部所有子组件 + Tour tooltip。
 * 与现有 @media (max-width: 900px) 断点解耦，使用更细的 768/480
 * 专门服务本次新增的「轻量信息组件」。
 * ============================================================ */

@media (max-width: 768px) {
  .home-banner-stack {
    padding: 12px 16px 0;
    gap: 6px;
  }

  /* A 引导条：隐藏 desc，只保留主标题 + CTA + 跳过 */
  .onboarding-bar {
    padding: 10px 12px;
    gap: 8px;
  }
  .onboarding-bar-desc { display: none; }

  /* B 缩略卡：3 列 → 2 列；第 3 张隐藏（仅显示最近 2 张） */
  .recent-strip-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .recent-strip-cards .recent-card:nth-child(n+3) { display: none; }
  /* 空态横条仍跨满 2 列显示（优先级高于 :nth-child 隐藏规则） */
  .recent-strip-cards .recent-strip-empty {
    display: flex !important;
    grid-column: 1 / -1;
  }

  /* C 能力卡：横向布局收窄后让 icon / padding 缩小 */
  .capability-rail .capability-card {
    padding: 10px 12px;
  }
  .capability-card-icon {
    width: 28px;
    height: 28px;
    font-size: 20px;
  }

  /* D 提示条：desc 由 .info-bar 自身控制；这里只调整 padding/gap */
  .resume-plan-banner {
    padding: 8px 12px;
    gap: 8px;
  }

  /* Tour tooltip：改底部贴边，不再贴目标元素 */
  .tour-tooltip {
    position: fixed !important;
    top: auto !important;
    bottom: 16px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
  }
}


@media (max-width: 480px) {
  .home-banner-stack {
    padding: 8px 12px 0;
    gap: 6px;
  }

  /* A 引导条：CTA / 跳过 padding 缩小 */
  .onboarding-bar-cta {
    padding: 5px 10px;
    font-size: 12px;
  }
  .onboarding-bar-skip {
    padding: 3px 8px;
    font-size: 11px;
  }

  /* B 缩略卡：2 列 → 1 列（仅显示最近 1 张） */
  .recent-strip-cards {
    grid-template-columns: 1fr;
  }
  .recent-strip-cards .recent-card:nth-child(n+2) { display: none; }
  .recent-strip-cards .recent-strip-empty {
    display: flex !important;
    grid-column: 1 / -1;
  }

  /* C 能力卡：icon 进一步缩小 */
  .capability-card-icon {
    font-size: 18px;
  }

  /* D 提示条：CTA padding 缩小（与基类 .info-bar-cta 联动） */
  .resume-plan-banner .info-bar-cta {
    padding: 4px 10px;
    font-size: 11px;
  }
}


/* Task 16：JD OCR 截图粘贴 hint */
.ocr-hint {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}


/* OCR 调用中：textarea loading 状态（边框高亮 + 背景脉冲，纯 CSS） */
#jd.is-loading {
  border-color: var(--primary);
  background: #f3f4f6;
  color: var(--muted);
  cursor: progress;
  animation: jd-loading-pulse 1s ease-in-out infinite;
}


@keyframes jd-loading-pulse {
  0%, 100% { background: #f3f4f6; }
  50%      { background: #e5e7eb; }
}


/* ============================================================
 * Task 21：上传文件即时解析反馈（#resume-parse-feedback）
 * 用户选好文件后立即调 /api/resume/parse，根据返回状态切换 loading / success / error
 * ============================================================ */
.resume-parse-feedback {
  margin: 6px 0 0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.6;
  border: 1px solid var(--border);
  background: #f9fafb;
  color: var(--text);
}

.resume-parse-feedback[hidden] { display: none !important; }


.resume-parse-feedback.is-loading {
  color: var(--muted);
  border-color: var(--border);
  background: #f9fafb;
}


.resume-parse-feedback.is-success {
  color: #065f46;
  border-color: var(--primary);
  background: #ecfdf5;
}


.resume-parse-feedback.is-error {
  color: #991b1b;
  border-color: var(--danger-border, #fecaca);
  background: #fef2f2;
}



/* ============= 2026-07-01 方案 D：面试题预测折叠区（2026-07-01 增强视觉） ============= */
.interview-collapse {
  margin-top: 24px;
  border: 2px solid var(--primary);
  border-radius: 8px;
  overflow: hidden;
}

.interview-collapse-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  background: var(--primary-bg);
  list-style: none;
  user-select: none;
  transition: background var(--transition-fast);
}

.interview-collapse-summary::-webkit-details-marker {
  display: none;
}

.interview-collapse-summary:hover {
  background: var(--hover-bg);
}

.interview-collapse[open] > .interview-collapse-summary {
  border-bottom: 1px solid var(--border);
}

.interview-collapse[open] .interview-collapse-icon {
  transform: rotate(180deg);
}

.interview-collapse-icon {
  /* 2026-07-01：display:inline-block 与 .study-plan-collapse-icon 对齐，保证两处 icon 占位一致 */
  display: inline-block;
  font-size: 12px;
  transition: transform 200ms ease;
}

.interview-collapse-title {
  flex: 1 1 auto;
  min-width: 0;
}

.interview-collapse-hint {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted, #6b7280);
}

.interview-collapse-content {
  /* 2026-07-01：原 padding:16px → 16px 20px，与 .study-plan-collapse > #study-plan-content 一致 */
  padding: 16px 20px;
}


/* ============================================================
 * M28：学习计划 section 折叠（2026-07-01，与 .interview-collapse 同源方案 D）
 * 结构：#study-plan-section > details.study-plan-collapse > (summary + #study-plan-content)
 * - 外层 .study-plan-section 已透明（仅 hidden 控制 + scroll 锚点），details 提供唯一可视边框
 * - summary 提供「标题 + 总投入 + 提示」一行式布局，蓝主题（学习计划主色）
 * - 展开时 summary 底部加分割线，icon 旋转 180°
 * ============================================================ */
.study-plan-collapse {
  margin-top: 12px;
  border: 2px solid var(--primary);
  border-radius: 8px;
  overflow: hidden;
  /* 2026-07-01：去掉 background:#fff —— 外层 .study-plan-section 已透明，无需重复白底 */
}

.study-plan-collapse > #study-plan-content {
  /* details 内 content 加 padding：与 .interview-collapse-content 一致 + 略加左右间距 */
  padding: 16px 20px;
}

.study-plan-collapse-summary {
  display: flex;
  align-items: center;
  /* 2026-07-01：视觉一致性修复 P0 —— gap/padding 与 .interview-collapse-summary 对齐，删除 flex-wrap */
  gap: 8px;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  background: var(--primary-bg);
  list-style: none;
  user-select: none;
  transition: background var(--transition-fast);
}

.study-plan-collapse-summary::-webkit-details-marker {
  display: none;
}

.study-plan-collapse-summary:hover {
  background: var(--hover-bg);
}

.study-plan-collapse[open] > .study-plan-collapse-summary {
  border-bottom: 1px solid var(--border);
}

.study-plan-collapse[open] .study-plan-collapse-icon {
  transform: rotate(180deg);
}

.study-plan-collapse-icon {
  display: inline-block;
  font-size: 12px;
  transition: transform 200ms ease;
}

.study-plan-collapse-title {
  flex: 1 1 auto;
  min-width: 0;
}

.study-plan-collapse-hint {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted, #6b7280);
}

/* ============================================================
 * 2026-07-04：面试题难度标签（备用类）
 * 当前难度信息由后端 _build_markdown 以 emoji + 文本形式注入 raw_markdown，
 * 前端 renderMarkdown 原样输出。此样式预留给未来前端单独渲染时复用。
 * ============================================================ */
.difficulty-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

.difficulty-tag-easy {
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
}

.difficulty-tag-medium {
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
}

.difficulty-tag-hard {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
}