/*
Theme Name: XFAI Skill Theme
Theme URI: https://example.com/
Author: XFAI
Description: 面向贵州高考志愿/考研择校/职业规划的 AI 辅助规划主题，集成 DeepSeek AI 引擎与 Token 额度系统。基于 Bootstrap 5.3.8 构建，数据源于省教育考试院及各高校官方公开信息。
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4.3
Text Domain: xfai-skill-theme
*/

/* ============================================================
   🎨 色彩规范文档 (Color System Specification)
   ============================================================
   版本: 2.0 | 日期: 2026-06-25
   设计原则：默认浅色模式 + 可选暗色模式
   浅色：极低饱和浅蓝微渐变背景 + 纯白内容区 + 教育蓝主色
   暗色：深色纯色背景 + 低对比文本
   无障碍标准：WCAG 2.1 AA（文本对比度 ≥ 4.5:1，大文本 ≥ 3:1）
   ⚠ 禁用：高饱和蓝、霓虹橙、荧光绿、亮粉红、刺眼渐变

   ┌────────────────────────────────────────────────────────────────────┐
   │  色阶角色  │ 浅色 — 用途/色值               │ 暗色 — 用途/色值    │
   ├────────────────────────────────────────────────────────────────────┤
   │ 主色       │ 品牌色/链接/图标 → #3b6ea5      │ → #3b6ea5           │
   │ 强调色     │ CTA 按钮/选中态 → #5b8cb8       │ → #5b8cb8           │
   │ 成功色     │ 额度/正向态 → #4a8c7a           │ → #4a8c7a           │
   │ 危险色     │ 错误/免责图标 → #b05a5a         │ → #b05a5a           │
   │ 页面背景   │ #eef4fa→#f4f8fc→#f7faff 微渐变  │ #0b1020 纯色        │
   │ 表面色     │ 卡片/面板/对话 → #ffffff        │ #0d1428             │
   │ 正文色     │ #1a1a2e                         │ #d6dce8             │
   │ 次要色     │ #6b7280                         │ #8896b0             │
   │ 边框色     │ rgba(0,0,0,0.07)                │ rgba(255,255,255,0.07)│
   │ 禁用色     │ #9ca3af                         │ #5a6480             │
   │ 浅浮层     │ rgba(59,110,165,0.07)           │ rgba(59,110,165,0.10)│
   └────────────────────────────────────────────────────────────────────┘

   WCAG 2.1 AA 对比度验证（浅色 #ffffff 背景）:
   · 正文 #1a1a2e 在白底上 → 14.2:1 ✅ (AAA)
   · 次要 #6b7280 在白底上 →  5.1:1 ✅ (AA-Normal)
   · 主色 #3b6ea5 在白底上 →  3.6:1 ⚠ (AA-Large ✅)
   · 强调 #5b8cb8 在白底上 →  2.5:1 仅用于装饰/大图标
   ⚠ 链接文字使用 #2a5c8a → 4.8:1 ✅ (AA-Normal)

   WCAG 2.1 AA 对比度验证（暗色 #0b1020 背景）:
   · 正文 #d6dce8 → 11.1:1 ✅
   · 次要 #8896b0 →  5.2:1 ✅
   · 主色 #3b6ea5 →  4.8:1 ✅
   ============================================================ */

/* ============================================================
   1. 默认浅色模式 (Light Mode) —— 极低饱和浅蓝微渐变背景
   ============================================================ */
:root {
  --bs-body-bg: transparent;
  --bs-body-color: #1a1a2e;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* 品牌色——低饱和教育蓝系 */
  --xf-primary: #3b6ea5;
  --xf-primary-rgb: 59, 110, 165;
  --xf-accent: #5b8cb8;
  --xf-accent-rgb: 91, 140, 184;
  --xf-muted: #6b7280;
  --xf-success: #4a8c7a;
  --xf-success-rgb: 74, 140, 122;
  --xf-danger: #b05a5a;
  --xf-danger-rgb: 176, 90, 90;
  --xf-border: rgba(0, 0, 0, 0.07);
  --xf-surface: #ffffff;

  /* Bootstrap 主色覆盖 */
  --bs-primary: #3b6ea5;
  --bs-primary-rgb: 59, 110, 165;
  --bs-warning: #5b8cb8;
  --bs-warning-rgb: 91, 140, 184;
  --bs-success: #4a8c7a;
  --bs-success-rgb: 74, 140, 122;
  --bs-danger: #b05a5a;
  --bs-danger-rgb: 176, 90, 90;
  --bs-link-color: #2a5c8a;
  --bs-link-hover-color: #1e4a70;
  --bs-border-color: var(--xf-border);
  --bs-border-radius: 12px;
  --bs-border-radius-lg: 16px;
  --bs-border-radius-xl: 20px;

  /* Navbar */
  --bs-navbar-color: var(--xf-muted);
  --bs-navbar-hover-color: #1a1a2e;
  --bs-navbar-active-color: #1a1a2e;
  --bs-navbar-brand-color: #1a1a2e;
}

/* ============================================================
   2. 暗色模式 (Dark Mode) 覆盖
   ============================================================ */
[data-bs-theme="dark"] {
  --bs-body-bg: #0b1020;
  --bs-body-color: #d6dce8;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --xf-primary: #3b6ea5;
  --xf-primary-rgb: 59, 110, 165;
  --xf-accent: #5b8cb8;
  --xf-accent-rgb: 91, 140, 184;
  --xf-muted: #8896b0;
  --xf-success: #4a8c7a;
  --xf-success-rgb: 74, 140, 122;
  --xf-danger: #b05a5a;
  --xf-danger-rgb: 176, 90, 90;
  --xf-border: rgba(255, 255, 255, 0.07);
  --xf-surface: #0d1428;

  --bs-primary: #3b6ea5;
  --bs-primary-rgb: 59, 110, 165;
  --bs-warning: #5b8cb8;
  --bs-warning-rgb: 91, 140, 184;
  --bs-success: #4a8c7a;
  --bs-success-rgb: 74, 140, 122;
  --bs-danger: #b05a5a;
  --bs-danger-rgb: 176, 90, 90;
  --bs-link-color: #4d82b8;
  --bs-link-hover-color: #6b9ccf;
  --bs-border-color: var(--xf-border);

  --bs-navbar-color: var(--xf-muted);
  --bs-navbar-hover-color: #d6dce8;
  --bs-navbar-active-color: #d6dce8;
  --bs-navbar-brand-color: #d6dce8;
}

/* ============================================================
   3. 全局背景 —— 浅色微渐变 / 暗色纯色
   ============================================================ */
body {
  min-height: 100vh;
}

/* 浅色：极低饱和浅蓝至白柔和过渡 */
:root body {
  background: linear-gradient(180deg, #eef4fa 0%, #f4f8fc 50%, #f7faff 100%);
  background-attachment: fixed;
}

/* 暗色：纯色平铺 */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] {
  background: #0b1020 !important;
}

/* ============================================================
   4. Navbar 自定义
   ============================================================ */
.xf-navbar {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--xf-border);
}

/* 浅色 navbar */
:root .xf-navbar {
  background: rgba(255, 255, 255, 0.82) !important;
}

/* 暗色 navbar */
[data-bs-theme="dark"] .xf-navbar {
  background: rgba(13, 20, 40, 0.85) !important;
}

.xf-navbar .navbar-brand .brand-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--xf-primary);
  box-shadow: 0 0 0 5px rgba(59, 110, 165, 0.18);
  margin-right: 8px;
  vertical-align: middle;
}

/* ============================================================
   4. 返回首页按钮（导航栏固定可见）
   ============================================================ */
.xf-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  margin-right: 8px;
  border-radius: 100px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--xf-primary);
  background: rgba(59, 110, 165, 0.08);
  border: 1px solid rgba(59, 110, 165, 0.15);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.xf-home-btn:hover {
  color: #fff;
  background: var(--xf-primary);
  border-color: var(--xf-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 110, 165, 0.25);
}

/* 点击反馈脉冲动画 */
.xf-home-btn:active,
.xf-home-btn.xf-home-btn--clicked {
  animation: xf-home-btn-pulse 0.35s ease;
}

@keyframes xf-home-btn-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(59, 110, 165, 0.4); }
  100% { transform: scale(1); box-shadow: 0 0 0 8px rgba(59, 110, 165, 0); }
}

/* 按钮文本在窄屏隐藏图标仅保留文字 */
.xf-home-btn__text {
  line-height: 1;
}

/* 移动端适配：窄屏下仅显示图标 */
@media (max-width: 480px) {
  .xf-home-btn {
    padding: 6px 10px;
    margin-right: 4px;
  }
  .xf-home-btn__text {
    display: none;
  }
}

/* 平板端微调 */
@media (min-width: 481px) and (max-width: 767.98px) {
  .xf-home-btn {
    padding: 6px 12px;
  }
}

/* ============================================================
   5. 导航链接悬停微动效
   ============================================================ */
/* 导航链接悬停微动效 */
.xf-navbar .nav-link {
  position: relative;
  transition: color 0.2s ease;
}

.xf-navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  background: var(--xf-primary);
  transition: all 0.25s ease;
  transform: translateX(-50%);
  border-radius: 2px;
}

.xf-navbar .nav-link:hover::after,
.xf-navbar .nav-link.active::after {
  width: 60%;
}

/* ============================================================
   4. 首页 Hero 区域
   ============================================================ */
.xf-hero-section {
  padding: 80px 0 40px;
}

.xf-hero-section .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid var(--xf-border);
  background: var(--xf-surface);
  color: var(--xf-muted);
  font-size: 13px;
  margin-bottom: 20px;
}

.xf-hero-section h1 {
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}

.xf-hero-section .hero-sub {
  font-size: 17px;
  color: var(--xf-muted);
  line-height: 1.7;
  max-width: 600px;
}

/* ============================================================
   5. 服务卡片 —— 首页三业务模块
   ============================================================ */
.xf-service-card {
  background: var(--xf-surface);
  border: 1px solid var(--xf-border);
  border-radius: var(--bs-border-radius-lg);
  padding: 28px 24px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.xf-service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--xf-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.xf-service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 110, 165, 0.25);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
}

.xf-service-card:hover::before {
  transform: scaleX(1);
}

.xf-service-card .card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
  background: rgba(59, 110, 165, 0.12);
  color: var(--xf-primary);
}

.xf-service-card h3 {
  font-size: 18px;
  font-weight: 650;
  margin-bottom: 10px;
}

.xf-service-card p {
  color: var(--xf-muted);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* ============================================================
   6. 选中场景条（首页底部）
   ============================================================ */
.xf-selected-bar {
  background: var(--xf-surface);
  border: 1px solid var(--xf-border);
  border-radius: var(--bs-border-radius-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ============================================================
   7. 双栏布局（对话 / 个人中心 / 充值页）
   ============================================================ */
.xf-two-col {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 20px;
  padding: 28px 0 78px;
}

@media (max-width: 991.98px) {
  .xf-two-col {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   8. 面板（Panel）卡片容器
   ============================================================ */
.xf-panel {
  background: var(--xf-surface);
  border: 1px solid var(--xf-border);
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
}

.xf-panel .panel-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--xf-border);
}

.xf-panel .panel-header h5 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}

.xf-panel .panel-body {
  padding: 16px 20px 20px;
}

/* ============================================================
   9. 聊天气泡
   ============================================================ */
.xf-chat-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 540px;
  overflow-y: auto;
  padding-right: 4px;
}

.xf-msg {
  display: flex;
}

.xf-msg--user {
  justify-content: flex-end;
}

.xf-msg--assistant {
  justify-content: flex-start;
}

.xf-msg__bubble {
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid var(--xf-border);
  background: var(--xf-surface);
  padding: 12px 16px;
}

.xf-msg--user .xf-msg__bubble {
  background: rgba(59, 110, 165, 0.12);
  border-color: rgba(59, 110, 165, 0.25);
}

.xf-msg__content {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.7;
  font-size: 14px;
  color: var(--bs-body-color);
  font-family: "SF Mono", "Cascadia Code", "Consolas", "Source Han Sans SC", monospace;
}

.xf-msg[data-status="pending"] .xf-msg__bubble {
  opacity: 0.85;
}

.xf-msg[data-status="failed"] .xf-msg__bubble {
  border-color: rgba(176, 90, 90, 0.45);
  background: rgba(176, 90, 90, 0.10);
}

.xf-msg__retry {
  margin-top: 8px;
}

/* ============================================================
   10. 骨架屏（加载动画）
   ============================================================ */
.xf-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
}

.xf-skeleton__line {
  height: 12px;
  border-radius: 50px;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.04),
      rgba(0, 0, 0, 0.10),
      rgba(0, 0, 0, 0.04));
  background-size: 200% 100%;
  animation: xfShimmer 1.2s ease infinite;
}

.xf-skeleton__line:nth-child(2) { width: 92%; }
.xf-skeleton__line:nth-child(3) { width: 70%; }
.xf-skeleton__line:nth-child(4) { width: 88%; }

@keyframes xfShimmer {
  0% { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

/* 暗色模式：骨架屏覆盖 */
[data-bs-theme="dark"] .xf-skeleton__line {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0.04));
  background-size: 200% 100%;
}

/* ============================================================
   11. 自定义 alert
   ============================================================ */
.xf-alert {
  border: 1px solid rgba(176, 90, 90, 0.35);
  background: rgba(176, 90, 90, 0.08);
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.6;
}

.xf-alert--ok {
  border-color: rgba(74, 140, 122, 0.30);
  background: rgba(74, 140, 122, 0.08);
}

/* ============================================================
   12. 标签切换（历史页筛选）
   ============================================================ */
.xf-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.xf-tab {
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid var(--xf-border);
  background: var(--xf-surface);
  color: var(--xf-muted);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.xf-tab:hover {
  border-color: rgba(59, 110, 165, 0.35);
  color: var(--bs-body-color);
}

.xf-tab.is-active {
  background: rgba(59, 110, 165, 0.15);
  border-color: rgba(59, 110, 165, 0.45);
  color: var(--bs-body-color);
}

/* ============================================================
   13. 结果文本（对话详情）
   ============================================================ */
.xf-result {
  white-space: pre-wrap;
  line-height: 1.8;
  font-size: 14px;
  margin: 0;
  font-family: "SF Mono", "Cascadia Code", "Consolas", "Source Han Sans SC", monospace;
}

/* ============================================================
   14. 表单字段（自定义 textarea 等）
   ============================================================ */
.xf-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.xf-field label {
  font-size: 13px;
  color: var(--xf-muted);
}

.xf-field textarea {
  min-height: 120px;
  resize: vertical;
}

/* 列表中的条目（历史记录、套餐列表） */
.xf-list-item {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--xf-border);
  background: var(--xf-surface);
  cursor: pointer;
  transition: all 0.2s ease;
}

.xf-list-item:hover {
  border-color: rgba(59, 110, 165, 0.25);
  background: rgba(59, 110, 165, 0.04);
}

/* ============================================================
   15. 页面过渡动效
   ============================================================ */
.xf-fade-in {
  animation: xfFadeIn 0.5s ease both;
}

@keyframes xfFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 卡片交错延迟 */
.xf-stagger-1 { animation-delay: 0.05s; }
.xf-stagger-2 { animation-delay: 0.12s; }
.xf-stagger-3 { animation-delay: 0.2s; }

/* ============================================================
   16. 信息区域（首页）
   ============================================================ */
.xf-info-section {
  padding: 60px 0;
}

.xf-info-section .info-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
}

/* ============================================================
   17. 滚动条美化
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 12px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   18. 合规免责声明样式
   ============================================================ */
.xf-disclaimer {
  border-top: 1px solid var(--xf-border);
  padding: 28px 0;
  margin-top: 20px;
}

.xf-disclaimer--footer {
  padding: 24px 0 8px;
  margin-top: 0;
}

.xf-disclaimer--home {
  border-top: 1px solid var(--xf-border);
  border-bottom: 1px solid var(--xf-border);
  padding: 28px 0;
  margin: 28px 0;
}

.xf-disclaimer--chat {
  margin: 16px 0;
  padding: 20px 0;
}

.xf-disclaimer__inner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.xf-disclaimer__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(176, 90, 90, 0.10);
  color: var(--xf-danger);
  margin-top: 2px;
}

.xf-disclaimer__content {
  flex: 1;
  min-width: 0;
}

.xf-disclaimer__title {
  font-size: 13px;
  font-weight: 650;
  color: var(--xf-danger);
  margin-bottom: 6px;
}

.xf-disclaimer__text {
  font-size: 12px;
  line-height: 1.7;
  color: var(--xf-muted);
  margin-bottom: 4px;
}

.xf-disclaimer__text:last-child {
  margin-bottom: 0;
}

.xf-disclaimer__text a {
  color: var(--xf-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.xf-disclaimer__text a:hover {
  color: var(--bs-link-hover-color);
}

@media (max-width: 575.98px) {
  .xf-disclaimer__inner {
    flex-direction: column;
    gap: 8px;
  }
  .xf-disclaimer__title {
    font-size: 12px;
  }
  .xf-disclaimer__text {
    font-size: 11px;
  }
}

/* 对话结果区域内联免责提示 */
.xf-chat-disclaimer {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(176, 90, 90, 0.18);
  background: rgba(176, 90, 90, 0.05);
}

.xf-chat-disclaimer__inner {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--xf-muted);
  font-size: 12px;
  line-height: 1.6;
}

.xf-chat-disclaimer__inner svg {
  color: var(--xf-danger);
}

/* ============================================================
   19. 数据更新时间戳组件（服务端渲染，无前端刷新逻辑）
   ============================================================ */
.xf-update-time {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--xf-border);
  padding: 10px 0px;
}

.xf-update-time__inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--xf-muted);
  line-height: 1;
}

.xf-update-time__icon {
  display: inline-flex;
  align-items: center;
  color: var(--xf-primary);
  opacity: 0.7;
  flex-shrink: 0;
}

.xf-update-time__label {
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--xf-muted);
  opacity: 0.85;
}

.xf-update-time__value {
  font-weight: 600;
  color: var(--bs-body-color);
  white-space: nowrap;
}

/* 暗色模式适配 */
[data-bs-theme="dark"] .xf-update-time {
  border-bottom-color: var(--xf-border);
}

/* ============================================================
   20. 响应式微调
   ============================================================ */
@media (max-width: 575.98px) {
  .xf-hero-section {
    padding: 48px 0 24px;
  }
  .xf-two-col {
    padding: 16px 0 48px;
  }
}

/* ============================================================
   21. 前置信息采集表单样式
   ============================================================ */
/* 表单步进指示器 */
.xf-form-progress {
  overflow-x: auto;
  flex-wrap: nowrap;
}
.xf-form-step {
  flex: 1;
  text-align: center;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 50px;
  background: var(--xf-surface);
  border: 1px solid var(--xf-border);
  color: var(--xf-muted);
  white-space: nowrap;
  transition: all 0.25s ease;
}
.xf-form-step.active {
  background: rgba(59,110,165,0.12);
  border-color: rgba(59,110,165,0.35);
  color: var(--xf-primary);
  font-weight: 600;
}
.xf-form-step.done {
  background: rgba(74,140,122,0.10);
  border-color: rgba(74,140,122,0.25);
  color: var(--xf-success);
}

/* 表单模块分隔 */
.xf-form-module {
  padding: 12px 0;
  border-bottom: 1px solid var(--xf-border);
}
.xf-form-module:last-child {
  border-bottom: none;
}

/* 表单提示区域（弹窗触发按钮） */
.xf-form-notice {
  padding: 20px;
  border: 1px dashed var(--xf-border);
  border-radius: 16px;
  background: rgba(59,110,165,0.04);
  text-align: center;
}
.xf-form-notice .btn {
  transition: transform 0.2s ease;
}
.xf-form-notice .btn:hover {
  transform: translateY(-1px);
}

/* 表单标签统一 */
.xf-form-section .form-label,
#xf-form-modal .form-label {
  font-size: 13px;
  color: var(--bs-body-color);
  font-weight: 500;
  margin-bottom: 4px;
}
.xf-form-section .form-control-sm,
.xf-form-section .form-select-sm,
#xf-form-modal .form-control-sm,
#xf-form-modal .form-select-sm {
  border-radius: 10px;
  font-size: 13px;
}

/* 弹窗内的表单模块分隔 */
#xf-form-modal .xf-form-module {
  padding: 12px 0;
  border-bottom: 1px solid var(--xf-border);
}
#xf-form-modal .xf-form-module:last-child {
  border-bottom: none;
}

/* 院校/专业/职业选择卡片 */
.xf-college-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  margin-bottom: 4px;
}
.xf-college-item:hover {
  background: rgba(59,110,165,0.06);
  border-color: rgba(59,110,165,0.15);
}
.xf-college-item.selected {
  background: rgba(59,110,165,0.10);
  border-color: rgba(59,110,165,0.30);
}
.xf-college-item.active {
  background: rgba(74,140,122,0.10);
  border-color: rgba(74,140,122,0.30);
  box-shadow: inset 2px 0 0 rgba(74,140,122,0.6);
}
.xf-college-item .college-logo {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: contain;
  background: #f0f4f8;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--xf-primary);
  overflow: hidden;
}
.xf-college-item .college-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}
.xf-college-item .college-logo-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.xf-college-item .college-logo-fallback {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: contain;
  background: #f0f4f8;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--xf-primary);
}
[data-bs-theme="dark"] .xf-college-item .college-logo {
  background: rgba(255,255,255,0.06);
}
[data-bs-theme="dark"] .xf-college-item .college-logo-fallback {
  background: rgba(255,255,255,0.06);
}
.xf-college-item .college-info {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.xf-college-item .college-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--bs-body-color);
}
.xf-college-item .college-meta {
  font-size: 11px;
  color: var(--xf-muted);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.xf-college-item .college-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--xf-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  color: transparent;
  font-size: 12px;
}
.xf-college-item.selected .college-check {
  background: var(--xf-primary);
  border-color: var(--xf-primary);
  color: #fff;
}
.xf-college-item.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* 已选标签 */
.xf-selected-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 10px;
  border-radius: 50px;
  background: rgba(59,110,165,0.10);
  border: 1px solid rgba(59,110,165,0.20);
  font-size: 12px;
  color: var(--xf-primary);
  line-height: 1.6;
}
.xf-selected-tag .remove-btn {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  color: var(--xf-primary);
}
.xf-selected-tag .remove-btn:hover {
  opacity: 1;
}

/* 信息汇总面板 */
.xf-summary-content {
  background: rgba(59,110,165,0.04);
  border: 1px solid var(--xf-border);
  border-radius: 12px;
  padding: 12px 14px;
  line-height: 1.7;
}
.xf-summary-content .summary-section {
  margin-bottom: 8px;
}
.xf-summary-content .summary-section:last-child {
  margin-bottom: 0;
}
.xf-summary-content .summary-label {
  font-weight: 600;
  color: var(--xf-primary);
  font-size: 12px;
  display: block;
  margin-bottom: 2px;
}
.xf-summary-content .summary-value {
  color: var(--bs-body-color);
  font-size: 12px;
}

/* 院校列表滚动条优化 */
.xf-college-list::-webkit-scrollbar {
  width: 4px;
}
.xf-college-list::-webkit-scrollbar-thumb {
  background: var(--xf-border);
  border-radius: 8px;
}

/* 最小高度辅助 */
.min-h-32px {
  min-height: 32px;
}

/* ============================================================
   22. 弹窗（Modal）配色 — 统一使用主题色彩
   ============================================================ */
/* 弹窗背景与边框 */
#xf-form-modal .modal-content {
  background: var(--xf-surface);
  border: 1px solid var(--xf-border);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

/* 弹窗头部 */
#xf-form-modal .modal-header {
  border-bottom: 1px solid var(--xf-border);
  padding: 16px 20px;
}

#xf-form-modal .modal-header .modal-title {
  font-size: 16px;
  color: var(--xf-primary);
  font-weight: 600;
}

/* 关闭按钮 — 匹配主题色系 */
#xf-form-modal .btn-close {
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
#xf-form-modal .btn-close:hover {
  opacity: 1;
}

/* 弹窗主体 */
#xf-form-modal .modal-body {
  padding: 20px;
  color: var(--bs-body-color);
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  overflow: hidden;
}

/* 固定头部 — 提示文字 + 进度指示，滚动时保持在顶部 */
#xf-form-modal .xf-form-sticky-header {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--xf-surface);
  padding-bottom: 4px;
}

/* 可滚动表单内容 */
#xf-form-modal .xf-form-scrollable {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* 弹窗遮罩层 */
.modal-backdrop.show {
  opacity: 0.4;
}

/* ===== 暗色模式适配弹窗 ===== */
[data-bs-theme="dark"] #xf-form-modal .modal-content {
  background: var(--xf-surface);
  border-color: var(--xf-border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

[data-bs-theme="dark"] #xf-form-modal .modal-header {
  border-bottom-color: var(--xf-border);
}

/* ===== 弹窗底部推荐复选框区域 ===== */
#xf-form-modal .xf-form-recommend {
  padding: 12px 16px;
  background: rgba(59,110,165,0.04);
  border: 1px solid var(--xf-border);
  border-radius: 12px;
  transition: background 0.2s ease;
}
#xf-form-modal .xf-form-recommend:hover {
  background: rgba(59,110,165,0.07);
}
#xf-form-modal .xf-form-recommend .form-check {
  margin-bottom: 6px;
}
#xf-form-modal .xf-form-recommend .form-check-input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 4px;
  border: 2px solid var(--xf-border);
  background-color: var(--xf-surface);
  cursor: pointer;
  transition: all 0.15s ease;
}
#xf-form-modal .xf-form-recommend .form-check-input:checked {
  background-color: var(--xf-primary);
  border-color: var(--xf-primary);
}
#xf-form-modal .xf-form-recommend .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(59,110,165,0.15);
  border-color: var(--xf-primary);
}
#xf-form-modal .xf-form-recommend .form-check-input:hover:not(:disabled) {
  border-color: var(--xf-primary);
}
#xf-form-modal .xf-form-recommend .form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#xf-form-modal .xf-form-recommend .form-check-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--bs-body-color);
  cursor: pointer;
  user-select: none;
}
#xf-form-modal .xf-form-recommend-desc {
  font-size: 12px;
  color: var(--xf-muted);
  line-height: 1.6;
  padding-left: 24px;
}
[data-bs-theme="dark"] #xf-form-modal .xf-form-recommend {
  background: rgba(59,110,165,0.06);
}
[data-bs-theme="dark"] #xf-form-modal .xf-form-recommend:hover {
  background: rgba(59,110,165,0.10);
}
[data-bs-theme="dark"] #xf-form-modal .xf-form-recommend .form-check-input {
  background-color: #1a1f35;
  border-color: rgba(255,255,255,0.15);
}
[data-bs-theme="dark"] #xf-form-modal .xf-form-recommend .form-check-input:checked {
  background-color: var(--xf-primary);
  border-color: var(--xf-primary);
}

[data-bs-theme="dark"] #xf-form-modal .btn-close {
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238896b0'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

[data-bs-theme="dark"] .modal-backdrop.show {
  opacity: 0.6;
}

/* ============================================================
   23. SEO & 性能优化增强样式
   ============================================================ */

/* 23a. 内容区域最小高度 — 防止 CLS（布局偏移） */
main[role="main"] {
  min-height: 60vh;
}

/* 21b. 图片默认表现 — 防止溢出与布局偏移 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* 21c. QR 码图片限制宽度 */
#xf-qr-img {
  max-width: 200px;
  height: auto;
  border-radius: 16px;
}

/* 21d. 打印样式优化 — 移除非必要背景和色块 */
@media print {
  .xf-navbar,
  .xf-home-btn,
  .xf-disclaimer,
  .xf-update-time,
  .xf-selected-bar,
  #xf-send,
  #xf-reset,
  #xf-copy,
  #xf-loading {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  a {
    text-decoration: underline !important;
  }
}

/* 21e. 移动端触摸优化 — 增大可点击区域，改善 FID */
@media (max-width: 767.98px) {
  .xf-service-card .btn,
  .xf-selected-bar .btn,
  .xf-tab,
  .xf-list-item {
    min-height: 44px;  /* iOS 建议最小触控高度 */
  }
  .xf-service-card .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* 双栏布局移动端全宽 */
  .xf-two-col {
    grid-template-columns: 1fr;
  }
}

/* 21f. 骨架屏优化 — 改进 LCP 感知 */
.xf-skeleton__line {
  will-change: background-position;
}

/* 21g. 减少不必要的动画以降低 CPU 占用 */
@media (prefers-reduced-motion: reduce) {
  .xf-fade-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .xf-service-card {
    transition: none;
  }
  .xf-service-card:hover {
    transform: none;
  }
  .xf-service-card::before {
    transition: none;
    transform: scaleX(1);
  }
  .xf-navbar .nav-link::after {
    transition: none;
  }
  .xf-skeleton__line {
    animation: none;
  }
}