/* ===== 企脉 Qimai - 桌面端宽屏样式 ===== */



/* --- CSS Variables --- */

:root {

  --color-bg: #f5f6fa;

  --color-surface: #ffffff;

  --color-primary: #3b82f6;

  --color-primary-dark: #2563eb;

  --color-primary-light: #dbeafe;

  --color-dark: #1a1f36;

  --color-dark-secondary: #2d3348;

  --color-text: #1e293b;

  --color-text-secondary: #64748b;

  --color-text-light: #94a3b8;

  --color-border: #e2e8f0;

  --color-success: #10b981;



  --radius-sm: 6px;

  --radius-md: 10px;

  --radius-lg: 16px;

  --radius-xl: 24px;



  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);

  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);

  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);



  --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;



  --max-content: 1200px;

  --header-height: 64px;

}



/* --- Reset --- */

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



html { font-size: 16px; }



body {

  font-family: var(--font-family);

  color: var(--color-text);

  background: var(--color-bg);

  line-height: 1.6;

  min-height: 100vh;

}



a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

ul, ol { list-style: none; }

button { cursor: pointer; font-family: inherit; border: none; background: none; font-size: inherit; }

input, textarea { font-family: inherit; font-size: inherit; }



/* --- App Container --- */

.app-container {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}



/* ===== Header ===== */

.app-header {

  position: sticky;

  top: 0;

  z-index: 100;

  width: 100%;

  background: rgba(26,31,54,0.95);

  backdrop-filter: blur(10px);

  height: var(--header-height);

  border-bottom: 1px solid rgba(255,255,255,0.08);

}



.header-inner {

  max-width: var(--max-content);

  margin: 0 auto;

  padding: 0 32px;

  height: 100%;

  display: flex;

  align-items: center;

}



/* 旧版模板LOGO行（header-top）兼容 */

.header-top {

  height: 64px;

  display: flex;

  align-items: center;

  width: 100%;

  border-bottom: 1px solid rgba(255,255,255,0.05);

}



.header-top-inner {

  max-width: var(--max-content);

  margin: 0 auto;

  padding: 0 32px;

  width: 100%;

  display: flex;

  align-items: center;

}



.header-tagline {

  font-size: 16px;

  color: #94a3b8;

  font-weight: 500;

  white-space: nowrap;

  margin-left: 4px;

}



.header-logo {

  display: flex;

  align-items: center;

  gap: 4px;

}



.header-logo .logo-img {

  height: 56px;

  width: auto;

  display: block;

}



/* SSR 页面 LOGO */

.ssr-logo {

  display: flex;

  align-items: center;

}

.ssr-logo .ssr-logo-img {

  height: 48px;

  width: auto;

  display: block;

}



.header-nav {

  display: flex;

  align-items: center;

  gap: 0px;

  flex-wrap: nowrap;

  width: 100%;

  justify-content: space-between;

}



.nav-link {

  padding: 8px 10px;

  border-radius: 8px;

  color: rgba(255,255,255,0.7);

  font-size: 13px;

  font-weight: 500;

  cursor: pointer;

  transition: all 0.2s;

  white-space: nowrap;

}



.nav-link:hover {

  color: #fff;

  background: rgba(255,255,255,0.08);

}



.nav-link.active {

  color: #fff;

  background: var(--color-primary);

}



/* 第二行：主导航（两行导航，与首页 index.html 一致） */

.header-nav-row {

  background: rgba(45,51,72,0.98);

  height: 46px;

  display: flex;

  align-items: center;

  width: 100%;

  border-top: 1px solid rgba(255,255,255,0.03);

}



.header-nav-inner {

  max-width: var(--max-content);

  margin: 0 auto;

  padding: 0 32px;

  width: 100%;

  display: flex;

  align-items: center;

}



/* ===== Main Content ===== */

.main-content {

  flex: 1;

}



/* --- Page Sections --- */

.page-section {

  display: none;

  animation: fadeIn 0.3s ease;

}

.page-section.active { display: block; }



@keyframes fadeIn {

  from { opacity: 0; transform: translateY(10px); }

  to   { opacity: 1; transform: translateY(0); }

}



/* ===== Hero (首页) ===== */

.hero {

  background: linear-gradient(135deg, var(--color-dark) 0%, #1e2a4a 100%);

  color: #fff;

  padding: 100px 0 80px;

  text-align: center;

  position: relative;

  overflow: hidden;

}



.hero::before {

  content: '';

  position: absolute;

  top: -60%;

  left: 50%;

  transform: translateX(-50%);

  width: 800px;

  height: 800px;

  background: radial-gradient(circle, rgba(59,130,246,0.12), transparent 60%);

  border-radius: 50%;

}



.hero::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 200px;

  background: linear-gradient(to bottom, transparent, rgba(59,130,246,0.05));

}



.hero-content {

  position: relative;

  z-index: 1;

  max-width: 800px;

  margin: 0 auto;

  padding: 0 32px;

}



.hero-badge {

  display: inline-block;

  background: rgba(255,255,255,0.1);

  border: 1px solid rgba(255,255,255,0.2);

  border-radius: 20px;

  padding: 6px 20px;

  font-size: 14px;

  color: rgba(255,255,255,0.85);

  margin-bottom: 24px;

}



.hero h1 {

  font-size: 48px;

  font-weight: 800;

  line-height: 1.2;

  margin-bottom: 16px;

  letter-spacing: -1px;

}



.hero h1 .highlight {

  background: linear-gradient(135deg, var(--color-primary), #818cf8);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.hero p {

  font-size: 18px;

  color: rgba(255,255,255,0.65);

  line-height: 1.8;

  margin-bottom: 36px;

}



.hero-actions {

  display: flex;

  gap: 16px;

  justify-content: center;

}



/* ===== Buttons ===== */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 14px 32px;

  border-radius: var(--radius-md);

  font-size: 16px;

  font-weight: 400;

  transition: all 0.2s;

  white-space: nowrap;

}



.btn-primary {

  background: var(--color-primary);

  color: #fff;

  box-shadow: 0 4px 20px rgba(59,130,246,0.35);

}

.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(59,130,246,0.45); }



.btn-outline {

  background: transparent;

  color: #fff;

  border: 1px solid rgba(255,255,255,0.3);

}

.btn-outline:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }



.btn-lg { padding: 16px 40px; font-size: 18px; border-radius: var(--radius-lg); }

.btn-block { width: 100%; }



/* ===== Stats Strip ===== */

.stats-strip {

  max-width: var(--max-content);

  margin: -30px auto 0;

  padding: 0 32px;

  position: relative;

  z-index: 2;

}



.stats-inner {

  background: var(--color-surface);

  border-radius: var(--radius-lg);

  padding: 32px 48px;

  display: flex;

  justify-content: space-around;

  box-shadow: var(--shadow-lg);

}



.stat-item { text-align: center; }

.stat-number { font-size: 36px; font-weight: 800; color: var(--color-primary); line-height: 1; }

.stat-label { font-size: 14px; color: var(--color-text-secondary); margin-top: 8px; }



/* ===== 首页平台风格 ===== */



/* --- Home Hero (紧凑版) --- */

.home-hero {

  background: linear-gradient(135deg, var(--color-dark) 0%, #1e2a4a 100%);

  color: #fff;

  padding: 60px 0 40px;

  text-align: center;

  position: relative;

  overflow: hidden;

}

.home-hero::before {

  content: '';

  position: absolute;

  top: -60%;

  left: 50%;

  transform: translateX(-50%);

  width: 600px;

  height: 600px;

  background: radial-gradient(circle, rgba(59,130,246,0.10), transparent 60%);

  border-radius: 50%;

}

.home-hero-content {

  position: relative;

  z-index: 1;

  max-width: 700px;

  margin: 0 auto;

  padding: 0 32px;

}

.home-hero-content h1 {

  font-size: 38px;

  font-weight: 800;

  line-height: 1.3;

  margin-bottom: 12px;

}

.home-hero-content h1 .highlight {

  background: linear-gradient(135deg, var(--color-primary), #818cf8);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}

.home-hero-content p {

  font-size: 16px;

  color: rgba(255,255,255,0.6);

  line-height: 1.7;

  margin-bottom: 24px;

}

.home-hero-actions {

  display: flex;

  gap: 14px;

  justify-content: center;

}

.home-hero-stats {

  position: relative;

  z-index: 1;

  display: flex;

  justify-content: center;

  gap: 48px;

  margin-top: 36px;

  padding: 0 32px;

}

.hs-item { text-align: center; }

.hs-num { display: block; font-size: 28px; font-weight: 800; color: rgba(255,255,255,0.9); }

.hs-label { display: block; font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 4px; }



/* --- Home Platform --- */



.home-panel-header {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 14px 20px;

  font-size: 16px;

  font-weight: 400;

  color: var(--color-dark);

  background: var(--color-surface);

  border-radius: var(--radius-md) var(--radius-md) 0 0;

  border: 1px solid var(--color-border);

  border-bottom: none;

}

.home-panel-icon { font-size: 18px; flex-shrink: 0; }

.home-panel-title { font-size: 15px; line-height: 1.3; }

.home-panel-subtitle {

  font-size: 12px;

  font-weight: 400;

  color: var(--color-text-secondary);

  margin-top: 2px;

}

.home-panel-icon { font-size: 18px; }



/* Home Recommend Panel */

.home-recommend-panel {

  display: flex;

  flex-direction: column;

}

.home-recommender {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-top: none;

  border-radius: 0 0 var(--radius-md) var(--radius-md);

  padding: 16px;

}



/* 步骤指示器 */

.hr-steps {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  margin-bottom: 16px;

  font-size: 12px;

  flex-wrap: wrap;

}

.hr-step-item {

  display: flex;

  align-items: center;

  gap: 4px;

  padding: 5px 10px;

  border-radius: 14px;

  background: var(--color-bg);

  color: var(--color-text-light);

  font-weight: 500;

  transition: all 0.25s;

}

.hr-step-item.active {

  background: var(--color-primary);

  color: #fff;

  font-weight: 400;

}

.hr-step-item.done {

  background: #ecfdf5;

  color: #10b981;

  font-weight: 400;

}

.hr-step-arrow {

  color: var(--color-text-light);

  font-size: 11px;

}



/* 诊断问卷区 */

.hr-di-title {

  font-size: 14px;

  font-weight: 400;

  color: var(--color-dark);

  margin-bottom: 10px;

}

.hr-di-desc {

  font-size: 12px;

  color: var(--color-text-light);

  margin-bottom: 10px;

  line-height: 1.5;

}

.hr-di-sub {

  font-weight: 400;

  font-size: 12px;

  color: var(--color-text-secondary);

}

.hr-di-back {

  display: inline-block;

  font-size: 12px;

  color: var(--color-text-light);

  cursor: pointer;

  margin-bottom: 10px;

  transition: color 0.2s;

}

.hr-di-back:hover { color: var(--color-primary); }



.hr-di-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

}

.hr-di-option {

  padding: 7px 12px;

  border-radius: 16px;

  border: 1px solid var(--color-border);

  background: var(--color-bg);

  font-size: 13px;

  color: var(--color-text);

  cursor: pointer;

  transition: all 0.2s;

  white-space: nowrap;

}

.hr-di-option:hover {

  border-color: var(--color-primary);

  color: var(--color-primary);

  background: var(--color-primary-light);

}

.hr-di-opt-icon { margin-right: 4px; font-size: 14px; }



/* 诊断结果摘要 */

.hr-di-summary {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 8px;

}

.hr-di-tag {

  padding: 3px 10px;

  border-radius: 12px;

  font-size: 11px;

  font-weight: 500;

  background: var(--color-bg);

  border: 1px solid var(--color-border);

  color: var(--color-text-secondary);

}

.hr-di-tag--active {

  background: var(--color-primary-light);

  border-color: var(--color-primary);

  color: var(--color-primary);

}



.hr-di-no-result {

  text-align: center;

  padding: 16px 0;

  color: var(--color-text-secondary);

  font-size: 13px;

}

.hr-di-no-icon { font-size: 28px; margin-bottom: 6px; }



.hr-result-count {

  font-size: 13px;

  color: var(--color-text-secondary);

  margin-bottom: 4px;

  padding: 0 2px;

}



.home-recommend-list {

  margin-top: 20px;

  display: flex;

  flex-direction: column;

  gap: 12px;

  max-height: 400px;

  overflow-y: auto;

  padding-right: 4px;

}

.home-recommend-list::-webkit-scrollbar { width: 4px; }

.home-recommend-list::-webkit-scrollbar-thumb {

  background: var(--color-border);

  border-radius: 3px;

}

.hr-loading {

  text-align: center;

  color: var(--color-text-light);

  font-size: 13px;

  padding: 20px;

}

.hr-article-card {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  padding: 14px 16px;

  cursor: pointer;

  transition: all 0.2s;

}

.hr-article-card:hover {

  border-color: var(--color-primary);

  box-shadow: var(--shadow-sm);

  transform: translateY(-1px);

}

.hr-article-card .hra-title {

  font-size: 16px;

  font-weight: 400 !important;

  color: var(--color-dark);

  margin-bottom: 6px;

  line-height: 1.5;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.hr-article-card .hra-meta {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 12px;

  color: var(--color-text-light);

}

.hr-article-card .hra-tag {

  padding: 2px 8px;

  border-radius: 10px;

  font-size: 11px;

  font-weight: 500;

}



/* --- Home Section --- */

.home-section {

  max-width: var(--max-content);

  margin: 0 auto;

  padding: 48px 32px;

}

.home-section--scenarios {

  background: var(--color-bg);

}

.home-section-more {

  text-align: center;

  margin-top: 28px;

}

.btn-outline-dark {

  display: inline-flex;

  align-items: center;

  padding: 10px 28px;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  font-size: 14px;

  font-weight: 500;

  color: var(--color-text-secondary);

  cursor: pointer;

  transition: all 0.2s;

  background: var(--color-surface);

}

.btn-outline-dark:hover {

  border-color: var(--color-primary);

  color: var(--color-primary);

}



/* --- Home Articles Row --- */

.home-articles-row {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;

}

.ha-loading {

  text-align: center;

  color: var(--color-text-light);

  font-size: 13px;

  padding: 20px;

  grid-column: 1 / -1;

}

.ha-article-card {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  padding: 16px;

  cursor: pointer;

  transition: all 0.2s;

  display: flex;

  flex-direction: column;

}

.ha-article-card:hover {

  border-color: var(--color-primary);

  box-shadow: var(--shadow-md);

  transform: translateY(-2px);

}

.ha-article-card .haa-tag {

  display: inline-block;

  align-self: flex-start;

  padding: 3px 10px;

  border-radius: 10px;

  font-size: 11px;

  font-weight: 500;

}

.ha-article-card .haa-tags-row {

  display: flex;

  gap: 6px;

  flex-wrap: wrap;

  margin-bottom: 10px;

}

.ha-article-card .haa-tag-scenario {

  background: #fef3c7;

  color: #d97706;

}

.ha-article-card .haa-title {

  font-size: 15px;

  font-weight: 400;

  color: var(--color-dark);

  margin-bottom: 8px;

  line-height: 1.5;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.home-articles-row .haa-excerpt {

  display: none;

}

.ha-article-card .haa-meta {

  font-size: 11px;

  color: var(--color-text-light);

  display: flex;

  align-items: center;

  gap: 8px;

}



/* --- Home Article Cards (ha-card-* flat classes) --- */

.ha-card-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.ha-tag { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.5; }

.ha-tag--industry { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }

.ha-tag--category { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

.ha-tag--enterprise { background: #f9fafb; color: #374151; border: 1px solid #e5e7eb; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }

.ha-card-title { font-size: 15px; font-weight: 600; color: var(--color-text-primary,#111827); line-height: 1.5; margin: 8px 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.ha-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #6b7280; margin-top: auto; padding-top: 10px; border-top: 1px solid #f3f4f6; }

.ha-card-meta span:last-child { color: #3b82f6; font-weight: 500; }

.ha-card-excerpt { font-size: 13px; color: #6b7280; line-height: 1.6; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }



/* --- Home Industry News Cards (hi-article) --- */

.hi-article-card{background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid #2563eb;border-radius:var(--radius-md);padding:16px 16px 16px 12px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;position:relative}

.hi-article-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(37,99,235,.18);border-color:#2563eb;border-left-color:#2563eb}

.hi-card-tags{display:flex;flex-wrap:wrap;gap:8px}

.hi-tag{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500;line-height:1.5}

.hi-tag--col{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}

.hi-tag--sub{background:#f1f5f9;color:#475569}

.hi-card-title{font-size:15px;font-weight:600;color:var(--color-text-primary,#111827);line-height:1.5;margin:10px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.hi-card-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#6b7280;margin-top:auto;padding-top:10px;border-top:1px solid #f3f4f6}

.hi-card-excerpt{font-size:13px;color:#6b7280;line-height:1.6;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}



/* --- Home Scenarios Grid --- */

.home-scenarios-grid {

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 10px;

}

.home-scenario-card {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

  padding: 12px 10px;

  text-align: center;

  cursor: pointer;

  transition: all 0.2s;

}

.home-scenario-card:hover {

  border-color: var(--color-primary);

  background: var(--color-primary-light);

  transform: translateY(-2px);

}

.home-scenario-card .hsc-icon {

  font-size: 22px;

  margin-bottom: 4px;

}

.home-scenario-card .hsc-name {

  font-size: 12px;

  font-weight: 400;

  color: var(--color-dark);

}



/* --- Home Services Grid --- */

.home-services-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;

}

.home-service-card {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  padding: 24px 20px;

  text-align: center;

  transition: all 0.2s;

  cursor: pointer;

  position: relative;

}

.home-service-card:hover {

  border-color: var(--color-primary);

  box-shadow: var(--shadow-md);

  transform: translateY(-3px);

}

.home-service-card .hsc-icon {

  font-size: 32px;

  margin-bottom: 10px;

  display: block;

}

.home-service-card h3 {

  font-size: 17px;

  font-weight: 700;

  color: var(--color-dark);

  margin-bottom: 6px;

}

.home-service-card p {

  font-size: 13px;

  color: var(--color-text-secondary);

  line-height: 1.6;

  margin-bottom: 10px;

  max-height: 42px;

  overflow: hidden;

}

.home-service-card .hsc-tag {

  display: inline-block;

  font-size: 11px;

  padding: 3px 10px;

  border-radius: 10px;

  background: var(--color-primary-light);

  color: var(--color-primary);

  font-weight: 500;

}



/* --- Simple Services Grid (八大AI服务) --- */

.simple-services-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

  margin-top: 32px;

}

.simple-service-card {

  background: #fff;

  border-radius: 12px;

  padding: 28px 20px;

  text-align: center;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 2px 8px rgba(0,0,0,0.06);

  border: 1px solid #f0f0f0;

}

.simple-service-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 8px 24px rgba(0,0,0,0.12);

  border-color: #e0e0e0;

}

.ssc-icon {

  font-size: 36px;

  margin-bottom: 16px;

  display: block;

}

.simple-service-card h3 {

  font-size: 16px;

  font-weight: 600;

  color: #1e293b;

  margin-bottom: 10px;

}

.simple-service-card p {

  font-size: 13px;

  color: #64748b;

  line-height: 1.6;

  margin-bottom: 16px;

}

.ssc-link {

  font-size: 13px;

  color: #3b82f6;

  font-weight: 500;

  display: inline-block;

  transition: all 0.3s;

}

.simple-service-card:hover .ssc-link {

  color: #2563eb;

  transform: translateX(4px);

}



/* ===== Section Common ===== */

.section {

  max-width: var(--max-content);

  margin: 0 auto;

  padding: 64px 32px;

}



.section-header {

  text-align: center;

  margin-bottom: 48px;

}



.section-title {

  font-size: 32px;

  font-weight: 700;

  color: var(--color-dark);

  margin-bottom: 8px;

}



.section-subtitle {

  font-size: 16px;

  color: var(--color-text-secondary);

}



/* ===== Value Cards (首页) ===== */

.value-cards {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

}



.value-card {

  background: var(--color-surface);

  border-radius: var(--radius-lg);

  padding: 32px 24px;

  text-align: center;

  box-shadow: var(--shadow-sm);

  border: 1px solid var(--color-border);

  transition: all 0.2s;

}

.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary-light); }



.value-card .card-icon {

  width: 56px; height: 56px;

  border-radius: var(--radius-md);

  display: flex; align-items: center; justify-content: center;

  margin: 0 auto 16px;

  font-size: 28px;

}



.value-card h3 { font-size: 18px; font-weight: 400; margin-bottom: 8px; color: var(--color-dark); }

.value-card p  { font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; }



.icon-blue   { background: #dbeafe; color: #3b82f6; }

.icon-green  { background: #d1fae5; color: #10b981; }

.icon-purple { background: #ede9fe; color: #8b5cf6; }

.icon-orange { background: #ffedd5; color: #f97316; }



/* ===== Quick Links ===== */

.quick-links {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

  margin-top: 8px;

}



.quick-link-card {

  background: var(--color-surface);

  border-radius: var(--radius-md);

  padding: 24px 20px;

  display: flex;

  align-items: center;

  gap: 14px;

  border: 1px solid var(--color-border);

  cursor: pointer;

  transition: all 0.2s;

}

.quick-link-card:hover { border-color: var(--color-primary); background: var(--color-primary-light); transform: translateY(-2px); }



.quick-link-card .ql-icon {

  width: 44px; height: 44px;

  border-radius: var(--radius-sm);

  background: var(--color-primary-light);

  display: flex; align-items: center; justify-content: center;

  color: var(--color-primary); font-size: 20px;

  flex-shrink: 0;

}

.quick-link-card .ql-text { font-size: 15px; font-weight: 400; color: var(--color-dark); }



/* ===== CTA ===== */

.cta-section {

  text-align: center;

  padding: 32px 0 64px;

}



/* ===== Page Header (子页面顶部) ===== */

.page-header {

  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-secondary) 100%);

  color: #fff;

  padding: 64px 32px;

  text-align: center;

}

.page-header h1 { font-size: 32px; font-weight: 700; margin-bottom: 8px; }

.page-header p  { font-size: 16px; color: rgba(255,255,255,0.7); }



/* ===== Content Block ===== */

.content-block {

  max-width: var(--max-content);

  margin: 0 auto;

  padding: 48px 32px;

}



.content-block h2 { font-size: 24px; font-weight: 700; color: var(--color-dark); margin-bottom: 16px; }

.content-block p  { font-size: 16px; color: var(--color-text-secondary); line-height: 1.8; margin-bottom: 16px; max-width: 800px; }



/* ===== About: Intro Layout ===== */

.about-intro {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px;

  align-items: center;

}



.about-intro-text h2 { margin-top: 0; }



.about-intro-image img {

  width: 100%;

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-md);

}



/* ===== About: Feature Grid ===== */

.feature-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

  margin-top: 16px;

}



.feature-item {

  background: var(--color-surface);

  border-radius: var(--radius-md);

  padding: 28px 20px;

  border: 1px solid var(--color-border);

  text-align: center;

  transition: all 0.2s;

}

.feature-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }



.feature-item .fi-icon {

  width: 48px; height: 48px;

  border-radius: var(--radius-md);

  display: flex; align-items: center; justify-content: center;

  margin: 0 auto 12px;

  font-size: 24px;

}

.feature-item h4 { font-size: 16px; font-weight: 400; color: var(--color-dark); margin-bottom: 6px; }

.feature-item p  { font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; max-width: none; }



/* ===== Service Cards ===== */

.services-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;

  margin-bottom: 48px;

}



.service-card {

  background: var(--color-surface);

  border-radius: var(--radius-lg);

  padding: 28px;

  border: 1px solid var(--color-border);

  border-left: 4px solid var(--color-primary);

  transition: all 0.2s;

}

.service-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }



.service-card h3 { font-size: 20px; font-weight: 700; color: var(--color-dark); margin-bottom: 4px; }

.service-card .sc-tag { display: inline-block; font-size: 12px; background: var(--color-primary-light); color: var(--color-primary); padding: 3px 12px; border-radius: 12px; margin-bottom: 10px; }

.service-card p  { font-size: 14px; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 14px; max-width: none; }



.sc-features { display: flex; flex-wrap: wrap; gap: 8px; }

.sc-feature-tag { font-size: 12px; background: var(--color-bg); color: var(--color-text-secondary); padding: 4px 12px; border-radius: 14px; font-weight: 500; }



/* ===== Process Flow ===== */

.process-flow {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 24px;

  padding: 32px 0;

}



.process-step {

  background: var(--color-surface);

  border-radius: var(--radius-md);

  padding: 28px 32px;

  text-align: center;

  border: 1px solid var(--color-border);

  box-shadow: var(--shadow-sm);

  min-width: 140px;

  transition: all 0.2s;

}

.process-step:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }



.process-step .ps-num {

  width: 36px; height: 36px;

  border-radius: 50%;

  background: var(--color-primary);

  color: #fff;

  display: flex; align-items: center; justify-content: center;

  font-size: 16px; font-weight: 700;

  margin: 0 auto 10px;

}

.process-step .ps-label { font-size: 14px; font-weight: 400; color: var(--color-dark); }

.process-arrow { color: var(--color-text-light); font-size: 24px; font-weight: 300; }



/* ===== Process Flow Cards (服务流程4卡片) ===== */

.process-flow-cards {

  display: flex;

  align-items: stretch;

  justify-content: center;

  gap: 16px;

  padding: 16px 0;

}



.pf-card {

  flex: 1;

  min-width: 0;

  background: var(--color-surface);

  border-radius: var(--radius-lg);

  padding: 28px 22px;

  border: 1px solid var(--color-border);

  box-shadow: var(--shadow-sm);

  transition: all 0.2s;

  cursor: default;

}

.pf-card.sc-clickable {

  cursor: pointer;

}

.pf-card.sc-clickable:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow-md);

  border-color: var(--color-primary);

}



.pf-step {

  width: 40px; height: 40px;

  border-radius: 50%;

  background: var(--color-primary);

  color: #fff;

  display: flex; align-items: center; justify-content: center;

  font-size: 16px; font-weight: 800;

  margin-bottom: 14px;

}



.pf-card h3 {

  font-size: 15px; font-weight: 700;

  color: var(--color-dark);

  margin-bottom: 6px;

}



.pf-card .sc-tag {

  display: inline-block;

  margin-bottom: 10px;

}



.pf-card p {

  font-size: 13px; color: var(--color-text-secondary);

  line-height: 1.6; margin-bottom: 12px;

}



.pf-card .sc-features {

  margin-bottom: 10px;

}



.pf-card .sc-link {

  font-size: 13px; font-weight: 400;

  color: var(--color-primary);

  margin-top: 6px;

}



.pf-arrow {

  display: flex; align-items: center;

  color: var(--color-primary);

  font-size: 28px; font-weight: 400;

  flex-shrink: 0;

}



@media (max-width: 1024px) {

  .process-flow-cards {

    flex-wrap: wrap;

  }

  .pf-card {

    flex: 1 1 calc(50% - 24px);

    min-width: 240px;

  }

  .pf-arrow {

    display: none;

  }

}



@media (max-width: 640px) {

  .pf-card {

    flex: 1 1 100%;

  }

}



/* ===== Industry Cards ===== */

.industries-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

}

.industry-card {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: 12px;

  padding: 20px;

  transition: all 0.25s ease;

  cursor: pointer;

  display: block;

  text-decoration: none;

  color: inherit;

}

.industry-card:hover {

  border-color: var(--color-primary);

  box-shadow: 0 4px 16px rgba(59,130,246,0.1);

  transform: translateY(-2px);

}

.ind-card-title {

  font-size: 16px;

  font-weight: 700;

  color: var(--color-dark);

  margin-bottom: 14px;

  padding-bottom: 10px;

  border-bottom: 2px solid var(--color-primary-light);

}

.ind-card-scenarios {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}

.ind-scenario-tag {

  font-size: 12px;

  padding: 4px 10px;

  border-radius: 14px;

  background: rgba(59,130,246,0.08);

  color: var(--color-primary);

  font-weight: 500;

  white-space: nowrap;

  transition: background 0.2s;

}

.ind-scenario-tag:hover {

  background: var(--color-primary);

  color: #fff;

}



@media (max-width: 1024px) {

  .industries-grid { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 640px) {

  .industries-grid { grid-template-columns: 1fr; }

}



/* ===== Case Grid ===== */

.cases-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}



.case-card {

  background: var(--color-surface);

  border-radius: var(--radius-lg);

  overflow: hidden;

  border: 1px solid var(--color-border);

  cursor: pointer;

  transition: all 0.2s;

}

.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }



.case-card .cc-image {

  height: 160px;

  background: linear-gradient(135deg, var(--color-dark-secondary), #3b4a6b);

  display: flex; align-items: center; justify-content: center;

  color: rgba(255,255,255,0.25);

  font-size: 48px;

}

.case-card .cc-body { padding: 20px 24px; }

.case-card .cc-industry { font-size: 12px; color: var(--color-primary); font-weight: 400; margin-bottom: 4px; }

.case-card .cc-title { font-size: 16px; font-weight: 700; color: var(--color-dark); margin-bottom: 8px; }

.case-card .cc-result { font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; }

.cc-tags { display: flex; gap: 6px; margin-top: 10px; }

.cc-tag { font-size: 12px; padding: 3px 10px; border-radius: 10px; background: var(--color-bg); color: var(--color-text-secondary); }



/* ===== Filter Tabs ===== */

.filter-tabs {

  display: flex;

  gap: 8px;

  margin-bottom: 24px;

  flex-wrap: wrap;

}

.filter-tab {

  padding: 8px 20px;

  border-radius: 20px;

  font-size: 14px;

  font-weight: 500;

  background: var(--color-surface);

  color: var(--color-text-secondary);

  border: 1px solid var(--color-border);

  cursor: pointer;

  transition: all 0.2s;

}

.filter-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }

.filter-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }



/* 行业筛选标签云 - 更紧凑 */

.filter-tabs--industry { gap: 6px; }

.filter-tabs--industry .filter-tab {

  padding: 5px 14px;

  font-size: 13px;

  border-radius: 16px;

}



/* 价值类型筛选标签 */

.filter-tabs--value {

  gap: 8px;

  margin-bottom: 16px;

}

.filter-tabs--value .filter-tab {

  padding: 6px 16px;

  font-size: 13px;

  border-radius: 16px;

}



/* 文章类型筛选标签（案例/知识） */

.filter-tabs--type {

  gap: 6px;

  margin-bottom: 16px;

}

.filter-tabs--type .filter-tab {

  padding: 5px 14px;

  font-size: 13px;

  border-radius: 16px;

}



/* ===== Article Grid ===== */

/* ===== 文章列表页 — 分类分组 + 列表式 ===== */

.articles-categorized {

  display: flex;

  flex-direction: column;

  gap: 24px;

}



/* 分类组 */

.ac-group {

  background: var(--color-surface);

  border-radius: var(--radius-md);

  border: 1px solid var(--color-border);

  overflow: hidden;

}

.ac-group-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 14px 20px;

  background: var(--color-bg);

  border-bottom: 1px solid var(--color-border);

}

.ac-group-title {

  display: flex;

  align-items: center;

  gap: 8px;

}

.ac-group-icon {

  font-size: 18px;

}

.ac-group-tag {

  display: inline-block;

  font-size: 14px;

  font-weight: 400;

  padding: 3px 14px;

  border-radius: 12px;

}

.ac-group-count {

  font-size: 12px;

  color: var(--color-text-light);

  margin-left: 4px;

}

.ac-group-more {

  font-size: 13px;

  color: var(--color-primary);

  background: none;

  border: 1px solid var(--color-primary-light);

  padding: 4px 14px;

  border-radius: 14px;

  cursor: pointer;

  transition: all 0.2s;

}

.ac-group-more:hover {

  background: var(--color-primary);

  color: #fff;

}

.ac-group-list {

  /* nothing special */

}



/* 文章行 — 列表式 */

.article-list-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 12px 20px;

  border-bottom: 1px solid var(--color-border);

  cursor: pointer;

  transition: background 0.15s;

}

.article-list-row:last-child {

  border-bottom: none;

}

.article-list-row:hover {

  background: #f8fafc;

}



.alr-main {

  display: flex;

  align-items: center;

  gap: 10px;

  flex: 1;

  min-width: 0;

}

.alr-tag {

  display: inline-block;

  font-size: 11px;

  padding: 2px 10px;

  border-radius: 10px;

  white-space: nowrap;

  flex-shrink: 0;

}

.alr-title {

  font-size: 14px;

  font-weight: 500;

  color: var(--color-dark);

  line-height: 1.4;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.alr-meta {

  display: flex;

  align-items: center;

  gap: 10px;

  flex-shrink: 0;

  flex-wrap: nowrap;

}

.alr-industry {

  font-size: 12px;

  color: #3b82f6;

  background: #eff6ff;

  padding: 2px 8px;

  border-radius: 4px;

  white-space: nowrap;

}

.alr-casename {

  display: inline;

  font-size: 15px;

  color: var(--color-text);

  font-weight: 500;

  cursor: pointer;

  transition: color 0.2s;

}

.alr-casename:hover {

  color: var(--color-primary);

}

.alr-meta-item {

  font-size: 12px;

  color: var(--color-text-secondary);

  white-space: nowrap;

}

.alr-source {

  font-size: 11px;

  color: #94a3b8;

  white-space: nowrap;

  max-width: 100px;

  overflow: hidden;

  text-overflow: ellipsis;

}

.alr-date {

  font-size: 12px;

  color: var(--color-text-light);

  white-space: nowrap;

}



/* 分类色系标签（复用） */

.tag-save       { background: #dcfce7; color: #166534; }

.tag-earn       { background: #fef3c7; color: #92400e; }

.tag-speed      { background: #fce7f3; color: #9d174d; }

.tag-safe       { background: #dbeafe; color: #1e40af; }

.tag-experience { background: #ede9fe; color: #6d28d9; }

.tag-decision   { background: #ccfbf1; color: #0f766e; }



/* 行业分组标签颜色（6色循环） */

.tag-ind-1 { background: #dbeafe; color: #1e40af; }  /* 蓝 */

.tag-ind-2 { background: #dcfce7; color: #166534; }  /* 绿 */

.tag-ind-3 { background: #fef3c7; color: #92400e; }  /* 黄 */

.tag-ind-4 { background: #fce7f3; color: #9d174d; }  /* 粉 */

.tag-ind-5 { background: #ede9fe; color: #6d28d9; }  /* 紫 */

.tag-ind-6 { background: #ccfbf1; color: #0f766e; }  /* 青 */



/* 筛选导航栏 */

.ac-filter-bar {

  display: flex;

  flex-direction: column;

  gap: 0;

  margin-bottom: 20px;

  background: #fff;

  border-radius: 12px;

  border: 1px solid #e2e8f0;

  overflow: hidden;

  box-shadow: 0 1px 3px rgba(0,0,0,0.04);

}

.ac-filter-section {

  padding: 14px 18px;

}

.ac-filter-title {

  font-size: 13px;

  font-weight: 700;

  color: #334155;

  margin-bottom: 10px;

  letter-spacing: 0.5px;

}

.ac-filter-divider {

  height: 1px;

  background: #e2e8f0;

  margin: 0 18px;

}

.ac-filter-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

}

.ac-filter-tag {

  font-size: 12.5px;

  padding: 5px 14px;

  border-radius: 16px;

  border: 1.5px solid #e2e8f0;

  background: #fff;

  color: #475569;

  cursor: pointer;

  transition: all 0.15s;

  font-weight: 500;

  white-space: nowrap;

}

.ac-filter-tag:hover {

  border-color: #3b82f6;

  color: #3b82f6;

  background: #eff6ff;

  transform: translateY(-1px);

}

.ac-filter-tag.active {

  background: #3b82f6;

  color: #fff;

  border-color: #3b82f6;

  box-shadow: 0 2px 6px rgba(59,130,246,0.3);

}

/* 行业筛选标签带行业颜色 */

.ac-tag-ind.active {

  background: #1e40af;

  border-color: #1e40af;

}

/* 价值类型筛选标签各自配色 */

.ac-tag-val.tag-save { border-color: #86efac; color: #166534; }

.ac-tag-val.tag-save:hover { background: #dcfce7; border-color: #166534; }

.ac-tag-val.tag-save.active { background: #16a34a; color: #fff; border-color: #16a34a; }

.ac-tag-val.tag-earn { border-color: #fde68a; color: #92400e; }

.ac-tag-val.tag-earn:hover { background: #fef3c7; border-color: #92400e; }

.ac-tag-val.tag-earn.active { background: #d97706; color: #fff; border-color: #d97706; }

.ac-tag-val.tag-speed { border-color: #93c5fd; color: #1e40af; }

.ac-tag-val.tag-speed:hover { background: #dbeafe; border-color: #1e40af; }

.ac-tag-val.tag-speed.active { background: #2563eb; color: #fff; border-color: #2563eb; }

.ac-tag-val.tag-safe { border-color: #fca5a5; color: #991b1b; }

.ac-tag-val.tag-safe:hover { background: #fee2e2; border-color: #991b1b; }

.ac-tag-val.tag-safe.active { background: #dc2626; color: #fff; border-color: #dc2626; }

.ac-tag-val.tag-experience { border-color: #c4b5fd; color: #5b21b6; }

.ac-tag-val.tag-experience:hover { background: #ede9fe; border-color: #5b21b6; }

.ac-tag-val.tag-experience.active { background: #7c3aed; color: #fff; border-color: #7c3aed; }

.ac-tag-val.tag-decision { border-color: #67e8f9; color: #0e7490; }

.ac-tag-val.tag-decision:hover { background: #cffafe; border-color: #0e7490; }

.ac-tag-val.tag-decision.active { background: #0891b2; color: #fff; border-color: #0891b2; }

/* 筛选状态提示 */

.ac-filter-status {

  padding: 8px 18px 12px;

  font-size: 12px;

  color: #94a3b8;

  border-top: 1px solid #f1f5f9;

}



/* ===== 场景卡片 2×2 网格布局 ===== */

.scenario-cards-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 24px;

  margin: 32px 0;

}



.scenario-card {

  background: #fff;

  border-radius: 16px;

  border: 1px solid #e2e8f0;

  padding: 28px 26px 24px;

  box-shadow: 0 1px 4px rgba(0,0,0,0.04);

  transition: all 0.25s ease;

  position: relative;

  overflow: hidden;

}



/* 顶部彩色条纹 */

.scenario-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 4px;

  background: #3b82f6;

}

.scenario-card[data-scene="1"]::before { background: #3b82f6; }

.scenario-card[data-scene="2"]::before { background: #10b981; }

.scenario-card[data-scene="3"]::before { background: #f59e0b; }

.scenario-card[data-scene="4"]::before { background: #8b5cf6; }



.scenario-card:hover {

  box-shadow: 0 8px 24px rgba(0,0,0,0.08);

  transform: translateY(-3px);

  border-color: #cbd5e1;

}



/* 场景卡片内的标题 */

.scenario-card h2 {

  font-size: 20px;

  font-weight: 700;

  color: #1e293b;

  margin: 0 0 6px;

}



/* 场景卡片内的副标题 */

.scenario-card .detail-intro-text p:first-of-type {

  font-size: 14px !important;

  color: #64748b !important;

  margin-bottom: 10px !important;

}



/* 场景卡片内的正文 */

.scenario-card .detail-intro-text p {

  font-size: 14px !important;

  line-height: 1.7;

  color: #475569;

  margin-bottom: 8px;

}



/* 场景卡片内的图标 */

.scenario-card .impl-icon {

  font-size: 36px !important;

  margin-bottom: 10px !important;

}



/* 场景卡片内的数据指标区 */

.scenario-card .impl-grid {

  margin-top: 16px !important;

}



.scenario-card .impl-grid > div {

  padding: 12px 10px !important;

}



.scenario-card .impl-grid > div > div:first-child {

  font-size: 22px !important;

}



.scenario-card .impl-grid > div > div:last-child {

  font-size: 11.5px !important;

}



/* 场景卡片内段落限制显示 */

.scenario-card .detail-intro-text p:nth-child(n+4) {

  display: none;

}



/* 展开状态显示全部段落 */

.scenario-card.scene-expanded .detail-intro-text p:nth-child(n+4) {

  display: block;

}



/* 展开/收起按钮 */

.scenario-card .scene-toggle {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  font-size: 13px;

  color: #3b82f6;

  cursor: pointer;

  margin-top: 8px;

  font-weight: 500;

  border: none;

  background: none;

  padding: 4px 0;

}

.scenario-card .scene-toggle:hover { color: #1d4ed8; }



/* 场景网格中非场景卡片的元素占满整行（备选） */

.scenario-cards-grid > :not(.scenario-card) {

  grid-column: 1 / -1 !important;

  width: 100%;

}



/* 行业页通栏区域（典型实施路径、覆盖子行业） */

.industry-banner {

  width: 100vw;

  margin-left: calc(-50vw + 600px);

  padding-left: calc(50vw - 600px + 32px);

  padding-right: calc(50vw - 600px + 32px);

  background: var(--color-bg-secondary);

  border-top: 1px solid var(--color-border);

  border-bottom: 1px solid var(--color-border);

  padding-top: 32px;

  padding-bottom: 32px;

  box-sizing: border-box;

}

.industry-banner h2 {

  font-size: 22px;

  font-weight: 700;

  color: var(--color-dark);

  margin-bottom: 16px;

  max-width: var(--max-content);

  margin-left: auto;

  margin-right: auto;

}

.industry-banner .impl-process,

.industry-banner .impl-grid {

  max-width: var(--max-content);

  margin-left: auto;

  margin-right: auto;

}



/* 移动端改为单列 */

@media (max-width: 768px) {

  .scenario-cards-grid {

    grid-template-columns: 1fr;

    gap: 16px;

  }

}



/* 响应式：小屏元信息换行 */

@media (max-width: 900px) {

  .article-list-row {

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

  }

  .alr-title {

    white-space: normal;

  }

  .alr-meta {

    flex-wrap: wrap;

  }

}



/* ===== 后台管理样式 ===== */

#admin-source-table th {

  position: sticky;

  top: 0;

  z-index: 1;

}

#admin-source-table tbody tr:hover {

  background: var(--color-bg);

}

#admin-source-table tbody tr:last-child {

  border-bottom: none;

}

@media (max-width: 768px) {

  #admin-source-table {

    font-size: 12px;

  }

  #admin-source-table td, #admin-source-table th {

    padding: 8px 6px;

  }

}

  .alr-meta {

    flex-wrap: wrap;

  }

}



/* 文章详情页 - 类型徽章 */

.ar-type-badge {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  font-size: 12px;

  padding: 4px 12px;

  border-radius: 14px;

  background: #eef2ff;

  color: #6366f1;

  font-weight: 500;

  line-height: 1.4;

}

}



/* ===== 诊断栏（文章页顶部） ===== */

.diagnosis-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 16px 20px;

  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);

  border-radius: var(--radius-lg);

  border: 1px solid #dbeafe;

  margin-bottom: 20px;

}

.diagnosis-hint {

  font-size: 14px;

  color: var(--color-text);

}

.di-highlight {

  color: var(--color-primary);

  font-weight: 700;

}

.btn-diagnosis {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 10px 20px;

  background: var(--color-primary);

  color: #fff;

  border: none;

  border-radius: 24px;

  font-size: 14px;

  font-weight: 400;

  cursor: pointer;

  transition: all 0.2s;

  white-space: nowrap;

}

.btn-diagnosis:hover { background: var(--color-primary-dark); transform: scale(1.02); }

.btn-diagnosis svg { width: 16px; height: 16px; }



/* ===== 自诊断弹窗 ===== */

.diagnosis-overlay {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.5);

  z-index: 300;

}

.diagnosis-overlay.active {

  display: flex;

  align-items: center;

  justify-content: center;

}

.diagnosis-modal {

  background: var(--color-surface);

  border-radius: var(--radius-xl);

  width: 100%;

  max-width: 620px;

  max-height: 80vh;

  overflow-y: auto;

  padding: 16px 32px;

  box-shadow: var(--shadow-lg);

  position: relative;

  animation: fadeIn 0.25s ease;

}

.di-close {

  position: absolute;

  top: 16px; right: 16px;

  width: 32px; height: 32px;

  border-radius: 50%;

  background: var(--color-bg);

  display: flex; align-items: center; justify-content: center;

  border: none;

  cursor: pointer;

  font-size: 18px;

  color: var(--color-text-secondary);

  transition: all 0.2s;

}

.di-close:hover { background: #fee2e2; color: #ef4444; }

.di-close svg { width: 16px; height: 16px; }



.di-steps {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin-bottom: 24px;

}

.di-step {

  font-size: 13px;

  padding: 6px 14px;

  border-radius: 16px;

  background: var(--color-bg);

  color: var(--color-text-light);

  transition: all 0.2s;

}

.di-step.active { background: var(--color-primary); color: #fff; font-weight: 400; }

.di-step.done { background: #dcfce7; color: #166534; }

.di-step-arrow { color: var(--color-text-light); font-size: 14px; }



.di-title {

  font-size: 16px;

  font-weight: 700;

  color: var(--color-dark);

  margin-bottom: 16px;

  text-align: center;

}

.di-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

}

.di-grid.cols2 { grid-template-columns: repeat(2, 1fr); }

.di-grid.cols4 { grid-template-columns: repeat(4, 1fr); }

.di-option {

  padding: 14px 12px;

  border: 2px solid var(--color-border);

  border-radius: var(--radius-md);

  text-align: center;

  font-size: 14px;

  cursor: pointer;

  transition: all 0.2s;

  color: var(--color-text);

}

.di-option:hover { border-color: var(--color-primary); background: #eff6ff; }

.di-option.selected { border-color: var(--color-primary); background: #eff6ff; font-weight: 400; }

.di-option .di-icon { font-size: 24px; display: block; margin-bottom: 6px; }



.di-result-item {

  padding: 16px;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  margin-bottom: 10px;

  cursor: pointer;

  transition: all 0.2s;

}

.di-result-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }

.di-result-item h4 { font-size: 15px; color: var(--color-dark); margin-bottom: 4px; }

.di-result-item .di-result-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.di-result-item .di-result-tag {

  font-size: 11px;

  padding: 2px 8px;

  border-radius: 4px;

  background: #eff6ff;

  color: #3b82f6;

}

.di-no-result { text-align: center; padding: 32px 0; color: var(--color-text-secondary); }

.di-no-result .di-no-icon { font-size: 40px; margin-bottom: 12px; }

.di-back { 

  display: inline-flex; align-items: center; gap: 4px;

  font-size: 13px; color: var(--color-primary); cursor: pointer; margin-bottom: 16px; border: none; background: none; padding: 0;

}

.di-back svg { width: 14px; height: 14px; }

.di-back:hover { text-decoration: underline; }



/* ===== 关联推荐（文章详情底部） ===== */

.ar-related {

  margin-top: 32px;

  padding-top: 24px;

  border-top: 1px solid var(--color-border);

}

.ar-related h3 {

  font-size: 18px;

  color: var(--color-dark);

  margin-bottom: 16px;

  font-weight: 700;

}

.ar-related-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 12px;

}

.ar-related-item {

  padding: 16px;

  background: var(--color-bg);

  border-radius: var(--radius-md);

  cursor: pointer;

  transition: all 0.2s;

  border: 1px solid transparent;

}

.ar-related-item:hover { border-color: var(--color-primary-light); background: var(--color-surface); }

.ar-related-item h4 { font-size: 14px; color: var(--color-dark); margin-bottom: 6px; line-height: 1.4; }

.ar-related-item .ar-rel-meta { font-size: 12px; color: var(--color-text-light); display: flex; gap: 8px; }



/* 文章详情页：策略信息栏 */

.ar-strategy-bar {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin: 12px 0 20px;

  padding: 14px 18px;

  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);

  border-radius: var(--radius-md);

  border: 1px solid #dbeafe;

}

.ar-sb-item {

  font-size: 13px;

  font-weight: 400;

  color: var(--color-dark, #1e293b);

  white-space: nowrap;

}

.ar-scale-tag {

  display: inline-flex;

  align-items: center;

  gap: 3px;

  font-size: 12px;

  padding: 4px 12px;

  border-radius: 14px;

  background: #dcfce7;

  color: #166534;

  font-weight: 500;

  line-height: 1.4;

}



/* ===== Chat Widget ===== */

.chat-widget {

  max-width: 800px;

  margin: 32px auto;

  background: var(--color-surface);

  border-radius: var(--radius-lg);

  border: 1px solid var(--color-border);

  box-shadow: var(--shadow-md);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  height: 520px;

}



.chat-messages {

  flex: 1;

  overflow-y: auto;

  padding: 24px;

  display: flex;

  flex-direction: column;

  gap: 16px;

  background: var(--color-bg);

}



.chat-msg {

  display: flex;

  gap: 10px;

  max-width: 75%;

}

.chat-msg.user { align-self: flex-end; flex-direction: row-reverse; }

.chat-msg.bot  { align-self: flex-start; }



.chat-avatar {

  width: 36px; height: 36px;

  border-radius: 50%;

  display: flex; align-items: center; justify-content: center;

  font-size: 16px;

  flex-shrink: 0;

}

.chat-msg.bot .chat-avatar { background: var(--color-primary-light); color: var(--color-primary); }

.chat-msg.user .chat-avatar { background: var(--color-dark-secondary); color: #fff; }



.chat-bubble {

  padding: 12px 18px;

  border-radius: 16px;

  font-size: 14px;

  line-height: 1.7;

}

.chat-msg.bot .chat-bubble  { background: var(--color-surface); color: var(--color-text); border-top-left-radius: 4px; }

.chat-msg.user .chat-bubble { background: var(--color-primary); color: #fff; border-top-right-radius: 4px; }



.chat-typing {

  align-self: flex-start;

  display: flex; gap: 5px;

  padding: 14px 18px;

  background: var(--color-surface);

  border-radius: 16px;

  border-top-left-radius: 4px;

}



.chat-typing span {

  width: 7px; height: 7px;

  border-radius: 50%;

  background: var(--color-text-light);

  animation: typing 1.4s infinite;

}

.chat-typing span:nth-child(2) { animation-delay: 0.2s; }

.chat-typing span:nth-child(3) { animation-delay: 0.4s; }



@keyframes typing {

  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }

  30% { opacity: 1; transform: translateY(-4px); }

}



.chat-input-area {

  display: flex;

  gap: 10px;

  padding: 14px 20px;

  background: var(--color-surface);

  border-top: 1px solid var(--color-border);

}

.chat-input-area input {

  flex: 1;

  border: 1px solid var(--color-border);

  border-radius: 24px;

  padding: 12px 18px;

  font-size: 14px;

  outline: none;

  background: var(--color-bg);

  transition: border-color 0.2s;

}

.chat-input-area input:focus { border-color: var(--color-primary); }



.chat-send-btn {

  width: 44px; height: 44px;

  border-radius: 50%;

  background: var(--color-primary);

  color: #fff;

  display: flex; align-items: center; justify-content: center;

  font-size: 18px;

  flex-shrink: 0;

  transition: all 0.2s;

}

.chat-send-btn:hover { background: var(--color-primary-dark); }



/* ===== Chat Page Layout ===== */



@media (max-width: 768px) {

}



/* ===== Implementation Detail Page ===== */

.impl-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;

}



.impl-card {

  background: var(--color-surface);

  border-radius: var(--radius-md);

  padding: 28px;

  border: 1px solid var(--color-border);

  transition: all 0.2s;

}

.impl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }



.impl-icon {

  width: 56px; height: 56px;

  display: flex; align-items: center; justify-content: center;

  background: var(--color-bg);

  border-radius: var(--radius-sm);

  margin-bottom: 16px;

}



.impl-card h3 { font-size: 18px; margin-bottom: 10px; }



.impl-desc {

  font-size: 14px;

  color: var(--color-text-secondary);

  line-height: 1.7;

  margin-bottom: 16px;

}



.impl-features {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



.impl-feature-tag {

  font-size: 12px;

  padding: 4px 10px;

  border-radius: 12px;

  background: var(--color-bg);

  color: var(--color-text-secondary);

  border: 1px solid var(--color-border);

}



/* Delivery Process */

.impl-process {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 16px;

  margin-top: 16px;

}



.impl-step {

  text-align: center;

  padding: 20px 12px;

  background: var(--color-surface);

  border-radius: var(--radius-sm);

  border: 1px solid var(--color-border);

}



.impl-step-num {

  width: 40px; height: 40px;

  margin: 0 auto 12px;

  display: flex; align-items: center; justify-content: center;

  background: var(--color-primary);

  color: #fff;

  border-radius: 50%;

  font-size: 14px;

  font-weight: 700;

}



.impl-step-text h4 {

  font-size: 14px;

  margin-bottom: 6px;

}



.impl-step-text p {

  font-size: 12px;

  color: var(--color-text-secondary);

  line-height: 1.5;

  margin: 0;

}



/* Back button */

.back-btn {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  background: none;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

  padding: 8px 16px;

  font-size: 14px;

  color: var(--color-text-secondary);

  cursor: pointer;

  margin-bottom: 16px;

  transition: all 0.2s;

}

.back-btn:hover { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); }



/* Clickable service card */

.sc-clickable { cursor: pointer; }

.cc-clickable { cursor: pointer; }

.cc-clickable:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary-light); }



.sc-link {

  font-size: 13px;

  color: var(--color-primary);

  margin-top: 12px;

  font-weight: 500;

  transition: color 0.2s;

}

.sc-clickable:hover .sc-link { color: var(--color-primary-dark); }



/* CTA section */

/* ===== Industry Page Consistent Width ===== */

[id^="page-industry-"].page-section.active {

  max-width: var(--max-content);

  margin-left: auto;

  margin-right: auto;

  background: var(--color-bg);

}



/* 行业页通栏区域（典型实施路径、覆盖子行业） */

.industry-banner {

  width: 100vw;

  margin-left: calc(-50vw + 600px);

  padding-left: calc(50vw - 600px + 32px);

  padding-right: calc(50vw - 600px + 32px);

  background: var(--color-bg-secondary);

  border-top: 1px solid var(--color-border);

  border-bottom: 1px solid var(--color-border);

  padding-top: 40px;

  padding-bottom: 40px;

  box-sizing: border-box;

}

.industry-banner h2 {

  font-size: 22px;

  font-weight: 700;

  color: var(--color-dark);

  margin-bottom: 16px;

  max-width: var(--max-content);

  margin-left: auto;

  margin-right: auto;

}

.industry-banner .impl-process,

.industry-banner .impl-grid {

  max-width: var(--max-content);

  margin-left: auto;

  margin-right: auto;

}

[id^="page-industry-"] .page-header {

  width: 100vw;

  margin-left: calc(-50vw + 600px);

  box-sizing: border-box;

}

[id^="page-industry-"] .industry-articles-section {

  padding: 0 32px 32px;

  border-top: 1px solid var(--color-border);

  margin-top: 8px;

}

[id^="page-industry-"] .cta-section {

  text-align: center;

  padding: 20px 20px;

  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));

  border-radius: var(--radius-md);

  color: #fff;

  margin: 40px auto 40px;

}

[id^="page-industry-"] .cta-section h2 { color: #fff; margin-bottom: 12px; font-size: 22px; line-height: 1.6; }

[id^="page-industry-"] .cta-section p { color: rgba(255,255,255,.85); font-size: 16px; margin-bottom: 20px; line-height: 1.8; }

[id^="page-industry-"] .cta-section .btn.btn-primary { background: #fff; color: var(--color-primary); border: none; padding: 4px 20px !important; font-size: 13px !important; border-radius: 6px !important; min-height: 0; }

[id^="page-industry-"] .cta-section .btn.btn-primary:hover { background: rgba(255,255,255,.9); }



/* ===== 企脉AI独家观点（引用块样式） ===== */

/* 正文里的"企脉AI独家观点"原本没有专属样式，会继承 .ar-body h2 变成大号粗体章节标题；

   这里改为引用块：左侧竖线 + 浅灰底，标题用正常字重的品牌蓝小标签，克制不抢眼。 */

.ar-body .perspective,

.perspective {

  background: #f8fafc;

  border-left: 4px solid var(--color-primary, #2563eb);

  border-radius: 0 8px 8px 0;

  padding: 18px 22px;

  margin: 28px 0;

}

.ar-body .perspective h2,

.perspective h2 {

  font-size: 16px;

  font-weight: 500;

  color: var(--color-primary, #2563eb);

  margin: 0 0 10px;

  padding: 0;

  border: none;

}

.ar-body .perspective h2::before,

.perspective h2::before {

  display: none;

}

.ar-body .perspective p,

.perspective p {

  color: #475569;

  line-height: 1.75;

  margin: 0 0 8px;

}

.ar-body .perspective p:last-child,

.perspective p:last-child {

  margin-bottom: 0;

}



/* ===== Industry Page Articles Section ===== */

.industry-articles-section {

  padding: 0 32px 32px;

  border-top: 1px solid var(--color-border);

  margin-top: 8px;

}

.industry-articles-section h2 {

  font-size: 22px;

  font-weight: 700;

  color: var(--color-text);

  margin: 24px 0 16px;

  text-align: center;

}

.industry-articles-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 16px;

  max-width: 960px;

  margin: 0 auto;

}

.industry-article-card {

  background: var(--color-bg-secondary);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  padding: 16px;

  cursor: pointer;

  transition: box-shadow 0.2s, transform 0.2s;

  text-align: left;

  display: block;

  text-decoration: none;

}

.industry-article-card:hover {

  box-shadow: 0 4px 16px rgba(0,0,0,.08);

  transform: translateY(-2px);

}

.industry-article-card h3 {

  font-size: 15px;

  font-weight: 400;

  color: var(--color-text);

  margin: 0 0 8px;

  line-height: 1.4;

}

.industry-article-card h3:hover { color: var(--color-primary); }

.industry-article-card p {

  font-size: 13px;

  color: var(--color-text-secondary);

  margin: 0 0 10px;

  line-height: 1.5;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.industry-article-meta {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}

.industry-article-tag {

  background: #dbeafe;

  color: #2563eb;

  font-size: 12px;

  padding: 2px 8px;

  border-radius: 20px;

}

.industry-article-date {

  font-size: 12px;

  color: var(--color-text-secondary);

}

.industry-articles-empty {

  color: var(--color-text-secondary);

  font-size: 14px;

  padding: 20px 0;

  text-align: center;

  grid-column: 1 / -1;

}



/* ===== Contact Page ===== */

.contact-layout {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px;

}



.contact-form {

  background: var(--color-surface);

  border-radius: var(--radius-lg);

  padding: 16px 32px;

  border: 1px solid var(--color-border);

  box-shadow: var(--shadow-sm);

}



.form-group { margin-bottom: 18px; }

.form-group label { display: block; font-size: 14px; font-weight: 400; color: var(--color-dark); margin-bottom: 6px; }

.form-group input,

.form-group textarea {

  width: 100%;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

  padding: 12px 16px;

  font-size: 15px;

  outline: none;

  background: var(--color-bg);

  transition: border-color 0.2s;

}

.form-group input:focus,

.form-group textarea:focus { border-color: var(--color-primary); }

.form-group textarea { resize: vertical; min-height: 120px; }



.contact-info-side {

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.contact-info-side h3 { font-size: 20px; font-weight: 700; color: var(--color-dark); margin-bottom: 4px; }



.contact-info-item {

  display: flex;

  align-items: flex-start;

  gap: 14px;

  font-size: 15px;

  color: var(--color-text-secondary);

}

.contact-info-item .ci-icon {

  width: 44px; height: 44px;

  border-radius: var(--radius-sm);

  display: flex; align-items: center; justify-content: center;

  background: var(--color-primary-light);

  color: var(--color-primary);

  font-size: 20px;

  flex-shrink: 0;

}

.contact-info-item .ci-label { font-weight: 400; color: var(--color-dark); font-size: 14px; margin-bottom: 2px; }



/* ===== Footer ===== */

.app-footer {

  background: var(--color-dark);

  color: rgba(255,255,255,0.7);

  padding: 56px 32px 0;

  margin-top: auto;

}



.footer-inner {

  max-width: var(--max-content);

  margin: 0 auto;

  display: grid;

  grid-template-columns: 2fr 1fr 1fr 1.5fr;

  gap: 40px;

  padding-bottom: 40px;

}



.footer-col h4 {

  color: #fff;

  font-size: 14px;

  font-weight: 400;

  margin-bottom: 16px;

}



.footer-col a {

  display: block;

  font-size: 14px;

  color: rgba(255,255,255,0.55);

  margin-bottom: 10px;

  cursor: pointer;

  transition: color 0.2s;

}

.footer-col a:hover { color: var(--color-primary); }



.footer-col p {

  font-size: 14px;

  color: rgba(255,255,255,0.55);

  margin-bottom: 8px;

}



.footer-logo {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 12px;

}

.footer-logo .logo-img {

  height: 40px;

  width: auto;

  display: block;

}



.footer-bottom {

  border-top: 1px solid rgba(255,255,255,0.08);

  padding: 20px 0;

  text-align: center;

}

.footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.35); }



/* ===== 文章页：全新阅读体验 ===== */



/* --- 阅读进度条 --- */

.ar-progress-bar {

  position: fixed;

  top: 0;

  left: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--color-primary), #6366f1);

  z-index: 400;

  transition: width 0.15s linear;

  border-radius: 0 2px 2px 0;

}



/* --- 文章全页容器 --- */

.article-fullpage {

  max-width: 100%;

  margin: 0;

  padding: 0;

}



/* --- 英雄区头部 --- */

.ar-hero {

  background: linear-gradient(160deg, var(--color-dark) 0%, #1e3054 50%, #1a2744 100%);

  color: #fff;

  padding: 60px 40px 48px;

  position: relative;

  overflow: hidden;

}

.ar-hero::before {

  content: '';

  position: absolute;

  top: -50%;

  right: -20%;

  width: 500px;

  height: 500px;

  background: radial-gradient(circle, rgba(59,130,246,0.12), transparent 65%);

  border-radius: 50%;

}

.ar-hero-inner {

  max-width: 860px;

  margin: 0 auto;

  position: relative;

  z-index: 1;

}



/* 返回按钮 */

.ar-hero-back {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: rgba(255,255,255,0.6);

  font-size: 14px;

  padding: 6px 0 24px;

  cursor: pointer;

  transition: color 0.2s;

  border: none;

  background: none;

}

.ar-hero-back:hover { color: rgba(255,255,255,0.9); }

.ar-hero-back svg { width: 20px; height: 20px; }



/* 英雄区标签行 */

.ar-hero-tags {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 20px;

  flex-wrap: wrap;

}

/* 英雄区价值标签 - 统一深蓝底白字，覆盖 tag-save 等的浅色背景 */

.ar-hero-tags .ar-category-tag {

  font-size: 13px;

  padding: 6px 16px;

  border-radius: 20px;

  font-weight: 700;

  color: #fff !important;

  background: rgba(30,64,116,0.85) !important;

  border: 1px solid rgba(255,255,255,0.25) !important;

  backdrop-filter: blur(4px);

}



/* 行业标签 - 深色背景下的描边 */

.ar-hero-tags .ar-industry-tag {

  font-size: 13px;

  padding: 5px 16px;

  border-radius: 20px;

  border: 1px solid rgba(255,255,255,0.5);

  color: rgba(255,255,255,0.95);

  font-weight: 500;

  background: rgba(255,255,255,0.08);

}



/* 文章类型徽章 */

.ar-type-badge-hero {

  font-size: 12px;

  padding: 4px 14px;

  border-radius: 20px;

  background: rgba(99,102,241,0.25);

  color: #c7d2fe;

  border: 1px solid rgba(99,102,241,0.5);

  font-weight: 400;

  display: inline-flex;

  align-items: center;

  gap: 4px;

}



/* 英雄区日期 */

.ar-hero-date {

  font-size: 13px;

  color: rgba(255,255,255,0.5);

  display: inline-flex;

  align-items: center;

  gap: 5px;

}



/* 英雄区标题 */

.ar-hero-title {

  font-family: "Microsoft YaHei", "微软雅黑", var(--font-family);

  font-size: 34px;

  font-weight: 900;

  line-height: 1.3;

  color: #fff;

  margin-bottom: 28px;

  letter-spacing: 0.02em;

}



/* 策略信息卡 */

.ar-strategy-card {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

}

.ar-sb-item {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 13px;

  padding: 8px 16px;

  background: rgba(255,255,255,0.08);

  border: 1px solid rgba(255,255,255,0.12);

  border-radius: 10px;

  color: rgba(255,255,255,0.9);

  font-weight: 500;

  backdrop-filter: blur(4px);

}

.ar-sb-item svg { width: 14px; height: 14px; opacity: 0.7; }

.ar-difficulty-dots { display: inline-flex; gap: 3px; margin-left: 2px; }

.ar-difficulty-dot { width: 7px; height: 7px; border-radius: 50%; }

.ar-difficulty-dot.active { background: #fbbf24; box-shadow: 0 0 4px rgba(251,191,36,0.5); }

.ar-difficulty-dot.inactive { background: rgba(255,255,255,0.2); }



/* --- 正文区 --- */

.ar-body-wrapper {

  max-width: 860px;

  margin: 0 auto;

  padding: 48px 40px 60px;

}



/* 文章详情页 - 全部元数据标签 */

.ar-all-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 20px;

  padding-bottom: 16px;

  border-bottom: 1px solid var(--color-border);

}

.ar-all-tag {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  padding: 4px 12px;

  border-radius: 20px;

  font-size: 12px;

  font-weight: 500;

  white-space: nowrap;

}

.ar-tag-industry { background: #eff6ff; color: #3b82f6; }

.ar-tag-value { background: #f0fdf4; color: #10b981; }

.ar-tag-scale { background: #fef3c7; color: #d97706; }

.ar-tag-scenario { background: #f3e8ff; color: #7c3aed; }

.ar-tag-tech { background: #f1f5f9; color: #475569; font-size: 11px; }

.ar-tag-source { background: #fff1f2; color: #e11d48; font-size: 11px; }

.ar-tag-date { background: #f8fafc; color: #94a3b8; font-size: 11px; }



/* 案例出处（正文中部） */

.ar-source-inline {

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 8px;

  padding: 10px 14px;

  margin-bottom: 20px;

  font-size: 13px;

  color: var(--color-text-secondary);

  text-align: center;

}

.ar-source-inline .ar-source-link {

  color: var(--color-primary);

  text-decoration: none;

  font-weight: 500;

}

.ar-source-inline .ar-source-link:hover {

  text-decoration: underline;

}



/* 摘要高亮盒 */

.ar-summary-box {

  background: #f5f5f5;

  border-left: 4px solid #9e9e9e;

  border-radius: 0 var(--radius-md) var(--radius-md) 0;

  padding: 20px 24px;

  margin-bottom: 40px;

}

.ar-summary-box h3 {

  font-size: 13px;

  font-weight: 700;

  color: #757575;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  margin: 0 0 8px 0;

}

.ar-summary-box p {

  margin: 0;

  font-size: 15px;

  color: var(--color-dark-secondary);

  line-height: 1.7;

}



/* 正文排版 */

.ar-body {

  font-size: 17px;

  color: var(--color-text);

  line-height: 1.85;

  letter-spacing: 0.01em;

}



.ar-body h2 {

  font-family: "Microsoft YaHei", "微软雅黑", var(--font-family);

  font-size: 26px;

  font-weight: 700;

  color: var(--color-dark);

  margin: 40px 0 16px;

  padding: 0;

  border: none;

  line-height: 1.35;

  position: relative;

}

.ar-body h2::after {

  content: '';

  display: block;

  width: 48px;

  height: 3px;

  background: var(--color-primary);

  margin-top: 10px;

  border-radius: 2px;

}



.ar-body h3 {

  font-size: 20px;

  font-weight: 700;

  color: var(--color-dark);

  margin: 32px 0 12px;

  padding: 0 0 0 16px;

  line-height: 1.4;

  position: relative;

}

.ar-body h3::before {

  content: '';

  position: absolute;

  left: 0;

  top: 4px;

  width: 4px;

  height: calc(1em + 4px);

  background: var(--color-primary, #3b82f6);

  border-radius: 2px;

}



.ar-body h4 {

  font-size: 17px;

  font-weight: 700;

  color: var(--color-dark);

  margin: 24px 0 8px;

  padding: 0;

  line-height: 1.4;

}



/* 段落 */

.ar-body .ar-p {

  margin: 0 0 18px 0;

  padding: 0;

  line-height: 1.85;

  font-size: 17px;

  color: var(--color-text);

}



/* 列表 */

.ar-body .ar-li {

  margin: 0;

  padding: 0 0 10px 28px;

  line-height: 1.85;

  text-indent: -18px;

  font-size: 17px;

  color: var(--color-text);

}



/* 加粗 */

.ar-body strong {

  color: var(--color-dark);

  font-weight: 700;

}



/* 引用块 - 视觉重点 */

.ar-body blockquote {

  margin: 24px 0;

  padding: 20px 24px;

  background: linear-gradient(135deg, #f8faff, #f0f4ff);

  border-left: 4px solid #6366f1;

  border-radius: 0 var(--radius-md) var(--radius-md) 0;

  color: var(--color-dark-secondary);

  font-size: 17px;

  line-height: 1.85;

  font-style: normal;

}

.ar-body blockquote strong {

  color: var(--color-primary-dark);

}



/* 数据高亮盒 - 用于效果数据 */

.ar-data-highlight {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

  gap: 14px;

  margin: 28px 0;

}

.ar-data-item {

  background: linear-gradient(135deg, var(--color-primary-light), #eef2ff);

  border: 1px solid rgba(59,130,246,0.15);

  border-radius: var(--radius-md);

  padding: 18px 20px;

  text-align: center;

}

.ar-data-item .ar-data-value {

  font-family: "Microsoft YaHei", "微软雅黑", var(--font-family);

  font-size: 28px;

  font-weight: 900;

  color: var(--color-primary-dark);

  line-height: 1.2;

  margin-bottom: 4px;

}

.ar-data-item .ar-data-label {

  font-size: 13px;

  color: var(--color-text-secondary);

  line-height: 1.4;

}



/* 表格 */

.ar-body table {

  width: 100%;

  border-collapse: separate;

  border-spacing: 0;

  margin: 24px 0;

  font-size: 15px;

  border-radius: var(--radius-md);

  overflow: hidden;

  box-shadow: 0 2px 8px rgba(0,0,0,0.06);

  border: 1px solid var(--color-border);

}

.ar-body table th {

  background: linear-gradient(135deg, var(--color-dark), var(--color-dark-secondary));

  color: #fff;

  padding: 14px 16px;

  text-align: left;

  font-weight: 400;

  font-size: 14px;

  letter-spacing: 0.02em;

}

.ar-body table th:first-child { border-radius: 0; }

.ar-body table td {

  padding: 14px 16px;

  border-bottom: 1px solid var(--color-border);

  line-height: 1.7;

  color: var(--color-text);

}

.ar-body table tr:last-child td { border-bottom: none; }

.ar-body table tr:nth-child(even) td { background: #fafbfc; }

.ar-body table tr:hover td { background: #eef2ff; }



/* 图片 */

.ar-body img {

  max-width: 100%;

  border-radius: var(--radius-md);

  margin: 20px 0;

}



/* 分隔线 */

.ar-body hr {

  border: none;

  border-top: 1px solid var(--color-border);

  margin: 32px 0;

}



/* 行内代码 */

.ar-body code {

  background: #f1f5f9;

  padding: 2px 8px;

  border-radius: 4px;

  font-size: 14px;

  color: var(--color-primary-dark);

}



/* 代码块 */

.ar-body pre {

  background: var(--color-dark);

  color: #e2e8f0;

  padding: 20px 24px;

  border-radius: var(--radius-md);

  overflow-x: auto;

  font-size: 14px;

  line-height: 1.8;

  margin: 24px 0;

}

.ar-body pre code {

  background: none;

  padding: 0;

  font-size: 14px;

  line-height: 1.8;

  color: inherit;

}



/* 信息来源 */

.ar-sources {

  margin-top: 40px;

  padding: 20px 24px;

  background: var(--color-bg);

  border-radius: var(--radius-md);

  border: 1px solid var(--color-border);

}

.ar-sources h4 {

  font-size: 13px;

  font-weight: 700;

  color: var(--color-text-light);

  text-transform: uppercase;

  letter-spacing: 0.05em;

  margin: 0 0 10px 0;

}

.ar-sources ul {

  list-style: none;

  padding: 0;

  margin: 0;

}

.ar-sources li {

  font-size: 13px;

  color: var(--color-text-secondary);

  padding: 4px 0;

  line-height: 1.6;

}



/* 底部CTA */

.ar-footer {

  margin-top: 40px;

  padding: 32px 28px;

  background: linear-gradient(135deg, var(--color-dark), #1e3054);

  border-radius: var(--radius-lg);

  text-align: center;

  color: #e2e8f0;

  position: relative;

  overflow: hidden;

}

.ar-footer::before {

  content: '';

  position: absolute;

  inset: 0;

  background: radial-gradient(circle at 30% 50%, rgba(59,130,246,0.12), transparent 60%);

}

.ar-footer > * { position: relative; z-index: 1; }

.ar-footer h3 {

  font-family: "Microsoft YaHei", "微软雅黑", var(--font-family);

  font-size: 22px;

  font-weight: 700;

  color: #fff;

  margin: 0 0 8px 0;

  padding: 0;

  border: none;

}

.ar-footer h3::before {

  display: none !important;

  content: none;

}

.ar-footer p {

  margin: 0;

  font-size: 14px;

  opacity: 0.75;

}

.ar-footer strong { color: #fff; }

.ar-footer .ar-cta-btn {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 18px;

  padding: 12px 28px;

  background: var(--color-primary);

  color: #fff;

  border-radius: 24px;

  font-size: 15px;

  font-weight: 400;

  cursor: pointer;

  transition: all 0.2s;

  text-decoration: none;

}

.ar-footer .ar-cta-btn:hover {

  background: var(--color-primary-dark);

  transform: translateY(-1px);

  box-shadow: 0 6px 20px rgba(59,130,246,0.4);

}

.ar-footer .ar-cta-btn svg { width: 18px; height: 18px; }



/* 相关文章 */

.ar-related {

  max-width: 860px;

  margin: 0 auto;

  padding: 0 40px 60px;

}

.ar-related h3 {

  font-family: "Microsoft YaHei", "微软雅黑", var(--font-family);

  font-size: 22px;

  font-weight: 700;

  color: var(--color-dark);

  margin-bottom: 20px;

}

.ar-related-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 14px;

}

.ar-related-item {

  padding: 20px 24px;

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  cursor: pointer;

  transition: all 0.2s;

}

.ar-related-item:hover {

  border-color: var(--color-primary-light);

  background: #f8faff;

  box-shadow: var(--shadow-sm);

}

.ar-related-item h4 {

  font-size: 15px;

  font-weight: 700;

  color: var(--color-dark);

  margin-bottom: 8px;

  line-height: 1.4;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.ar-related-item .ar-rel-meta {

  font-size: 12px;

  color: var(--color-text-light);

  display: flex;

  gap: 10px;

  align-items: center;

  flex-wrap: wrap;

}



/* --- 弹窗阅读器（文章列表页点击弹出） --- */

.article-reader-overlay {

  position: fixed; inset: 0;

  background: rgba(0,0,0,0.65);

  z-index: 300;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  overflow-y: auto;

  padding: 0;

  animation: fadeIn 0.25s ease;

}



.article-reader {

  width: 100%;

  max-width: 880px;

  min-height: 100vh;

  margin: 0 auto;

  background: var(--color-surface);

  position: relative;

}



/* 弹窗顶部栏 */

.ar-topbar {

  position: sticky;

  top: 0;

  z-index: 10;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 14px 40px;

  background: rgba(255,255,255,0.97);

  border-bottom: 1px solid var(--color-border);

  backdrop-filter: blur(10px);

}

.ar-back {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 14px;

  color: var(--color-text-light);

  cursor: pointer;

  border: none;

  background: none;

  padding: 6px 0;

  transition: color 0.2s;

}

.ar-back:hover { color: var(--color-primary); }

.ar-back svg { width: 18px; height: 18px; }



.ar-top-meta {

  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

}



.article-reader .ar-content {

  padding: 40px 48px 60px;

}



.article-reader .ar-title {

  font-family: "Microsoft YaHei", "微软雅黑", var(--font-family);

  font-size: 28px;

  font-weight: 900;

  color: var(--color-dark);

  line-height: 1.35;

  margin-bottom: 28px;

  padding-bottom: 0;

  border-bottom: none;

}



/* 弹窗版策略卡 */

.ar-strategy-bar {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 28px;

  padding: 16px 20px;

  background: var(--color-bg);

  border-radius: var(--radius-md);

  border: 1px solid var(--color-border);

}



/* --- 通用标签样式（保留） --- */

.ar-meta-row {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 20px;

  flex-wrap: wrap;

}

.ar-category-tag {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  font-size: 12px;

  padding: 5px 14px;

  border-radius: 14px;

  font-weight: 400;

  letter-spacing: 0.01em;

  line-height: 1.4;

}

.ar-category-tag.tag-save       { background: #dcfce7; color: #166534; }

.ar-category-tag.tag-earn       { background: #fef3c7; color: #92400e; }

.ar-category-tag.tag-speed      { background: #fce7f3; color: #9d174d; }

.ar-category-tag.tag-safe       { background: #dbeafe; color: #1e40af; }

.ar-category-tag.tag-experience { background: #ede9fe; color: #6d28d9; }

.ar-category-tag.tag-decision   { background: #ccfbf1; color: #0f766e; }

.ar-industry-tag {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  font-size: 12px;

  padding: 4px 14px;

  border-radius: 14px;

  border: 1px solid var(--color-primary);

  color: var(--color-primary);

  background: transparent;

  font-weight: 500;

  line-height: 1.4;

}

.ar-date {

  font-size: 13px;

  color: var(--color-text-light);

  display: inline-flex;

  align-items: center;

  gap: 4px;

  font-weight: 400;

}

.ar-meta-sep { display: none; }

.ar-scale-tag {

  display: inline-flex;

  align-items: center;

  gap: 3px;

  font-size: 12px;

  padding: 4px 12px;

  border-radius: 12px;

  background: var(--color-bg);

  color: var(--color-text-secondary);

  border: 1px solid var(--color-border);

}

.ar-type-badge {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  font-size: 12px;

  padding: 4px 12px;

  border-radius: 12px;

  background: #eef2ff;

  color: #4f46e5;

  border: 1px solid rgba(79,70,229,0.2);

  font-weight: 500;

}



/* --- 移动端 --- */

@media (max-width: 1024px) {

  .home-articles-row {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media (max-width: 768px) {

  .home-articles-row {

    grid-template-columns: 1fr;

  }

  .ar-hero {

    padding: 40px 20px 36px;

  }

  .ar-hero-title {

    font-size: 24px;

  }

  .ar-hero-back { padding-bottom: 16px; }



  .ar-body-wrapper {

    padding: 32px 20px 40px;

  }

  .ar-body {

    font-size: 16px;

  }

  .ar-body h2 {

    font-size: 22px;

    margin: 32px 0 12px;

  }

  .ar-body h3 { font-size: 18px; }



  .ar-data-highlight {

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;

  }

  .ar-data-item .ar-data-value { font-size: 22px; }



  .ar-related {

    padding: 0 20px 40px;

  }

  .ar-related-grid {

    grid-template-columns: 1fr;

  }



  .article-reader { max-width: 100%; }

  .article-reader .ar-topbar { padding: 12px 20px; }

  .article-reader .ar-content { padding: 24px 20px 40px; }

  .article-reader .ar-title { font-size: 22px; }



  .ar-strategy-bar {

    padding: 12px 16px;

  }

}



/* 案例弹窗保持原样 */

.case-detail-modal { max-width: 560px; }



/* ===== Modal ===== */

.modal-overlay {

  position: fixed;

  top: 0; left: 0; right: 0; bottom: 0;

  background: rgba(0,0,0,0.5);

  z-index: 200;

  display: flex;

  align-items: center;

  justify-content: center;

  animation: fadeIn 0.2s ease;

}



.modal-content {

  background: var(--color-surface);

  border-radius: var(--radius-xl);

  width: 100%;

  max-height: 80vh;

  overflow-y: auto;

  padding: 16px 32px;

  box-shadow: var(--shadow-lg);

}



.modal-close {

  width: 32px; height: 32px;

  border-radius: 50%;

  background: var(--color-bg);

  display: flex; align-items: center; justify-content: center;

  margin-left: auto;

  font-size: 18px;

  color: var(--color-text-secondary);

  cursor: pointer;

  transition: all 0.2s;

}

.modal-close:hover { background: #fee2e2; color: #ef4444; }



/* ===== Toast ===== */

.toast {

  position: fixed;

  top: 90px;

  left: 50%;

  transform: translateX(-50%);

  background: var(--color-dark);

  color: #fff;

  padding: 12px 28px;

  border-radius: 24px;

  font-size: 14px;

  z-index: 999;

  box-shadow: var(--shadow-md);

  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.2s forwards;

}



@keyframes toastIn  { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

@keyframes toastOut { from { opacity: 1; } to { opacity: 0; } }



/* ===== Detail Page Intro ===== */

.detail-intro {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px;

  align-items: center;

}



.detail-intro-text h2 {

  font-size: 24px;

  font-weight: 700;

  color: var(--color-dark);

  margin-bottom: 16px;

}



.detail-intro-text p {

  font-size: 16px;

  color: var(--color-text-secondary);

  line-height: 1.8;

  margin-bottom: 12px;

}



.detail-intro-stats {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

}



.detail-stat {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  padding: 20px 16px;

  text-align: center;

  border-top: 4px solid var(--color-primary);

}



.detail-stat-num {

  font-size: 28px;

  font-weight: 800;

  color: var(--color-primary);

  line-height: 1;

  margin-bottom: 4px;

}



.detail-stat-label {

  font-size: 13px;

  color: var(--color-text-secondary);

}



/* ===== Case Detail Page ===== */

.case-detail-hero {

  background: var(--color-surface);

  border-radius: var(--radius-lg);

  padding: 32px 40px;

  border: 1px solid var(--color-border);

  box-shadow: var(--shadow-sm);

}



.case-detail-meta {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

}



.cd-meta-item { text-align: center; }

.cd-meta-label {

  font-size: 12px;

  color: var(--color-text-light);

  text-transform: uppercase;

  letter-spacing: 0.5px;

  margin-bottom: 6px;

}

.cd-meta-value {

  font-size: 14px;

  font-weight: 400;

  color: var(--color-dark);

}



.case-detail-text {

  max-width: 800px;

}

.case-detail-text p {

  font-size: 16px;

  color: var(--color-text-secondary);

  line-height: 1.8;

  margin-bottom: 14px;

  max-width: none;

}



/* Pain Points Grid */

.case-pain-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;

  margin-top: 16px;

}



.case-pain-item {

  background: var(--color-surface);

  border-radius: var(--radius-md);

  padding: 24px;

  border: 1px solid var(--color-border);

  border-left: 4px solid #ef4444;

  transition: all 0.2s;

}

.case-pain-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }



.cpi-icon {

  width: 40px; height: 40px;

  border-radius: var(--radius-sm);

  background: #fef2f2;

  display: flex; align-items: center; justify-content: center;

  font-size: 18px;

  margin-bottom: 12px;

}

.case-pain-item h4 { font-size: 15px; font-weight: 700; color: var(--color-dark); margin-bottom: 8px; }

.case-pain-item p { font-size: 13px; color: var(--color-text-secondary); line-height: 1.7; margin: 0; }



/* Phase */

.case-phase {

  display: flex;

  gap: 24px;

  padding: 28px 0;

  border-bottom: 1px solid var(--color-border);

}

.case-phase:last-child { border-bottom: none; }



.case-phase-num {

  flex-shrink: 0;

  width: 80px;

  height: 36px;

  display: flex; align-items: center; justify-content: center;

  background: var(--color-primary);

  color: #fff;

  border-radius: var(--radius-sm);

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 1px;

}

.case-phase-body { flex: 1; }

.case-phase-body h3 { font-size: 18px; font-weight: 700; color: var(--color-dark); margin-bottom: 8px; }

.case-phase-body p { font-size: 14px; color: var(--color-text-secondary); line-height: 1.8; margin: 0; max-width: none; }



/* Deliverables */

.case-deliverables {

  display: flex;

  flex-direction: column;

  gap: 16px;

  margin-top: 20px;

}



.cd-item {

  display: flex;

  gap: 16px;

  align-items: flex-start;

  background: var(--color-bg);

  border-radius: var(--radius-md);

  padding: 20px 24px;

  border: 1px solid var(--color-border);

  transition: all 0.2s;

}

.cd-item:hover { border-color: var(--color-primary-light); background: var(--color-surface); }



.cd-item-icon {

  width: 44px; height: 44px;

  border-radius: var(--radius-sm);

  background: var(--color-surface);

  display: flex; align-items: center; justify-content: center;

  flex-shrink: 0;

  border: 1px solid var(--color-border);

}

.cd-item strong { display: block; font-size: 15px; font-weight: 700; color: var(--color-dark); margin-bottom: 4px; }

.cd-item p { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; margin: 0; }



/* Results Grid */

.case-results-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

  margin-top: 16px;

}



.case-result-card {

  background: linear-gradient(135deg, var(--color-primary), #2563eb);

  border-radius: var(--radius-lg);

  padding: 32px 20px;

  text-align: center;

  color: #fff;

  box-shadow: 0 4px 20px rgba(59,130,246,0.3);

  transition: all 0.2s;

}

.case-result-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(59,130,246,0.4); }



.crc-num {

  font-size: 36px;

  font-weight: 800;

  line-height: 1;

  margin-bottom: 8px;

}

.crc-label {

  font-size: 13px;

  opacity: 0.85;

  line-height: 1.5;

}



/* ===== Utilities ===== */

.text-center { text-align: center; }

.mt-24 { margin-top: 24px; }

.mb-24 { margin-bottom: 24px; }



/* ===== SSR 行业页实战案例 ===== */

.ssr-articles-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 16px;

  margin: 20px 0;

}

.ssr-article-card {

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 10px;

  padding: 16px;

  transition: box-shadow 0.2s, transform 0.2s;

}

.ssr-article-card:hover {

  box-shadow: 0 4px 16px rgba(0,0,0,0.08);

  transform: translateY(-2px);

}

.ssr-article-card h3 {

  font-size: 15px;

  font-weight: 400;

  margin: 0 0 8px;

  line-height: 1.4;

}

.ssr-article-card h3 a {

  color: #1e293b;

  text-decoration: none;

}

.ssr-article-card h3 a:hover { color: #3b82f6; }

.ssr-article-card p {

  font-size: 13px;

  color: #64748b;

  margin: 0 0 10px;

  line-height: 1.5;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.ssr-article-meta {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}

.ssr-tag {

  background: #dbeafe;

  color: #2563eb;

  font-size: 12px;

  padding: 2px 8px;

  border-radius: 20px;

}

.ssr-date {

  font-size: 12px;

  color: #94a3b8;

}



/* ===== 白皮书页 ===== */

.wp-hero{text-align:center;padding:60px 20px 40px;background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 100%);border-radius:16px;margin-bottom:40px}

.wp-hero h1{color:#fff;font-size:32px;margin-bottom:12px;letter-spacing:2px}

.wp-hero .wp-subtitle{color:#94a3b8;font-size:16px;margin-bottom:8px}

.wp-hero .wp-badge{display:inline-block;background:#3b82f6;color:#fff;padding:4px 14px;border-radius:20px;font-size:13px;margin-bottom:20px}

.wp-cover-mock{width:200px;height:280px;background:linear-gradient(145deg,#1e40af,#3b82f6);border-radius:12px;margin:24px auto;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 32px rgba(59,130,246,0.3)}

.wp-cover-mock .cover-icon{font-size:48px;margin-bottom:8px}

.wp-cover-mock .cover-title{font-size:14px;font-weight:bold;padding:0 20px;text-align:center;line-height:1.4}

.wp-cover-mock .cover-sub{font-size:11px;opacity:0.7;margin-top:8px}

.wp-cta-btn{display:inline-block;background:#f59e0b;color:#0f172a;padding:14px 48px;border-radius:8px;font-size:18px;font-weight:bold;border:none;cursor:pointer;transition:all 0.3s;margin-top:16px}

.wp-cta-btn:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(245,158,11,0.4)}

.wp-section{margin:40px 0}

.wp-section h2{font-size:22px;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #e2e8f0}

.wp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}

.wp-card{background:#fff;border-radius:12px;padding:24px;border:1px solid #e2e8f0;transition:all 0.3s}

.wp-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08);transform:translateY(-2px)}

.wp-card .wp-card-icon{font-size:32px;margin-bottom:12px}

.wp-card h3{font-size:16px;margin-bottom:8px;color:#0f172a}

.wp-card p{font-size:14px;color:#64748b;line-height:1.6}

.wp-ind-card-h {

  display:flex;align-items:center;gap:16px;

  border-radius:12px;padding:18px;

  cursor:pointer;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);

  border:1.5px solid #e2e8f0;position:relative;overflow:hidden;

  background:#fff;

}

.wp-ind-card-h:hover {

  border-color:#3b82f6;

  box-shadow:0 4px 16px rgba(59,130,246,0.08);

  transform:translateY(-2px);

}

.wp-ind-card-h:active { transform:translateY(0); }

.wp-ind-icon-h {

  width:48px;height:48px;border-radius:12px;

  display:flex;align-items:center;justify-content:center;

  font-size:22px;flex-shrink:0;

  background:#f1f5f9;border:1px solid #e2e8f0;

}

.wp-ind-body-h {

  display:flex;flex-direction:column;gap:4px;

  min-width:0;

}

.wp-ind-name-h {

  font-size:14px;font-weight:700;color:#0f172a;

  letter-spacing:-0.2px;

}

.wp-ind-desc-h {

  font-size:12px;color:#64748b;line-height:1.4;

  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;

}

.wp-ind-count-h {

  font-size:11px;color:#94a3b8;font-weight:500;

}

.wp-ind-name { font-size:13px; font-weight:600; color:var(--color-text); margin-bottom:4px; }

.wp-ind-count { font-size:11px; color:var(--color-text-light); }

.wp-stat-row{display:flex;flex-wrap:wrap;gap:16px;margin:20px 0}

.wp-stat-item{flex:1;min-width:120px;text-align:center;padding:20px;background:#f8fafc;border-radius:12px}

.wp-stat-num{font-size:28px;font-weight:bold;color:#3b82f6}

.wp-stat-label{font-size:13px;color:#64748b;margin-top:4px}

.wp-form{max-width:500px;margin:0 auto;padding:32px;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0}

.wp-form h3{text-align:center;margin-bottom:20px}

.wp-form .form-group{margin-bottom:16px}



/* ===== 方案定制 - 视觉重设计 (UiDesigner) ===== */



/* --- 步骤指示器 --- */

#cz-steps-indicator {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0;

  margin-bottom: 40px;

  position: relative;

  padding: 0 8px;

}

.cz-step-dot {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: #e2e8f0;

  color: #94a3b8;

  font-size: 15px;

  font-weight: 700;

  justify-content: center;

  position: relative;

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  z-index: 2;

}

.cz-step-dot.active {

  background: linear-gradient(135deg, #3b82f6, #2563eb);

  color: #fff;

  box-shadow: 0 4px 12px rgba(59,130,246,0.35);

  transform: scale(1.08);

}

.cz-dot-label {

  font-size: 11px;

  color: #94a3b8;

  font-weight: 500;

  position: absolute;

  top: 50px;

  white-space: nowrap;

  transition: color 0.3s;

}

.cz-step-dot.active .cz-dot-label { color: #3b82f6; font-weight: 400; }

.cz-step-line {

  width: 48px;

  height: 3px;

  background: #e2e8f0;

  align-self: center;

  position: relative;

  z-index: 1;

  border-radius: 2px;

  transition: background 0.4s;

}

.cz-step-line.active { background: #3b82f6; }



/* --- 步骤容器 --- */

.cz-step {

  background: #fff;

  border: 1px solid #e2e8f0;

  border-radius: 16px;

  padding: 36px 32px 32px;

  box-shadow: 0 1px 3px rgba(0,0,0,0.04);

  animation: czFadeIn 0.35s ease;

  margin-top: 4px;

}

@keyframes czFadeIn {

  from { opacity: 0; transform: translateY(12px); }

  to { opacity: 1; transform: translateY(0); }

}

.cz-step-header {

  text-align: center;

  margin-bottom: 28px;

  padding-bottom: 20px;

  border-bottom: 1px solid #f1f5f9;

}

.cz-step-title {

  display: block;

  font-size: 20px;

  font-weight: 700;

  color: #0f172a;

  letter-spacing: -0.3px;

}

.cz-step-sub {

  display: block;

  font-size: 14px;

  color: #64748b;

  margin-top: 4px;

}



/* --- 字段标签 --- */

.cz-field-label {

  display: block;

  font-size: 14px;

  font-weight: 400;

  color: #1e293b;

  margin-bottom: 8px;

}

.cz-field-label .required {

  color: #ef4444;

  margin-left: 2px;

}



/* --- 输入框 --- */

.cz-input {

  width: 100%;

  padding: 11px 14px;

  border: 1.5px solid #e2e8f0;

  border-radius: 10px;

  font-size: 14px;

  color: #1e293b;

  background: #fff;

  box-sizing: border-box;

  transition: all 0.2s;

  font-family: inherit;

}

.cz-input:hover { border-color: #cbd5e1; }

.cz-input:focus {

  outline: none;

  border-color: #3b82f6;

  box-shadow: 0 0 0 3px rgba(59,130,246,0.12);

}

.cz-input::placeholder { color: #94a3b8; }

textarea.cz-input { resize: vertical; line-height: 1.6; min-height: 100px; }



/* --- 选项网格 --- */

.cz-options-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

  gap: 10px;

}



/* --- 选项卡片 --- */

.cz-opt-card {

  border: 1.5px solid #e2e8f0;

  border-radius: 12px;

  padding: 18px 12px 14px;

  text-align: center;

  cursor: pointer;

  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  background: #fff;

  position: relative;

  overflow: hidden;

}

.cz-opt-card::before {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, #eff6ff, #fff);

  opacity: 0;

  transition: opacity 0.25s;

}

.cz-opt-card:hover {

  border-color: #93c5fd;

  transform: translateY(-2px);

  box-shadow: 0 6px 16px rgba(59,130,246,0.08);

}

.cz-opt-card:hover::before { opacity: 1; }

.cz-opt-card.selected {

  border-color: #3b82f6;

  background: #f0f7ff;

  box-shadow: 0 0 0 1.5px rgba(59,130,246,0.25), 0 4px 12px rgba(59,130,246,0.08);

  transform: translateY(-2px);

}

.cz-opt-card > * { position: relative; z-index: 1; }

.cz-opt-icon { font-size: 26px; margin-bottom: 6px; display: block; }

.cz-opt-label { font-size: 13px; font-weight: 400; color: #1e293b; }

.cz-opt-desc { font-size: 11px; color: #94a3b8; margin-top: 4px; line-height: 1.4; }



/* --- 行内选项（规模/预算/时间） --- */

.cz-options-inline {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

  gap: 10px;

}

.cz-opt-inline {

  padding: 14px 12px;

  border: 1.5px solid #e2e8f0;

  border-radius: 10px;

  text-align: center;

  cursor: pointer;

  font-size: 13px;

  font-weight: 400;

  color: #1e293b;

  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  background: #fff;

}

.cz-opt-inline:hover {

  border-color: #93c5fd;

  transform: translateY(-1px);

  box-shadow: 0 4px 12px rgba(59,130,246,0.06);

}

.cz-opt-inline.selected {

  border-color: #3b82f6;

  background: #f0f7ff;

  box-shadow: 0 0 0 1.5px rgba(59,130,246,0.25);

  transform: translateY(-1px);

}



/* --- 按钮区 --- */

.cz-btn-row {

  display: flex;

  justify-content: space-between;

  margin-top: 28px;

  padding-top: 20px;

  border-top: 1px solid #f1f5f9;

}



/* --- 结果页 --- */

#cz-plan-body h3 {

  font-size: 16px;

  font-weight: 700;

  color: #0f172a;

  margin-bottom: 12px;

  padding-left: 0;

  letter-spacing: -0.2px;

}

#cz-plan-body h3:not(:first-child) { margin-top: 28px; }

#cz-plan-body p { line-height: 1.8; color: #334155; }



/* --- 匹配卡片 --- */

.cz-match-card {

  border: 1.5px solid #e2e8f0;

  border-radius: 12px;

  padding: 16px 18px;

  cursor: pointer;

  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  margin-bottom: 10px;

  background: #fff;

}

.cz-match-card:hover {

  border-color: #93c5fd;

  box-shadow: 0 4px 14px rgba(59,130,246,0.06);

  transform: translateX(4px);

}

.cz-match-tags { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }

.cz-match-badge {

  display: inline-block;

  font-size: 10px;

  padding: 3px 10px;

  border-radius: 6px;

  background: #eff6ff;

  color: #3b82f6;

  font-weight: 400;

  letter-spacing: 0.3px;

}

.cz-match-title { font-size: 14px; font-weight: 400; color: #0f172a; margin-bottom: 8px; line-height: 1.5; }

.cz-match-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #64748b; }

.wp-form label{display:block;font-size:14px;font-weight:500;margin-bottom:4px;color:#334155}

.wp-form input{width:100%;padding:10px 14px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;box-sizing:border-box}

.wp-form .btn-submit{width:100%;padding:12px;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:bold;cursor:pointer;transition:all 0.3s}

.wp-form .btn-submit:hover{background:#2563eb}

.wp-form .wp-form-note{text-align:center;font-size:12px;color:#94a3b8;margin-top:12px}

.wp-top-tag{display:inline-block;background:#dbeafe;color:#1e40af;padding:4px 12px;border-radius:16px;font-size:13px;margin:3px}











/* --- Tool Detail Pages (AI应用商店) --- */

.tool-hero-content { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.tool-hero-content h1 { font-size: 38px; color: #fff; margin-bottom: 12px; text-align: center; }

.tool-hero-content p { font-size: 16px; color: rgba(255,255,255,0.85); line-height: 1.7; max-width: 700px; margin: 0 auto 24px; text-align: center; }

.tool-hero-tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.tool-hero-tag { display: inline-block; background: rgba(255,255,255,0.15); padding: 4px 14px; border-radius: 15px; font-size: 13px; color: #fff; }

.tool-hero-btn { display: inline-flex; padding: 12px 32px; background: #fff; color: var(--color-primary); border-radius: 8px; font-weight: 600; text-decoration: none; transition: all 0.2s; }

.tool-hero-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }







.tool-section-title { font-size: 20px; color: #1e293b; margin: 0 0 20px; font-weight: 700; }





.tool-feature-card { background: #fff; border-radius: 10px; padding: 20px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.06); transition: box-shadow 0.2s, transform 0.2s; }

.tool-feature-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }

.tool-feature-card h3 { font-size: 16px; color: var(--color-primary, #3b82f6); margin-bottom: 8px; }

.tool-feature-card p { font-size: 13px; color: #64748b; line-height: 1.7; margin: 0; }



.tool-info-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }

.tool-info-item { flex: 1; min-width: 200px; background: #f8fafc; border-radius: 8px; padding: 16px; }

.tool-info-label { font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }

.tool-info-value { font-size: 14px; color: #1e293b; font-weight: 500; }







.tool-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

.tool-feature-icon { font-size: 18px; margin-bottom: 8px; }

.tool-hero-btn--ghost { background: rgba(255,255,255,0.2); color: #fff; }



.tool-card-title { font-weight: 600; color: #1e293b; margin-bottom: 4px; }

.tool-card-desc { font-size: 13px; color: #64748b; }

.tool-page-content { max-width: 1100px; margin: 0 auto; padding: 40px 24px; }

.tool-page-content p { color: #475569; line-height: 1.9; font-size: 15px; margin-bottom: 12px; }

.tool-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

.tool-feature-icon { font-size: 18px; margin-bottom: 8px; }

.tool-hero-btn--ghost { background: rgba(255,255,255,0.2); color: #fff; }

.tool-hero-btn--ghost:hover { background: rgba(255,255,255,0.3); transform: translateY(-2px); }



/* --- Tool Detail Unified Card --- */

.tool-card {

  background: #fff;

  border-radius: 16px;

  padding: 16px 32px;

  margin-bottom: 32px;

  box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}

.tool-card:last-child {

  margin-bottom: 0;

}

.tool-page-wrap {

  max-width: 1100px;

  margin: 0 auto;

  padding: 40px 24px;

}





/* --- Tool Detail Inner Elements --- */

.tool-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.tool-tag { display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; background: #dbeafe; color: #2563eb; }



.tool-industry-list { display: flex; gap: 10px; flex-wrap: wrap; }

.tool-industry-tag { display: inline-block; padding: 6px 18px; border-radius: 20px; font-size: 14px; background: #eff6ff; color: #1d4ed8; }



.tool-client-list { display: flex; gap: 12px; flex-wrap: wrap; }

.tool-client-name { display: inline-block; padding: 8px 18px; border-radius: 8px; font-size: 14px; background: #f1f5f9; color: #475569; font-weight: 500; }



.tool-pricing-card { padding: 24px; background: #f0fdf4; border-radius: 12px; border-left: 4px solid #3b82f6; }

.tool-pricing-title { font-size: 18px; font-weight: 600; color: #1e293b; margin-bottom: 8px; }

.tool-pricing-note { font-size: 14px; color: #64748b; line-height: 1.6; }



.tool-website-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: #f59e0b; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 15px; transition: all 0.2s; }

.tool-website-btn:hover { background: #d97706; transform: translateY(-1px); }



/* exclusive-opinion */

.ar-body .exclusive-opinion, .exclusive-opinion {

  background: #e5e5e5;

  border-radius: 8px;

  padding: 18px 22px;

  margin: 28px 0;

}

.ar-body .exclusive-opinion h3, .exclusive-opinion h3 {

  font-family: "Microsoft YaHei", "微软雅黑", var(--font-family);

  font-size: 26px;

  font-weight: 700;

  color: var(--color-dark);

  margin: 0 0 12px;

  padding: 0 0 10px;

  border: none;

  line-height: 1.35;

  position: relative;

}

.ar-body .exclusive-opinion h3::after, .exclusive-opinion h3::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: 0;

  width: 48px;

  height: 3px;

  background: var(--color-primary);

  border-radius: 2px;

}

.ar-body .exclusive-opinion h3::before, .exclusive-opinion h3::before {

  display: none;

}

.ar-body .exclusive-opinion p, .exclusive-opinion p {

  color: #475569;

  line-height: 1.75;

  margin: 0 0 8px;

}

.ar-body .exclusive-opinion p:last-child, .exclusive-opinion p:last-child {

  margin-bottom: 0;

}

/* =========================================================
   移动端适配 (手机 ≤768px) —— 汉堡菜单 + 首页/通用布局
   注意：首页卡片容器是 inline grid(3列)，必须用 !important 覆盖
   ========================================================= */
.nav-toggle { display: none; }

@media (max-width: 768px) {
  /* ---- 主导航：汉堡菜单 ---- */
  .app-header .header-inner { position: relative; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; margin-left: auto; padding: 0;
    background: transparent; border: none; cursor: pointer; z-index: 120;
  }
  .nav-toggle-bar { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s; }
  .nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .header-nav-row { height: auto; max-height: 0; overflow: hidden; transition: max-height .35s ease; border-bottom: none; }
  .header-nav-row.open { max-height: 78vh; overflow-y: auto; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .header-nav-inner { height: auto; display: block; padding: 0 14px; }
  .header-nav { flex-direction: column; align-items: stretch; width: 100%; padding: 6px 0; gap: 0; }
  .header-nav .nav-link { padding: 15px 10px; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,0.07); border-radius: 0; }
  .header-nav .nav-link:last-child { border-bottom: none; }
  .header-nav .nav-link.active { background: rgba(59,130,246,0.18); }

  /* logo 副标题在手机上隐藏，避免挤压 */
  .header-logo span { display: none; }

  /* ---- 首页 hero ---- */
  .home-hero { padding: 38px 18px 28px; }
  .home-hero h1 { font-size: 26px; }
  .home-hero p { font-size: 14px; }
  .home-hero-actions { flex-direction: column; gap: 12px; }
  .home-hero-actions .btn { width: 100%; }
  .home-hero-stats { gap: 18px 22px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }

  /* ---- 首页卡片区：单列（覆盖 inline 3列） ---- */
  .home-articles-row { grid-template-columns: 1fr !important; gap: 16px; }
  .home-news-row { grid-template-columns: 1fr !important; gap: 16px; }

  /* ---- 通用：让内容区在手机上留出边距 ---- */
  .section-header { padding: 0 4px; }
  .section-title { font-size: 20px; }
  .section-subtitle { font-size: 13px; }
}

/* 中小屏 (≤1024) 卡片变 2 列，仅作用于非 inline 场景；inline 3列靠上面 !important 处理手机端 */
@media (max-width: 1024px) and (min-width: 769px) {
  .home-articles-row { grid-template-columns: repeat(2, 1fr) !important; }
  .home-news-row { grid-template-columns: repeat(2, 1fr) !important; }
}