/* ui-shared.css — 搜罗纪官方网站共享样式 */
:root {
  --primary:         #6C5CE7;
  --primary-dark:    #5A4BD1;
  --primary-darker:  #4536B8;
  --primary-light:   #A29BFE;
  --primary-lighter: #EDE9FF;
  --vi1:             #FF7675;
  --vi1-dark:        #E85D5D;
  --vi1-lighter:     #FFF0EF;
  --vi2:             #00CEC9;
  --vi2-dark:        #00A8A4;
  --vi2-lighter:     #E0FAFA;
  --vi3:             #FDCB6E;
  --vi3-dark:        #E6B453;
  --vi3-lighter:     #FFF8E7;
  --bg:              #F8F9FF;
  --surface:         #FFFFFF;
  --border:          #EAEAEA;
  --border-md:       #D0D3E0;
  --color-hint:      #B2BEC3;
  --color-body:      #636E72;
  --color-title:     #2D3436;
  --success:         #00B894;
  --success-bg:      #E6F9F5;
  --warning:         #FD79A8;
  --warning-bg:      #FFF0F6;
  --error:           #D63031;
  --error-bg:        #FFF0EF;
  --info:            #0984E3;
  --info-bg:         #EBF5FF;
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.06);
  --shadow:     0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(108,92,231,0.12);
  --shadow-lg:  0 8px 32px rgba(108,92,231,0.18);
  --radius:     8px;
  --radius-lg:  12px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--color-body);
}

/* 常用辅助类 */
.bg-ptint  { background: #EDE9FF; }
.bg-stint  { background: #E6F9F5; }
.bg-wtint  { background: #FFF0F6; }

.gradient-text {
  background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-link { transition: color 0.2s, border-color 0.2s; }
.nav-link:hover { color: var(--primary); }

/* 统一按钮 */
.btn-primary {
  background: var(--primary);
  color: white;
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn-secondary {
  background: var(--surface);
  color: var(--primary);
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1.5px solid var(--primary);
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn-secondary:hover { background: var(--primary-lighter); }

/* 卡片悬停效果 */
.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* 分割线 */
.section-divider {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border), transparent);
  margin: 0;
}

/* 徽章 */
.badge {
  background: var(--primary-lighter);
  color: var(--primary-dark);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* 产品页 */
.tab-active { background: var(--primary); color: #fff; }
.tab-inactive { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.gradient-badge { background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%); }
.feature-check::before { content: '✓'; color: var(--primary); font-weight: bold; margin-right: 8px; }
.feature-cross::before { content: '—'; color: var(--color-hint); margin-right: 8px; }
.sticky-nav { position: sticky; top: 64px; z-index: 40; backdrop-filter: blur(8px); background: rgba(248,249,255,0.92); border-bottom: 1px solid var(--border); }
.plan-card { transition: all 0.25s ease; }
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.highlight-card { border: 2px solid var(--primary); position: relative; }
.module-tag { font-size: 12px; padding: 2px 10px; border-radius: 20px; }
.scroll-anchor { scroll-margin-top: 80px; }

/* GEO实验室 */
.category-tab { transition: all 0.2s ease; }
.category-tab.active { background: var(--primary); color: #ffffff; border-color: var(--primary); }
.category-tab:not(.active):hover { border-color: var(--primary); color: var(--primary); }
.article-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.featured-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.featured-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tag-pill { transition: background 0.2s, color 0.2s; }
.tag-pill:hover { background: var(--primary); color: #ffffff; }
.load-more-btn { transition: background 0.2s, transform 0.15s; }
.load-more-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
.search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,92,231,0.12); }
.sidebar-card { transition: box-shadow 0.2s; }
.sidebar-card:hover { box-shadow: var(--shadow-md); }
.hot-item { transition: color 0.2s; }
.hot-item:hover { color: var(--primary); }
.list-article-item { transition: background 0.2s; }
.list-article-item:hover { background: var(--bg); }
.section-fade { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.brand-badge { background: linear-gradient(135deg, #6C5CE7, #A29BFE); }
.hero-gradient { background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 60%, #F8F9FF 100%); }

/* 文章详情页 */
.article-content h2 { font-size: 1.375rem; font-weight: 700; color: #2D3436; margin-top: 2.5rem; margin-bottom: 1rem; padding-left: 0.875rem; border-left: 4px solid #6C5CE7; line-height: 1.5; }
.article-content h3 { font-size: 1.125rem; font-weight: 600; color: #2D3436; margin-top: 1.75rem; margin-bottom: 0.75rem; }
.article-content p { font-size: 1rem; color: #636E72; line-height: 1.875; margin-bottom: 1.25rem; }
.article-content strong { color: #2D3436; font-weight: 600; }
.article-content ul { list-style: none; padding: 0; margin-bottom: 1.25rem; }
.article-content ul li { position: relative; padding-left: 1.5rem; margin-bottom: 0.625rem; color: #636E72; font-size: 1rem; line-height: 1.75; }
.article-content ul li::before { content: ''; position: absolute; left: 0; top: 0.625rem; width: 6px; height: 6px; border-radius: 50%; background-color: #6C5CE7; }
.article-content ol { list-style: none; padding: 0; counter-reset: ol-counter; margin-bottom: 1.25rem; }
.article-content ol li { position: relative; padding-left: 2rem; margin-bottom: 0.75rem; color: #636E72; font-size: 1rem; line-height: 1.75; counter-increment: ol-counter; }
.article-content ol li::before { content: counter(ol-counter); position: absolute; left: 0; top: 0.125rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; background-color: #6C5CE7; color: white; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.article-content blockquote { background: #EDE9FF; border-left: 4px solid #6C5CE7; border-radius: 0 8px 8px 0; padding: 1rem 1.25rem; margin: 1.5rem 0; color: #2D3436; font-size: 1rem; line-height: 1.75; }
.highlight-box { background: var(--primary-lighter); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin: 1.5rem 0; }
#progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #6C5CE7, #A29BFE); z-index: 9999; transition: width 0.1s ease; }
.toc-link.active { color: #6C5CE7; font-weight: 600; }
.tag-item { transition: all 0.2s ease; }
.tag-item:hover { background-color: #6C5CE7; color: white; border-color: #6C5CE7; }
@media (min-width: 1024px) { .toc-sticky { position: sticky; top: 88px; max-height: calc(100vh - 120px); overflow-y: auto; } }

/* 关于我们 */
.timeline-dot::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, #6C5CE7, #A29BFE); }

/* 滚动条 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--color-hint); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }