/* ============================================
   NavXD 主样式文件
   ...
/* ============================================
   NavXD 主样式文件
   配色方案：Apple 极简 + AI SaaS 科技感
   ============================================ */

/* 基础重置 */
:root {
    /* 颜色变量 */
    --color-bg: #FFFFFF;
    --color-card: #FFFFFF;
    --color-text-primary: #111827;
    --color-text-secondary: #6B7280;
    --color-primary: #5B6CFF;
    --color-primary-light: #EEF2FF;
    --color-gradient-1: #5B6CFF;
    --color-gradient-2: #8B5CF6;
    --color-gradient-3: #A78BFA;
    --color-rank-1: #F59E0B;
    --color-rank-2: #9CA3AF;
    --color-rank-3: #F97316;
    --color-trend-up: #22C55E;
    --color-trend-down: #EF4444;
    --color-border: #E5E7EB;
    --color-border-hover: #D1D5DB;
    --color-placeholder: #9CA3AF;
    --color-footer-bg: #111827;
    --color-footer-text: #9CA3AF;
    --color-footer-link: #FFFFFF;
    
    /* 阴影 */
    --shadow-card: 0 8px 30px rgba(0,0,0,0.05);
    
    /* 圆角 */
    --radius-card: 16px;
    --radius-btn: 8px;
    --radius-tag: 6px;
    /* ── 短名变量（来自 home.css，全局化）── */
   --bg: #f8f9fb;
   --bg2: #ffffff;
   --bg3: #f0f2f5;
   --bg4: #e8eaf0;
   --border: rgba(0, 0, 0, 0.07);
   --border2: rgba(0, 0, 0, 0.13);
   --text: #1a1d2e;
   --text2: #5a5e72;
   --text3: #9499b0;
   --blue: #3b7ef6;
   --blue2: #2563d4;
   --blue-dim: rgba(59, 126, 246, 0.08);
   --green: #10b981;
   --green-dim: rgba(16, 185, 129, 0.10);
   --amber: #d97706;
   --amber-dim: rgba(217, 119, 6, 0.10);
   --red: #ef4444;
   --red-dim: rgba(239, 68, 68, 0.10);
   --purple: #7c3aed;
   --purple-dim: rgba(124, 58, 237, 0.08);
   --font: 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
   --mono: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
   --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.05);
   --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.04);
   --shadow-hover: 0 4px 12px rgba(59, 126, 246, 0.10);
 
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================
   Header 导航
   ============================================ */
.navxd-header {
    background-color: var(--color-card);
    box-shadow: var(--shadow-card);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo img {
    height: 42px;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.main-nav a {
    text-decoration: none;
    color: var(--color-text-primary);
    font-weight: 500;
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: var(--color-primary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.language-selector {
    position: relative;
}

.language-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.language-btn:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.language-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    box-shadow: var(--shadow-card);
    min-width: 120px;
    z-index: 1000;
    display: none;
}

.language-selector:hover .language-dropdown,
.language-selector.open .language-dropdown {
    display: block;
}

.language-option {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.language-option:hover {
    background-color: var(--color-primary-light);
}

.language-option.active {
    background-color: var(--color-primary);
    color: var(--color-card);
}

.auth-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

.auth-link {
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: color 0.3s ease;
}

.login-link {
    color: var(--color-text-primary);
}

.login-link:hover {
    color: var(--color-primary);
}

.register-link {
    color: var(--color-primary);
    background-color: var(--color-primary-light);
    padding: 6px 12px;
    border-radius: var(--radius-btn);
}

.register-link:hover {
    background-color: var(--color-primary);
    color: var(--color-card);
}

.header-subscribe {
    background-color: var(--color-primary);
    color: var(--color-card);
    border: none;
    border-radius: var(--radius-btn);
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.header-subscribe:hover {
    background-color: #4a5ce0;
    transform: translateY(-2px);
}

.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-primary);
    font-size: 24px;
    padding: 8px;
    display: none;
}

/* 搜索框样式调整 */
.search-container {
    width: 100%;
    max-width: 900px;
    margin: 40px auto 0;
}

.search-box {
    max-width: 800px;
    margin: 0 auto;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .menu-toggle {
        display: block;
    }
    
    .main-nav {
        /* slide-down animation via max-height */
        max-height: 0;
        overflow: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg2);
        border-top: 1px solid var(--border);
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
        z-index: 999;
        transition: max-height 0.28s ease;
    }
    .main-nav.nav-open {
        max-height: 540px;
    }

    .language-btn {
        font-size: 12px;
        padding: 4px 8px;
    }
    
    .auth-links {
        gap: 12px;
    }
    
    .auth-link {
        font-size: 12px;
    }
    
    .register-link {
        padding: 4px 8px;
    }
}

@media (max-width: 768px) {
    .language-selector {
        display: none;
    }
    
    .auth-links {
        display: none;
    }
}

@media (max-width: 768px) {
    .header-subscribe {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .search-container {
        margin-top: 30px;
    }
    
    .search-box {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 20px;
    }
    
    .search-input {
        font-size: 16px;
        padding: 16px 20px;
    }
    
    .search-btn {
        justify-content: center;
        font-size: 14px;
        padding: 16px 24px;
    }
}

/* ============================================
   Hero Banner
   ============================================ */
.hero-section {
    background: #000000;
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 1;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
}

.hero-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-right {
        order: 1;
    }
}

.hero-title {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-card);
    margin-bottom: 16px;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 20px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 30px;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 40px;
}

.btn {
    padding: 12px 24px;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary {
    background-color: var(--color-card);
    color: var(--color-primary);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-secondary {
    background-color: rgba(255,255,255,0.2);
    color: var(--color-card);
    border: 1px solid rgba(255,255,255,0.3);
}

.btn-secondary:hover {
    background-color: rgba(255,255,255,0.3);
}

.hero-search {
    background-color: var(--color-card);
    padding: 24px;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.hero-section .container {
    position: relative;
}

.subscribe-button {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 20;
}

.search-container {
    width: 100%;
    max-width: 800px;
    margin-top: 30px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 24px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.search-input {
    flex: 1;
    padding: 20px 24px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    font-size: 18px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.search-input::placeholder {
    color: var(--color-placeholder);
}

.search-input:hover {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.search-input:focus {
    border-color: #5B6CFF;
    box-shadow: 0 0 0 4px rgba(91, 108, 255, 0.3);
}

.search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 32px;
    background-color: blue;
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 255, 0.4);
    white-space: nowrap;
}

.search-btn:hover {
    background-color: #0000cc;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 255, 0.5);
}

.subscribe-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

.subscribe-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Logo Loop 效果 */
.logo-loop-container {
    width: 100%;
    margin: 40px 0 0;
    overflow: hidden;
    position: relative;
    height: 80px;
}

.logo-loop {
    display: flex;
    align-items: center;
    gap: 40px;
    animation: logoLoop 20s linear infinite;
    white-space: nowrap;
}

.logo-item {
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.logo-item:hover {
    opacity: 1;
    transform: scale(1.1);
}

@keyframes logoLoop {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .subscribe-button {
        position: static;
        margin-top: 20px;
        text-align: center;
    }
    
    .search-box {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 20px;
    }
    
    .search-input {
        font-size: 16px;
        padding: 16px 20px;
    }
    
    .search-btn {
        justify-content: center;
        font-size: 14px;
        padding: 16px 24px;
    }
    
    .subscribe-btn {
        justify-content: center;
        font-size: 14px;
        padding: 12px 24px;
    }
    
    .logo-loop-container {
        margin-top: 30px;
        height: 60px;
    }
    
    .logo-loop {
        gap: 24px;
        animation-duration: 20s;
    }
    
    .logo-loop.clone {
        animation-duration: 20s;
    }
    
    .logo-item svg {
        width: 32px;
        height: 32px;
    }
}

.hot-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hot-tags .tag {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    padding: 6px 16px;
    border-radius: var(--radius-tag);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hot-tags .tag:hover {
    background-color: var(--color-primary);
    color: var(--color-card);
}

/* ============================================
   通用 Section 样式
   ============================================ */
.section-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 32px;
}

section {
    padding: 60px 0;
}

/* ============================================
   榜单分类
   ============================================ */
.popular-tools-section,
.tool-categories-section,
.tool-ranking-section,
.latest-tools-section,
.tool-trends-section,
.tool-guide-section,
.faq-section {
    background-color: var(--color-bg);
    padding: 60px 0;
}

.tool-categories-section,
.tool-trends-section,
.faq-section {
    background-color: var(--color-card);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.category-card {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
    transition: transform 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
    --mouse-x: 50%;
    --mouse-y: 50%;
    --spotlight-color: rgba(91, 108, 255, 0.5);
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.category-card:hover {
    transform: translateY(-8px);
}

.category-card:hover::before {
    opacity: 0.6;
}

.category-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--color-primary);
    background-color: var(--color-primary-light);
}

.category-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.category-intro {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.category-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
}

.view-ranking-btn {
    padding: 10px 20px;
    background-color: var(--color-primary);
    color: var(--color-card);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.view-ranking-btn:hover {
    background-color: #4a5ce0;
}

/* ============================================
   最新 Top5 榜单
   ============================================ */
.top-ranking-section {
    background-color: var(--color-bg);
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 24px;
}

.main-content-section,
.secondary-content-section {
    background-color: var(--color-bg);
    padding: 60px 0;
}

.secondary-content-section {
    background-color: var(--color-card);
}

.content-left {
    flex: 1;
}

.content-right {
    width: 350px;
}

/* 新闻时间轴样式 */
.news-timeline {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
    position: relative;
}

.news-timeline::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background-color: var(--color-border);
}

.news-item {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
}

.news-item:last-child {
    margin-bottom: 0;
}

.timeline-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-primary);
    border: 4px solid var(--color-card);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.news-content {
    flex: 1;
}

.news-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.news-date {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.news-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* 最新工具区域 */
.latest-tools-section {
    background-color: var(--color-bg);
    padding: 60px 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.view-more-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: color 0.3s ease;
}

.view-more-link:hover {
    color: #4a5ce0;
}

.latest-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.latest-tool-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.latest-tool-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

.tool-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tool-icon svg {
    width: 48px;
    height: 48px;
}

.tool-info {
    flex: 1;
    min-width: 0;
}

.tool-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .latest-tools-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .latest-tools-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
    
    .tool-icon {
        width: 40px;
        height: 40px;
    }
    
    .tool-icon svg {
        width: 40px;
        height: 40px;
    }
    
    .tool-name {
        font-size: 14px;
    }
    
    .tool-desc {
        font-size: 12px;
    }
    
    .latest-tool-item {
        padding: 12px;
        gap: 8px;
    }
}

.top-ranking-content {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 24px;
}

.ranking-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ranking-card {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    --mouse-x: 50%;
    --mouse-y: 50%;
    --spotlight-color: rgba(91, 108, 255, 0.5);
}

.ranking-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.ranking-card:hover::before {
    opacity: 0.6;
}

.ranking-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 20px;
}

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.ranking-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

.rank-number {
    font-weight: 700;
    color: var(--color-text-secondary);
}

.tool-name {
    flex: 1;
    margin-left: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.tool-rating {
    font-weight: 700;
    color: var(--color-primary);
}

.view-full-ranking-btn {
    width: 100%;
    padding: 10px;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-full-ranking-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-card);
}

/* ============================================
   右侧侧栏
   ============================================ */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-section {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.sidebar-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.new-tool-item {
    margin-bottom: 16px;
}

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

.tool-name {
    font-weight: 600;
    color: var(--color-text-primary);
}

.new-badge {
    background-color: var(--color-trend-up);
    color: var(--color-card);
    padding: 2px 8px;
    border-radius: var(--radius-tag);
    font-size: 12px;
    font-weight: 600;
}

.tool-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.view-tool-btn {
    padding: 8px 16px;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-tool-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-card);
}

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

.author-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 16px;
    overflow: hidden;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.author-title {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.author-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* ============================================
   评估框架模块
   ============================================ */
.evaluation-section {
    background-color: var(--color-bg);
}

.evaluation-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.subscribe-module {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
    text-align: center;
    position: relative;
    overflow: hidden;
    --mouse-x: 50%;
    --mouse-y: 50%;
    --spotlight-color: rgba(91, 108, 255, 0.5);
}

.subscribe-module::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.subscribe-module:hover::before {
    opacity: 0.6;
}

.module-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 24px;
}

.price-info {
    margin-bottom: 24px;
}

.price-month,
.price-year {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.subscribe-now-btn {
    padding: 12px 24px;
    background-color: var(--color-primary);
    color: var(--color-card);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.subscribe-now-btn:hover {
    background-color: #4a5ce0;
}

.rating-metrics {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    --mouse-x: 50%;
    --mouse-y: 50%;
    --spotlight-color: rgba(91, 108, 255, 0.5);
}

.rating-metrics::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.rating-metrics:hover::before {
    opacity: 0.6;
}

.metrics-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 24px;
}

.metric-item {
    margin-bottom: 16px;
}

.metric-name {
    font-weight: 500;
    color: var(--color-text-primary);
    display: block;
    margin-bottom: 8px;
}

.learn-method-btn {
    margin-top: 24px;
    padding: 10px 20px;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.learn-method-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-card);
}

/* ============================================
   Footer CTA
   ============================================ */
.footer-cta-section {
    background: linear-gradient(135deg, var(--color-gradient-1) 0%, var(--color-gradient-2) 50%, var(--color-gradient-3) 100%);
    padding: 60px 0;
    color: var(--color-card);
}

.cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cta-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.cta-price {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
}

.cta-btn {
    padding: 12px 24px;
    background-color: var(--color-card);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.cta-btn:hover {
    transform: translateY(-2px);
}

/* ============================================
   榜单详情页
   ============================================ */
.navxd-ranking-detail {
    background-color: var(--color-bg);
}

/* Hero 区 */
.navxd-ranking-detail .hero-section {
    background: linear-gradient(135deg, var(--color-gradient-1) 0%, var(--color-gradient-2) 50%, var(--color-gradient-3) 100%);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.breadcrumb {
    margin-bottom: 24px;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
}

.breadcrumb a {
    color: var(--color-card);
    text-decoration: none;
}

.breadcrumb span {
    margin: 0 8px;
}

.navxd-ranking-detail .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.navxd-ranking-detail .hero-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-card);
    margin-bottom: 16px;
}

.navxd-ranking-detail .hero-subtitle {
    font-size: 18px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 16px;
}

.navxd-ranking-detail .hero-description {
    font-size: 16px;
    color: rgba(255,255,255,0.85);
}

.hero-text {
    flex: 1;
}

.hero-image {
    flex: 1;
    text-align: right;
}

.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-card);
}

/* 榜单功能区 */
.ranking-features-section {
    background-color: var(--color-bg);
    padding: 20px 0;
}

.feature-tabs {
    display: flex;
    gap: 12px;
}

.tab-btn {
    padding: 10px 20px;
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn.active {
    background-color: var(--color-primary);
    color: var(--color-card);
    border-color: var(--color-primary);
}

.tab-btn:hover:not(.active) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* 筛选器 */
.filter-section {
    background-color: var(--color-bg);
    padding: 20px 0;
}

.filter-dropdowns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    font-size: 14px;
    background-color: var(--color-card);
    cursor: pointer;
    transition: border-color 0.3s ease;
}

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

/* 榜单统计数据 */
.stats-section {
    background-color: var(--color-bg);
    padding: 40px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.stat-card {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
    text-align: center;
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
}

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

/* 趋势分析 */
.trend-section {
    background-color: var(--color-bg);
    padding: 40px 0;
}

.trend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.view-full-trend-btn {
    padding: 10px 20px;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-full-trend-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-card);
}

.trend-chart {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
}

#trendChart {
    width: 100%;
    height: 220px;
    margin-bottom: 24px;
}

.trend-visualization {
    margin-bottom: 24px;
}

.trend-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.trend-name {
    width: 100px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.trend-bar {
    flex: 1;
    height: 8px;
    background-color: var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}

.trend-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.trend-value {
    width: 40px;
    text-align: right;
    font-weight: 600;
    color: var(--color-text-primary);
}

.chart-legend {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.chart-timeline {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: 16px;
}

/* 榜单列表和侧栏容器 */
.ranking-sidebar-container {
    background-color: var(--color-bg);
    padding: 40px 0;
}

.ranking-sidebar-content {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 24px;
}

/* 榜单列表 */
.ranking-list-section {
    padding: 0;
}

.ranking-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ranking-card {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    --mouse-x: 50%;
    --mouse-y: 50%;
    --spotlight-color: rgba(91, 108, 255, 0.5);
}

.ranking-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.ranking-card:hover::before {
    opacity: 0.6;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.rank-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    color: var(--color-card);
    background-color: var(--color-primary);
    flex-shrink: 0;
}

.tool-info {
    flex: 1;
}

.tool-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

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

.tag {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    padding: 4px 12px;
    border-radius: var(--radius-tag);
    font-size: 12px;
    font-weight: 600;
}

.tool-rating {
    text-align: right;
}

.stars {
    font-size: 16px;
    color: var(--color-rank-1);
    margin-bottom: 4px;
}

.rating-number {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.detail-analysis-btn {
    padding: 8px 16px;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.detail-analysis-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-card);
}

/* 右侧 Sidebar */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-content {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-section {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.sidebar-section .section-title {
    font-size: 18px;
    margin-bottom: 16px;
}

.sidebar-section .section-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}

.sidebar-section .price-info {
    margin-bottom: 20px;
}

.sidebar-section .subscribe-btn {
    width: 100%;
    padding: 10px;
    background-color: var(--color-primary);
    color: var(--color-card);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.sidebar-section .subscribe-btn:hover {
    background-color: #4a5ce0;
}

.tool-list {
    list-style: none;
}

.tool-list li {
    margin-bottom: 12px;
}

.tool-list a {
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.tool-list a:hover {
    color: var(--color-primary);
}

.platform-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-item {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Footer CTA */
.navxd-ranking-detail .footer-cta-section {
    background: linear-gradient(135deg, var(--color-gradient-1) 0%, var(--color-gradient-2) 50%, var(--color-gradient-3) 100%);
    padding: 60px 0;
    color: var(--color-card);
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .navxd-ranking-detail .hero-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .hero-image {
        text-align: center;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ranking-sidebar-content {
        grid-template-columns: 1fr;
    }
    
    .ranking-content {
        grid-template-columns: 1fr;
    }
    
    .ranking-sidebar-content {
        grid-template-columns: 1fr;
    }
    
    .sidebar-content {
        position: static;
    }
}

@media (max-width: 768px) {
    .navxd-ranking-detail .hero-title {
        font-size: 32px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .filter-dropdowns {
        flex-direction: column;
    }
    
    .filter-select {
        width: 100%;
    }
    
    .feature-tabs {
        flex-wrap: wrap;
    }
    
    .tab-btn {
        flex: 1;
        min-width: 120px;
    }
    
    .chart-legend {
        flex-wrap: wrap;
    }
}

/* ============================================
   今日 AI 榜单
   ============================================ */
.ranking-section {
    background-color: var(--color-bg);
}

.ranking-content {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 24px;
}

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ranking-item {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 20px;
    display: flex;
    gap: 16px;
    box-shadow: var(--shadow-card);
    transition: transform 0.3s ease;
}

.ranking-item:hover {
    transform: translateX(4px);
}

.rank-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    color: var(--color-card);
    flex-shrink: 0;
}

.ranking-1 .rank-badge {
    background-color: var(--color-rank-1);
}

.ranking-2 .rank-badge {
    background-color: var(--color-rank-2);
}

.ranking-3 .rank-badge {
    background-color: var(--color-rank-3);
}

.ranking-item:not(.ranking-1):not(.ranking-2):not(.ranking-3) .rank-badge {
    background-color: var(--color-border);
    color: var(--color-text-secondary);
}

.ranking-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ranking-header {
    display: flex;
    gap: 16px;
    align-items: center;
}

.tool-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
}

.ranking-details h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.ranking-details p {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.ranking-stats {
    text-align: right;
}

.stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.stat-trend {
    font-size: 14px;
    font-weight: 600;
}

.stat-trend.up {
    color: var(--color-trend-up);
}

.stat-trend.down {
    color: var(--color-trend-down);
}

/* ============================================
   AI 工具趋势卡片
   ============================================ */
.trend-card {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    --mouse-x: 50%;
    --mouse-y: 50%;
    --spotlight-color: rgba(91, 108, 255, 0.5);
}

.trend-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.trend-card:hover::before {
    opacity: 0.6;
}

.card-header {
    margin-bottom: 24px;
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.trend-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.trend-item h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.trend-item p {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* ============================================
   新AI工具趋势布局
   ============================================ */
.trends-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.trend-card.dark-card {
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 24px;
    transition: none;
}

.trend-card.dark-card::before {
    display: none;
}

.trend-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 20px;
}

/* 进度条样式 */
.progress-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.progress-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.category-name {
    width: 60px;
    font-size: 12px;
    color: #6B7280;
    flex-shrink: 0;
}

.progress-bar-container {
    flex: 1;
    height: 6px;
    background-color: #E5E7EB;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: none;
}

.percentage {
    width: 30px;
    font-size: 11px;
    color: #6B7280;
    text-align: right;
    flex-shrink: 0;
}

/* 增长项目样式 */
.growth-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.growth-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 16px;
}

.growth-percentage {
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.growth-percentage.green {
    color: #10B981;
}

.growth-percentage.blue {
    color: #3B82F6;
}

.growth-percentage.orange {
    color: #F59E0B;
}

.growth-info {
    flex: 1;
}

.growth-title {
    font-size: 12px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.growth-desc {
    font-size: 11px;
    color: #6B7280;
    margin: 0;
}

.chart-container {
    background-color: var(--color-bg);
    border-radius: 12px;
    padding: 20px;
}

.chart-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}

.pie-chart {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.chart-segment {
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background-color: var(--color);
    color: var(--color-card);
}

.bottom-data {
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.data-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
}

/* ============================================
   推荐 AI 工具
   ============================================ */
.recommended-section {
    background-color: var(--color-bg);
}

.recommended-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.tool-card {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.tool-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

.card-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
    margin-bottom: 16px;
}

.card-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.card-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* ============================================
   工具对比页
   ============================================ */
.navxd-tool-comparison {
    background-color: #1F2937;
    min-height: 100vh;
}

/* 导航栏 */
.navxd-tool-comparison .navxd-header {
    height: 52px;
    background-color: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #374151;
    padding: 0;
}

.navxd-tool-comparison .header-content {
    height: 100%;
    align-items: center;
}

.navxd-tool-comparison .logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navxd-tool-comparison .logo::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #5B6CFF;
}

.navxd-tool-comparison .main-nav ul {
    gap: 24px;
}

.navxd-tool-comparison .main-nav a {
    font-size: 14px;
    font-weight: 500;
    color: #9CA3AF;
}

.navxd-tool-comparison .main-nav a:hover {
    color: #5B6CFF;
}

.navxd-tool-comparison .main-nav a.active {
    color: #5B6CFF;
    font-weight: 600;
}

/* 面包屑导航 */
.breadcrumb-section {
    height: 42px;
    border-bottom: 1px solid #374151;
    background-color: #111827;
}

.breadcrumb {
    padding: 0 32px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.breadcrumb a {
    color: #6B7280;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: #5B6CFF;
}

.breadcrumb span:not(:last-child) {
    color: #6B7280;
}

.breadcrumb span:last-child {
    color: #E5E7EB;
    font-weight: 500;
}

/* 页面头部 */
.navxd-tool-comparison .hero-section {
    padding: 40px 0;
    background-color: #111827;
}

.navxd-tool-comparison .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.navxd-tool-comparison .hero-title {
    font-size: 24px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
}

.navxd-tool-comparison .hero-subtitle {
    font-size: 13px;
    color: #9CA3AF;
    margin: 0;
}

/* 工具选择器 */
.comparison-selector-section {
    padding: 32px 0;
    background-color: #111827;
    border-bottom: 1px solid #374151;
}

.comparison-selector {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comparison-selector h3 {
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0;
    text-align: center;
}

.selector-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.tool-select {
    position: relative;
}

.tool-select select {
    width: 200px;
    padding: 12px 16px;
    background-color: #374151;
    border: 1px solid #4B5563;
    border-radius: 10px;
    color: #E5E7EB;
    font-size: 14px;
    appearance: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tool-select select:hover {
    border-color: #5B6CFF;
}

.tool-select::after {
    content: '▼';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    font-size: 12px;
    pointer-events: none;
}

.vs {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E5E7EB;
    font-weight: 700;
    font-size: 14px;
}

.compare-btn {
    padding: 12px 24px;
    background-color: #5B6CFF;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.compare-btn:hover {
    background-color: #4F46E5;
    transform: translateY(-1px);
}

/* Tab 导航 */
.tabs-section {
    background-color: #111827;
    border-bottom: 1px solid #374151;
}

.tabs {
    display: flex;
    gap: 32px;
    padding: 0 32px;
}

.tab-btn {
    padding: 16px 0;
    background: none;
    border: none;
    color: #9CA3AF;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.tab-btn:hover {
    color: #5B6CFF;
}

.tab-btn.active {
    color: #5B6CFF;
    font-weight: 600;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #5B6CFF;
}

/* 主要内容区 */
.main-content-section {
    padding: 40px 0;
    background-color: #1F2937;
}

/* 英雄评分区 */
.comparison-cards {
    display: flex;
    align-items: stretch;
    gap: 24px;
    margin-bottom: 40px;
}

.comparison-card {
    flex: 1;
    background-color: #374151;
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.comparison-card.winner {
    border: 1px solid #5B6CFF;
    background-color: rgba(91, 108, 255, 0.05);
}

.comparison-card .tool-logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.comparison-card .tool-name {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
}

.comparison-card .tool-desc {
    font-size: 12px;
    color: #9CA3AF;
    margin: 0;
}

.comparison-card .rating-score {
    font-size: 48px;
    font-weight: 700;
    margin: 0;
}

.comparison-card.winner .rating-score {
    color: #5B6CFF;
}

.comparison-card:not(.winner) .rating-score {
    color: #9CA3AF;
}

.comparison-card .rating-stars {
    color: #F59E0B;
    font-size: 16px;
    margin: 8px 0;
}

.comparison-card .status-badge {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    margin: 8px 0;
}

.comparison-card.winner .status-badge {
    background-color: #5B6CFF;
    color: white;
}

.comparison-card:not(.winner) .status-badge {
    background-color: #4B5563;
    color: #9CA3AF;
}

.comparison-card .btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.comparison-card .btn-primary {
    background-color: #5B6CFF;
    color: white;
}

.comparison-card .btn-primary:hover {
    background-color: #4F46E5;
    transform: translateY(-1px);
}

.comparison-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 24px;
}

.comparison-vs .vs-label {
    font-size: 32px;
    font-weight: 700;
    color: #9CA3AF;
}

.comparison-vs .score-gap {
    text-align: center;
}

.comparison-vs .gap-label {
    font-size: 12px;
    color: #9CA3AF;
    margin-bottom: 4px;
}

.comparison-vs .gap-value {
    font-size: 24px;
    font-weight: 700;
    color: #5B6CFF;
}

/* 维度评分对比 */
.rating-section {
    margin-bottom: 40px;
}

.section-title {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 24px;
}

.dimension-grid {
    background-color: #374151;
    border-radius: 12px;
    padding: 24px;
}

.dimension-item {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 2fr 1fr;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #4B5563;
}

.dimension-item:last-child {
    border-bottom: none;
}

.dimension-name {
    font-size: 14px;
    font-weight: 600;
    color: #E5E7EB;
    text-align: center;
}

.score-progress {
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}

.score-progress.midjourney {
    background-color: rgba(91, 108, 255, 0.2);
    justify-self: end;
}

.score-progress.dalle {
    background-color: rgba(168, 85, 247, 0.2);
}

.progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.progress-bar.midjourney {
    background-color: #5B6CFF;
}

.progress-bar.dalle {
    background-color: #A855F7;
}

.score-value {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.score-value.winner {
    color: #10B981;
}

.score-value:not(.winner) {
    color: #E5E7EB;
}

/* 优缺点对比 */
.pros-cons-section {
    margin-bottom: 40px;
}

.pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.tool-pros-cons {
    background-color: #374151;
    border-radius: 12px;
    padding: 24px;
}

.tool-pros-cons h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #4B5563;
}

.tool-pros-cons .tool-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
}

.pros, .cons {
    margin-bottom: 20px;
}

.pros h4, .cons h4 {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.pros h4 {
    color: #10B981;
}

.cons h4 {
    color: #EF4444;
}

.pros ul, .cons ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pros li, .cons li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #9CA3AF;
    margin-bottom: 8px;
}

.pros li::before {
    content: '●';
    color: #10B981;
    font-size: 5px;
    margin-top: 6px;
}

.cons li::before {
    content: '●';
    color: #EF4444;
    font-size: 5px;
    margin-top: 6px;
}

/* 核心能力雷达 */
.core-diff-section {
    margin-bottom: 40px;
}

.radar-chart-container {
    background-color: #374151;
    border-radius: 12px;
    padding: 24px;
}

.radar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 24px;
}

.radar-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.radar-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.radar-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #E5E7EB;
}

.radar-values {
    display: flex;
    gap: 16px;
}

.radar-value {
    font-size: 14px;
    font-weight: 600;
}

.radar-value.midjourney {
    color: #5B6CFF;
}

.radar-value.dalle {
    color: #A855F7;
}

.radar-progress {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background-color: rgba(156, 163, 175, 0.2);
}

.radar-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.radar-progress-bar.midjourney {
    background-color: #5B6CFF;
}

.radar-progress-bar.dalle {
    background-color: #A855F7;
    top: 4px;
}

/* 适用人群 */
.use-case-section {
    margin-bottom: 40px;
}

.use-case-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.use-case-card {
    background-color: #374151;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.use-case-card h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
}

.use-case-card .tool-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
}

.use-case-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.use-case-card li {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #4B5563;
    padding: 12px;
    border-radius: 8px;
}

.use-case-card li .use-case-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(91, 108, 255, 0.2);
    color: #5B6CFF;
}

.use-case-card li span {
    font-size: 14px;
    color: #E5E7EB;
}

.use-case-card .btn-secondary {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    margin-top: 8px;
}

.use-case-card .btn-secondary.midjourney {
    background-color: rgba(91, 108, 255, 0.2);
    color: #5B6CFF;
}

.use-case-card .btn-secondary.dalle {
    background-color: rgba(168, 85, 247, 0.2);
    color: #A855F7;
}

/* 价格对比 */
.price-section {
    margin-bottom: 40px;
}

.price-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.price-card {
    background-color: #374151;
    border-radius: 12px;
    padding: 24px;
}

.price-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.price-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
}

.price-type {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

.price-type.freemium {
    background-color: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.price-type.free-tier {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10B981;
}

.price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #4B5563;
}

.price-item:last-child {
    border-bottom: none;
}

.price-item-name {
    font-size: 14px;
    color: #9CA3AF;
}

.price-item-value {
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
}

/* 订阅横幅 */
.footer-cta-section {
    background-color: #374151;
    border: 1px solid #5B6CFF;
    border-radius: 14px;
    padding: 32px;
    margin: 40px 0;
}

.cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.cta-info {
    flex: 1;
    min-width: 300px;
}

.cta-title {
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.cta-description {
    font-size: 14px;
    color: #9CA3AF;
    margin-bottom: 16px;
}

.price-info {
    display: flex;
    gap: 24px;
    align-items: baseline;
}

.price-month {
    font-size: 24px;
    font-weight: 700;
    color: #5B6CFF;
}

.price-year {
    font-size: 16px;
    color: #9CA3AF;
    text-decoration: line-through;
}

.cta-btn {
    padding: 12px 24px;
    background-color: #5B6CFF;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.cta-btn:hover {
    background-color: #4F46E5;
    transform: translateY(-1px);
}

/* Footer */
.navxd-tool-comparison .navxd-footer {
    background-color: #111827;
    color: #9CA3AF;
    padding: 40px 0;
    margin-top: 60px;
    border-top: 1px solid #374151;
}

.navxd-tool-comparison .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.navxd-tool-comparison .footer-nav {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.navxd-tool-comparison .footer-nav a {
    color: #9CA3AF;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.navxd-tool-comparison .footer-nav a:hover {
    color: #5B6CFF;
}

.navxd-tool-comparison .footer-bottom {
    margin-top: 24px;
    text-align: center;
    font-size: 12px;
    color: #6B7280;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .comparison-cards {
        flex-direction: column;
        align-items: center;
    }
    
    .comparison-card {
        width: 100%;
        max-width: 400px;
    }
    
    .pros-cons-grid,
    .use-case-grid,
    .price-grid,
    .radar-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-content {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .selector-content {
        flex-direction: column;
        gap: 16px;
    }
    
    .tool-select select {
        width: 240px;
    }
    
    .tabs {
        padding: 0 16px;
        gap: 16px;
    }
    
    .tab-btn {
        font-size: 12px;
    }
    
    .dimension-item {
        grid-template-columns: 1fr;
        gap: 8px;
        text-align: center;
    }
    
    .score-progress.midjourney,
    .score-progress.dalle {
        justify-self: stretch;
    }
}

/* ============================================
   AI 报告
   ============================================ */
.reports-section {
    background-color: var(--color-bg);
}

.reports-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.report-item {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
    display: flex;
    gap: 16px;
    align-items: center;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.report-item:hover {
    transform: translateX(4px);
}

.report-number {
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
}

.report-content {
    flex: 1;
}

.report-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.report-date {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* ============================================
   Footer
   ============================================ */
.navxd-footer {
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: 40px 0;
    margin-top: 60px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-nav {
    display: flex;
    gap: 24px;
}

.footer-nav a {
    color: var(--color-footer-text);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: var(--color-footer-link);
}

.social-links {
    display: flex;
    gap: 16px;
}

.social-links a {
    color: var(--color-footer-text);
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--color-footer-link);
}

/* ============================================
   注册和登录页面
   ============================================ */
.navxd-auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.auth-hero-section {
    flex: 1;
    padding: 80px 0;
    background-color: var(--color-bg);
}

.auth-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.auth-left {
    max-width: 450px;
}

.auth-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 16px;
    line-height: 1.2;
}

.auth-subtitle {
    font-size: 16px;
    color: var(--color-text-secondary);
    margin-bottom: 40px;
    line-height: 1.5;
}

.register-form,
.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.form-group input {
    padding: 16px 20px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-btn);
    font-size: 16px;
    background-color: var(--color-card);
    transition: all 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(91, 108, 255, 0.1);
}

.form-group.terms {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.form-group.terms input {
    margin-top: 2px;
}

.form-group.terms label {
    flex: 1;
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.form-group.terms a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.form-group.terms a:hover {
    color: #4a5ce0;
    text-decoration: underline;
}

.form-group.remember {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.form-group.remember input {
    margin-right: 8px;
}

.form-group.remember label {
    font-weight: 500;
    color: var(--color-text-secondary);
}

.forgot-password {
    font-size: 14px;
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.forgot-password:hover {
    color: #4a5ce0;
    text-decoration: underline;
}

.auth-btn {
    padding: 16px 24px;
    border: none;
    border-radius: var(--radius-btn);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.register-btn {
    background-color: var(--color-primary);
    color: var(--color-card);
}

.register-btn:hover {
    background-color: #4a5ce0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(91, 108, 255, 0.3);
}

.login-btn {
    background-color: var(--color-primary);
    color: var(--color-card);
}

.login-btn:hover {
    background-color: #4a5ce0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(91, 108, 255, 0.3);
}

.auth-switch {
    text-align: center;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: 16px;
}

.auth-switch a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.auth-switch a:hover {
    color: #4a5ce0;
    text-decoration: underline;
}

.auth-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.auth-illustration {
    max-width: 400px;
    width: 100%;
}

.auth-features {
    max-width: 300px;
    text-align: center;
}

.auth-features h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.auth-features ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-features li {
    font-size: 14px;
    color: var(--color-text-secondary);
    position: relative;
    padding-left: 24px;
    text-align: left;
}

.auth-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-trend-up);
    font-weight: 700;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .auth-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .auth-left {
        max-width: 100%;
        order: 2;
    }
    
    .auth-right {
        order: 1;
    }
    
    .form-group.terms {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .form-group.remember {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .auth-hero-section {
        padding: 60px 0;
    }
    
    .auth-title {
        font-size: 28px;
    }
    
    .auth-subtitle {
        font-size: 14px;
        margin-bottom: 30px;
    }
    
    .form-group input {
        padding: 14px 18px;
        font-size: 14px;
    }
    
    .auth-btn {
        padding: 14px 20px;
        font-size: 14px;
    }
    
    .auth-illustration {
        max-width: 300px;
    }
    
    .auth-features h3 {
        font-size: 18px;
    }
    
    .auth-features li {
        font-size: 13px;
    }
}

/* ============================================
   AI工具页面样式
   ============================================ */
.ai-tools-page {
    background-color: var(--color-bg);
}

/* 导航栏样式 */
.ai-tools-page .navxd-header {
    height: 52px;
    background-color: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #374151;
    padding: 0;
}

.ai-tools-page .header-content {
    height: 100%;
    align-items: center;
}

.ai-tools-page .logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-tools-page .logo::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #5B6CFF;
}

.ai-tools-page .main-nav ul {
    gap: 24px;
}

.ai-tools-page .main-nav a {
    font-size: 14px;
    font-weight: 500;
}

.ai-tools-page .main-nav a:hover {
    color: #5B6CFF;
}

.ai-tools-page .main-nav a.active {
    color: #5B6CFF;
    font-weight: 600;
}

/* 页面头部 */
.ai-tools-page .page-header {
    padding: 40px 0;
    background-color: var(--color-bg);
}

.ai-tools-page .page-header .header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.ai-tools-page .page-title {
    font-size: 36px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.ai-tools-page .page-subtitle {
    font-size: 16px;
    color: #6B7280;
    margin: 0;
    max-width: 600px;
}

.ai-tools-page .search-container {
    width: 100%;
    max-width: 800px;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ai-tools-page .search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 24px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.ai-tools-page .search-input {
    flex: 1;
    padding: 20px 24px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    font-size: 18px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ai-tools-page .search-input::placeholder {
    color: var(--color-placeholder);
}

.ai-tools-page .search-input:hover {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.ai-tools-page .search-input:focus {
    border-color: #5B6CFF;
    box-shadow: 0 0 0 4px rgba(91, 108, 255, 0.3);
}

.ai-tools-page .search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 32px;
    background-color: blue;
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 255, 0.4);
    white-space: nowrap;
}

.ai-tools-page .search-btn:hover {
    background-color: #0000cc;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 255, 0.5);
}

.ai-tools-page .hot-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ai-tools-page .tag {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    padding: 6px 16px;
    border-radius: var(--radius-tag);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ai-tools-page .tag:hover {
    background-color: var(--color-primary);
    color: var(--color-card);
}

/* 主体布局 */
.ai-tools-page .main-content {
    padding: 24px 0;
    background-color: var(--color-bg);
}

.ai-tools-page .content-wrapper {
    display: flex;
    gap: 24px;
}

/* 左侧筛选栏 */
.ai-tools-page .filter-sidebar {
    width: 210px;
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 18px 14px;
    border-right: 1px solid #E5E7EB;
}

.ai-tools-page .filter-group {
    margin-bottom: 24px;
}

.ai-tools-page .filter-group:last-child {
    margin-bottom: 0;
}

.ai-tools-page .filter-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
}

.ai-tools-page .filter-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-tools-page .filter-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ai-tools-page .filter-item:hover {
    background-color: #F3F4F6;
}

.ai-tools-page .filter-item.active {
    background-color: rgba(91, 108, 255, 0.1);
    color: #5B6CFF;
}

.ai-tools-page .item-name {
    font-size: 12px;
}

.ai-tools-page .item-count {
    font-size: 10px;
    color: #6B7280;
}

.ai-tools-page .filter-item.active .item-count {
    color: #5B6CFF;
}

/* 标签云 */
.ai-tools-page .tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ai-tools-page .tag-item {
    padding: 4px 10px;
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    font-size: 11px;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ai-tools-page .tag-item:hover {
    border-color: #5B6CFF;
    color: #5B6CFF;
}

.ai-tools-page .tag-item.active {
    border-color: #5B6CFF;
    color: #5B6CFF;
}

/* 价格按钮 */
.ai-tools-page .price-buttons {
    display: flex;
    gap: 6px;
}

.ai-tools-page .price-btn {
    flex: 1;
    padding: 6px 0;
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    font-size: 11px;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ai-tools-page .price-btn:hover {
    border-color: #5B6CFF;
    color: #5B6CFF;
}

.ai-tools-page .price-btn.active {
    background-color: rgba(91, 108, 255, 0.1);
    border-color: #5B6CFF;
    color: #5B6CFF;
}

/* 右侧内容区 */
.ai-tools-page .tools-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 工具栏 */
.ai-tools-page .tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
}

.ai-tools-page .result-count {
    font-size: 14px;
    color: #6B7280;
}

.ai-tools-page .count-number {
    font-weight: 700;
    color: #111827;
}

.ai-tools-page .tool-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ai-tools-page .sort-buttons {
    display: flex;
    gap: 8px;
    border-right: 1px solid #E5E7EB;
    padding-right: 16px;
}

.ai-tools-page .sort-btn {
    padding: 6px 12px;
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    font-size: 12px;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ai-tools-page .sort-btn:hover {
    border-color: #5B6CFF;
    color: #5B6CFF;
}

.ai-tools-page .sort-btn.active {
    background-color: #5B6CFF;
    border-color: #5B6CFF;
    color: #FFFFFF;
}

.ai-tools-page .view-toggle {
    display: flex;
    gap: 4px;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    overflow: hidden;
}

.ai-tools-page .view-btn {
    padding: 6px 10px;
    background-color: #FFFFFF;
    border: none;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ai-tools-page .view-btn:hover {
    background-color: #F3F4F6;
}

.ai-tools-page .view-btn.active {
    background-color: #5B6CFF;
    color: #FFFFFF;
}

/* 工具卡片网格 */
.ai-tools-page .tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-items: start;
}

/* 工具卡片 */
.ai-tools-page .tool-card {
    background-color: #333333;
    border: 1px solid #444444;
    border-radius: 11px;
    padding: 16px;
    transition: all 0.3s ease;
}

.ai-tools-page .tool-card:hover {
    border-color: #555555;
    background-color: #3A3A3A;
}

.ai-tools-page .card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.ai-tools-page .tool-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.ai-tools-page .tool-info {
    flex: 1;
}

.ai-tools-page .tool-name {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin: 0 0 4px 0;
}

.ai-tools-page .tool-url {
    font-size: 10px;
    color: #9CA3AF;
    margin: 0;
}

.ai-tools-page .status-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.ai-tools-page .status-badge.top {
    background-color: #F59E0B;
    color: white;
}

.ai-tools-page .status-badge.hot {
    background-color: #EF4444;
    color: white;
}

.ai-tools-page .status-badge.new {
    background-color: #10B981;
    color: white;
}

.ai-tools-page .status-badge.trending {
    background-color: #F59E0B;
    color: white;
}

.ai-tools-page .tool-description {
    font-size: 14px;
    color: #9CA3AF;
    line-height: 1.4;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ai-tools-page .tool-meta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #444444;
    gap: 12px;
}

.ai-tools-page .tool-tags {
    display: flex;
    gap: 8px;
}

.ai-tools-page .tool-tag {
    padding: 4px 12px;
    background-color: #444444;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #9CA3AF;
}

.ai-tools-page .tool-rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-tools-page .stars {
    font-size: 16px;
    color: #F59E0B;
    letter-spacing: 1px;
}

.ai-tools-page .rating {
    font-size: 20px;
    font-weight: 700;
    color: white;
    background-color: rgba(245, 158, 11, 0.2);
    padding: 2px 8px;
    border-radius: 12px;
}

.ai-tools-page .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ai-tools-page .price-tag {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.ai-tools-page .price-tag.free {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10B981;
}

.ai-tools-page .price-tag.freemium {
    background-color: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.ai-tools-page .price-tag.paid {
    background-color: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

.ai-tools-page .view-details {
    font-size: 14px;
    color: #5B6CFF;
    text-decoration: none;
    transition: color 0.3s ease;
}

.ai-tools-page .view-details:hover {
    color: #8B5CF6;
}

/* AI工具页面banner搜索框样式 */
.ai-tools-page .hero-section .search-container {
    width: 100%;
    max-width: 520px;
    margin-top: 20px;
}

.ai-tools-page .hero-section .search-box {
    display: flex;
    gap: 0;
    background-color: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 9px;
    overflow: hidden;
    transition: all 0.3s ease;
    padding: 0;
    backdrop-filter: none;
    box-shadow: none;
}

.ai-tools-page .hero-section .search-input {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background-color: transparent;
    font-size: 14px;
    outline: none;
    box-shadow: none;
}

.ai-tools-page .hero-section .search-btn {
    padding: 0 20px;
    background-color: #5B6CFF;
    color: white;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-tools-page .hero-section .search-btn:hover {
    background-color: #4F46E5;
}

/* 分页 */
.ai-tools-page .pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
    padding: 16px;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ai-tools-page .page-btn {
    width: 40px;
    height: 40px;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    background-color: #FFFFFF;
    color: #6B7280;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-tools-page .page-btn:hover:not(.disabled) {
    border-color: #5B6CFF;
    color: #5B6CFF;
    transform: translateY(-1px);
}

.ai-tools-page .page-btn.active {
    background-color: #5B6CFF;
    border-color: #5B6CFF;
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(91, 108, 255, 0.3);
}

.ai-tools-page .page-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #E5E7EB;
    color: #9CA3AF;
}

.ai-tools-page .page-btn:first-child, .ai-tools-page .page-btn:last-child {
    width: auto;
    padding: 0 16px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .ai-tools-page .content-wrapper {
        flex-direction: column;
    }
    
    .ai-tools-page .filter-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #E5E7EB;
    }
    
    .ai-tools-page .tools-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ai-tools-page .tool-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .ai-tools-page .tool-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    .ai-tools-page .sort-buttons {
        border-right: none;
        padding-right: 0;
    }
}

/* ============================================
   热门AI工具样式
   ============================================ */
.popular-tools-section {
    background-color: #FFFFFF;
    padding: 60px 0;
}

.popular-tools-section .section-title {
    color: #111827;
    text-align: center;
    margin-bottom: 40px;
}

.popular-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.tool-card {
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 24px;
    transition: all 0.3s ease;
}

.tool-card:hover {
    border-color: #5B6CFF;
    background-color: #F3F4F6;
    transform: translateY(-2px);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.tool-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tool-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tool-details h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.tool-category {
    font-size: 14px;
    color: #6B7280;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.hot {
    background-color: #EF4444;
    color: #ffffff;
}

.status-badge.new {
    background-color: #10B981;
    color: #ffffff;
}

.status-badge.trending {
    background-color: #F59E0B;
    color: #ffffff;
}

.tool-description {
    margin-bottom: 20px;
}

.tool-description p {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.55;
    margin-bottom: 8px;
}

.tool-description p:last-child {
    margin-bottom: 0;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rating-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rating-number {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.rating-label {
    font-size: 12px;
    color: #6B7280;
}

.rating-bar {
    width: 60px;
    height: 4px;
    background-color: #E5E7EB;
    border-radius: 2px;
    overflow: hidden;
}

.rating-progress {
    height: 100%;
    background-color: #5B6CFF;
    border-radius: 2px;
}

.view-details-link {
    color: #5B6CFF;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.view-details-link:hover {
    color: #8B5CF6;
}

/* ============================================
   AI工具分类样式
   ============================================ */
.tool-categories-section {
    background-color: #FFFFFF;
    padding: 60px 0;
}

.tool-categories-section .section-title {
    color: #111827;
    text-align: center;
    margin-bottom: 40px;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.category-grid-item {
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.category-grid-item:hover {
    border-color: #5B6CFF;
    background-color: #F3F4F6;
    transform: translateY(-2px);
}

.category-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: #ffffff;
}

.category-icon.video-ai {
    background-color: #EC4899;
}

.category-icon.text-ai {
    background-color: #8B5CF6;
}

.category-icon.image-ai {
    background-color: #5B6CFF;
}

.category-icon.code-ai {
    background-color: #3B82F6;
}

.category-icon.office-ai {
    background-color: #10B981;
}

.category-icon.audio-ai {
    background-color: #F59E0B;
}

.category-icon.chat-ai {
    background-color: #6366F1;
}

.category-icon.design-ai {
    background-color: #EC4899;
}

.category-icon.translate-ai {
    background-color: #14B8A6;
}

.category-icon.data-ai {
    background-color: #F43F5E;
}

.category-icon.ppt-ai {
    background-color: #8B5CF6;
}

.category-icon.more-ai {
    background-color: #6B7280;
}

.category-name {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.tool-count {
    font-size: 12px;
    color: #6B7280;
    margin-bottom: 8px;
}

.category-arrow {
    font-size: 12px;
    color: #9CA3AF;
    transition: color 0.3s ease;
}

.category-grid-item:hover .category-arrow {
    color: #5B6CFF;
}

.category-grid-item.more-categories {
    border: 1px dashed #D1D5DB;
}

.category-grid-item.more-categories .category-icon {
    background-color: #E5E7EB;
    color: #6B7280;
}

.category-grid-item.more-categories .category-name {
    color: #6B7280;
}

.category-grid-item.more-categories .tool-count {
    color: #9CA3AF;
}

.category-grid-item.more-categories .category-arrow {
    color: #5B6CFF;
}

/* ============================================
   AI工具指南样式
   ============================================ */
.tool-guide-section {
    background-color: #FFFFFF;
    padding: 60px 0;
}

.tool-guide-section .section-title {
    color: #111827;
    text-align: center;
    margin-bottom: 40px;
}

.tool-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.guide-card {
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 24px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.guide-card:hover {
    border-color: #5B6CFF;
    background-color: #F3F4F6;
    transform: translateY(-2px);
}

.guide-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.guide-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.guide-icon.blue {
    background-color: #3B82F6;
}

.guide-icon.green {
    background-color: #10B981;
}

.guide-icon.orange {
    background-color: #F59E0B;
}

.guide-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.guide-badge.blue {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.guide-badge.green {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.guide-badge.orange {
    background-color: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}

.guide-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

.guide-description {
    margin-bottom: 16px;
}

.guide-description p {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.5;
    margin-bottom: 8px;
}

.guide-description p:last-child {
    margin-bottom: 0;
}

.guide-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.step-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #5B6CFF;
    margin-top: 6px;
    flex-shrink: 0;
}

.step-text {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.4;
}

.read-guide-link {
    color: #5B6CFF;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.3s ease;
    margin-top: auto;
    align-self: flex-start;
}

.read-guide-link:hover {
    color: #8B5CF6;
}

/* ============================================
   AI工具排行榜样式
   ============================================ */
.tool-ranking-section {
    background-color: #FFFFFF;
    padding: 60px 0;
}

.tool-ranking-section .section-title {
    color: #111827;
    text-align: center;
    margin-bottom: 40px;
}

.ranking-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ranking-card {
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.ranking-card:hover {
    border-color: #5B6CFF;
    background-color: #F3F4F6;
    transform: translateY(-2px);
}

.ranking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 16px;
}

.ranking-category {
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-icon.small {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.category-icon.small.video-ai {
    background-color: #EC4899;
}

.category-icon.small.text-ai {
    background-color: #8B5CF6;
}

.category-icon.small.image-ai {
    background-color: #5B6CFF;
}

.category-icon.small.code-ai {
    background-color: #3B82F6;
}

.category-icon.small.office-ai {
    background-color: #10B981;
}

.category-icon.small.audio-ai {
    background-color: #F59E0B;
}

.ranking-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.monthly-badge {
    font-size: 14px;
    color: #6B7280;
}

.ranking-list {
    margin-bottom: 16px;
}

.ranking-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ranking-item:last-child {
    margin-bottom: 0;
}

.rank-number {
    font-size: 14px;
    font-weight: 700;
    width: 24px;
    text-align: left;
}

.rank-number.rank-1 {
    color: #F59E0B;
}

.rank-number.rank-2 {
    color: #9CA3AF;
}

.rank-number.rank-3 {
    color: #F97316;
}

.ranking-item .tool-name {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-progress {
    width: 48px;
    height: 3px;
    background-color: #E5E7EB;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: #5B6CFF;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.tool-rating {
    font-size: 14px;
    font-weight: 700;
    color: #5B6CFF;
    width: 32px;
    text-align: right;
}

.ranking-footer {
    padding-top: 12px;
    border-top: 1px solid #E5E7EB;
    text-align: center;
}

.view-full-ranking {
    font-size: 14px;
    color: #6B7280;
    text-decoration: none;
    transition: color 0.3s ease;
}

.view-full-ranking:hover {
    color: #5B6CFF;
}

/* ============================================
   最近收录AI样式
   ============================================ */
.latest-tools-section {
    background-color: #FFFFFF;
    padding: 60px 0;
}

.latest-tools-section .section-title {
    color: #111827;
    text-align: center;
    margin-bottom: 32px;
}

.latest-tools-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.latest-tools-section .view-more-link {
    color: #5B6CFF;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.latest-tools-section .view-more-link:hover {
    color: #8B5CF6;
}

.latest-tools-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.latest-tool-item {
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 16px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.latest-tool-item:hover {
    border-color: #5B6CFF;
    background-color: #F3F4F6;
    transform: translateY(-1px);
}

.tool-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.latest-tool-item .tool-name {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.latest-tool-item .tool-desc {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.tool-category-tag {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 10px;
    align-self: flex-start;
}

/* ============================================
   榜单趋势页样式
   ============================================ */
.navxd-trend-report {
    background-color: var(--color-bg);
}

/* Hero 区 */
.navxd-trend-report .hero-section {
    background: linear-gradient(135deg, var(--color-gradient-1) 0%, var(--color-gradient-2) 50%, var(--color-gradient-3) 100%);
    padding: 60px 0;
    color: var(--color-card);
}

.navxd-trend-report .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.navxd-trend-report .hero-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.navxd-trend-report .hero-subtitle {
    font-size: 20px;
    margin-bottom: 16px;
    opacity: 0.9;
}

.navxd-trend-report .hero-description {
    font-size: 16px;
    opacity: 0.8;
    margin-bottom: 24px;
}

.navxd-trend-report .hero-image img {
    width: 100%;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* AI行业三大信号 */
.signals-section {
    padding: 60px 0;
    background-color: var(--color-bg);
}

.signals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.signal-card {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
    position: relative;
}

.signal-number {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.signal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 12px;
    margin-top: 16px;
}

.signal-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* AI工具排名变化趋势 */
.trend-section {
    padding: 60px 0;
    background-color: var(--color-card);
}

.trend-chart {
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
}

.chart-header {
    margin-bottom: 24px;
}

.tool-tags {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.tool-tag {
    padding: 6px 12px;
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.tool-tag.active {
    background-color: var(--color-primary);
    color: var(--color-card);
    border-color: var(--color-primary);
}

.chart-content {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}

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

.view-trend-btn {
    padding: 10px 20px;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-trend-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-card);
}

/* 本月新晋 AI工具 */
.new-tools-section {
    padding: 60px 0;
    background-color: var(--color-bg);
}

.new-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.new-tool-card {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
    position: relative;
}

.tool-rank {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
}

.tool-info {
    margin-top: 16px;
}

.tool-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tool-badge {
    background-color: var(--color-trend-up);
    color: var(--color-card);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.tool-rank-change {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-trend-up);
    margin-bottom: 8px;
}

.tool-rating {
    font-size: 16px;
    color: var(--color-rank-1);
    margin-bottom: 12px;
}

.tool-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 16px;
}

.view-tool-btn {
    padding: 6px 12px;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-tool-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-card);
}

.new-tools-footer {
    text-align: center;
}

.view-all-tools-btn {
    padding: 10px 20px;
    background-color: var(--color-primary);
    color: var(--color-card);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-all-tools-btn:hover {
    background-color: #4a5ce0;
}

/* AI赛道竞争格局 */
.competition-section {
    padding: 60px 0;
    background-color: var(--color-card);
}

.competition-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.competition-card {
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.card-icon {
    flex-shrink: 0;
}

.card-content {
    flex: 1;
}

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

.card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.card-rank {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-trend-up);
}

.card-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.card-leader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leader-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.leader-rank {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
}

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

.view-competition-btn {
    padding: 10px 20px;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-competition-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-card);
}

/* CTA 订阅模块 */
.navxd-trend-report .footer-cta-section {
    background: linear-gradient(135deg, var(--color-gradient-1) 0%, var(--color-gradient-2) 50%, var(--color-gradient-3) 100%);
    padding: 60px 0;
    color: var(--color-card);
}

.navxd-trend-report .cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navxd-trend-report .cta-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.navxd-trend-report .price-info {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.navxd-trend-report .price-month,
.navxd-trend-report .price-year {
    font-size: 20px;
    font-weight: 700;
}

.navxd-trend-report .cta-btn {
    padding: 12px 24px;
    background-color: var(--color-card);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.navxd-trend-report .cta-btn:hover {
    transform: translateY(-2px);
}

/* ============================================
   工具对比页样式
   ============================================ */
.navxd-tool-comparison {
    background-color: var(--color-bg);
}

/* Hero 区 */
.navxd-tool-comparison .hero-section {
    background: linear-gradient(135deg, var(--color-gradient-1) 0%, var(--color-gradient-2) 50%, var(--color-gradient-3) 100%);
    padding: 60px 0;
    color: var(--color-card);
}

.navxd-tool-comparison .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.navxd-tool-comparison .hero-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.navxd-tool-comparison .hero-subtitle {
    font-size: 20px;
    margin-bottom: 16px;
    opacity: 0.9;
}

.navxd-tool-comparison .hero-description {
    font-size: 16px;
    opacity: 0.8;
    margin-bottom: 24px;
}

.navxd-tool-comparison .hero-image img {
    width: 100%;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* 工具对比选择器 */
.comparison-selector-section {
    background-color: var(--color-card);
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border);
}

.comparison-selector h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.selector-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.tool-select {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tool-select label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.tool-select select {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    font-size: 14px;
    background-color: var(--color-bg);
    cursor: pointer;
    transition: border-color 0.3s ease;
}

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

.vs {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.compare-btn {
    padding: 10px 20px;
    background-color: var(--color-primary);
    color: var(--color-card);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.compare-btn:hover {
    background-color: #4a5ce0;
}

/* Tab 导航 */
.navxd-tool-comparison .tabs-section {
    background-color: var(--color-card);
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 70px;
    z-index: 100;
}

.navxd-tool-comparison .tabs {
    display: flex;
    gap: 2px;
}

.navxd-tool-comparison .tab-btn {
    padding: 12px 24px;
    background-color: var(--color-bg);
    border: none;
    border-radius: 8px 8px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.navxd-tool-comparison .tab-btn.active {
    background-color: var(--color-card);
    color: var(--color-primary);
    box-shadow: 0 -2px 0 var(--color-primary);
}

.navxd-tool-comparison .tab-btn:hover {
    color: var(--color-primary);
    background-color: var(--color-primary-light);
}

/* 主要内容区 */
.navxd-tool-comparison .main-content-section {
    padding: 40px 0;
}

/* 工具对比卡片 */
.comparison-cards {
    display: flex;
    gap: 24px;
    margin-bottom: 40px;
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
}

.comparison-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.comparison-card .tool-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.comparison-card .tool-info h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.comparison-card .tool-info p {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.comparison-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}

.vs-label {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-secondary);
}

/* 综合评分模块 */
.rating-section {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
    margin-bottom: 40px;
}

.rating-section .section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 24px;
}

.rating-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.rating-item {
    text-align: center;
    padding: 24px;
    background-color: var(--color-bg);
    border-radius: 12px;
}

.rating-item .tool-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.rating-score {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.rating-stars {
    font-size: 18px;
    color: var(--color-rank-1);
}

.dimension-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dimension-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: var(--color-bg);
    border-radius: 12px;
}

.dimension-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.dimension-scores {
    display: flex;
    gap: 32px;
}

.score-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.score-item .tool-name {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.score-item .score {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
}

/* 功能优缺点对比 */
.pros-cons-section {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
    margin-bottom: 40px;
}

.pros-cons-section .section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 24px;
}

.pros-cons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.tool-pros-cons h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.tool-pros-cons h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.tool-pros-cons ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.tool-pros-cons li {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.pros li {
    color: #22C55E;
}

.cons li {
    color: #EF4444;
}

/* 核心差异模块 */
.core-diff-section {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
    margin-bottom: 40px;
}

.core-diff-section .section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 24px;
}

.radar-chart-container {
    display: flex;
    justify-content: center;
}

/* 适用人群 */
.use-case-section {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
    margin-bottom: 40px;
}

.use-case-section .section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 24px;
}

.use-case-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.use-case-card {
    padding: 24px;
    background-color: var(--color-bg);
    border-radius: 12px;
}

.use-case-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.use-case-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.use-case-card li {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

/* CTA 订阅模块 */
.navxd-tool-comparison .footer-cta-section {
    background: linear-gradient(135deg, var(--color-gradient-1) 0%, var(--color-gradient-2) 50%, var(--color-gradient-3) 100%);
    padding: 60px 0;
    color: var(--color-card);
}

.navxd-tool-comparison .cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navxd-tool-comparison .cta-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.navxd-tool-comparison .price-info {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.navxd-tool-comparison .price-month,
.navxd-tool-comparison .price-year {
    font-size: 20px;
    font-weight: 700;
}

.navxd-tool-comparison .cta-btn {
    padding: 12px 24px;
    background-color: var(--color-card);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.navxd-tool-comparison .cta-btn:hover {
    transform: translateY(-2px);
}

/* ============================================
   更新日志页样式
   ============================================ */
.navxd-update-log {
    background-color: var(--color-bg);
}

/* Hero 区 */
.navxd-update-log .hero-section {
    background: linear-gradient(135deg, var(--color-gradient-1) 0%, var(--color-gradient-2) 50%, var(--color-gradient-3) 100%);
    padding: 60px 0;
    color: var(--color-card);
}

.navxd-update-log .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.navxd-update-log .hero-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.navxd-update-log .hero-subtitle {
    font-size: 20px;
    margin-bottom: 16px;
    opacity: 0.9;
}

.navxd-update-log .hero-description {
    font-size: 16px;
    opacity: 0.8;
    margin-bottom: 24px;
}

.navxd-update-log .hero-image img {
    width: 100%;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* 图像 AI 发展阶段 */
.development-stage-section {
    padding: 60px 0;
    background-color: var(--color-card);
}

.stage-content {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 32px;
}

.stage-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tool-card {
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.tool-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.tool-icon {
    flex-shrink: 0;
}

.tool-info {
    flex: 1;
}

.tool-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.tool-rating {
    font-size: 14px;
    color: var(--color-rank-1);
    margin-bottom: 4px;
}

.tool-date {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.tool-rank {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
}

.tool-status {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.tool-badge {
    display: inline-block;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    padding: 2px 8px;
    border-radius: var(--radius-tag);
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}

.tool-note {
    text-align: right;
    margin-top: 8px;
}

.note-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.stage-side {
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.stage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.stage-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.stage-edit {
    padding: 6px 12px;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.stage-tools {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.stage-tool {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

.stage-tool .tool-name {
    font-size: 14px;
    font-weight: 500;
}

.stage-tool .tool-status {
    font-size: 12px;
    color: var(--color-trend-up);
    font-weight: 600;
}

.stage-note {
    font-size: 14px;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* 4月加入新上榜工具 */
.new-tools-section {
    padding: 60px 0;
    background-color: var(--color-bg);
}

.new-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.new-tool-card {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.tool-features {
    list-style: none;
    padding: 0;
    margin: 16px 0 0 0;
}

.tool-features li {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 14px;
}

.tool-features li:before {
    content: "✓";
    color: var(--color-trend-up);
    margin-right: 8px;
}

/* 4月剔除与调整权重的工具 */
.adjusted-tools-section {
    padding: 60px 0;
    background-color: var(--color-card);
}

.adjusted-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.adjusted-tool-card {
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.adjusted-tool-card .tool-status {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-top: 12px;
}

.adjusted-tool-card .tool-note {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: 12px;
    text-align: left;
}

.adjusted-tools-footer {
    text-align: center;
}

.view-all-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

/* 更新日志 */
.update-log-section {
    padding: 60px 0;
    background-color: var(--color-bg);
}

.update-log-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.update-log-item {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
    display: flex;
    gap: 16px;
}

.log-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.log-icon {
    flex-shrink: 0;
}

.log-info {
    flex: 1;
}

.log-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.log-content {
    flex: 1;
}

.log-content p {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.log-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    align-self: flex-start;
}

/* CTA 订阅模块 */
.navxd-update-log .footer-cta-section {
    background: linear-gradient(135deg, var(--color-gradient-1) 0%, var(--color-gradient-2) 50%, var(--color-gradient-3) 100%);
    padding: 60px 0;
    color: var(--color-card);
}

.navxd-update-log .cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navxd-update-log .cta-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.navxd-update-log .price-info {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.navxd-update-log .price-month,
.navxd-update-log .price-year {
    font-size: 20px;
    font-weight: 700;
}

.navxd-update-log .cta-btn {
    padding: 12px 24px;
    background-color: var(--color-card);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.navxd-update-log .cta-btn:hover {
    transform: translateY(-2px);
}

/* ============================================
   API数据服务页样式
   ============================================ */
.navxd-api-data {
    background-color: var(--color-bg);
}

/* Hero 区 */
.navxd-api-data .hero-section {
    background: linear-gradient(135deg, var(--color-gradient-1) 0%, var(--color-gradient-2) 50%, var(--color-gradient-3) 100%);
    padding: 60px 0;
    color: var(--color-card);
}

.navxd-api-data .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.navxd-api-data .hero-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.navxd-api-data .hero-subtitle {
    font-size: 20px;
    margin-bottom: 16px;
    opacity: 0.9;
}

.navxd-api-data .hero-description {
    font-size: 16px;
    opacity: 0.8;
    margin-bottom: 24px;
}

.navxd-api-data .hero-image img {
    width: 100%;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* 本月评分变化 */
.score-change-section {
    padding: 60px 0;
    background-color: var(--color-card);
}

.score-change-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.score-card {
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
    text-align: center;
}

.score-card .card-icon {
    margin: 0 auto 16px;
}

.score-card .card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.score-card .card-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* 数据接口示例 */
.api-example-section {
    padding: 60px 0;
    background-color: var(--color-bg);
}

.api-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.api-tabs .tab-btn {
    padding: 10px 20px;
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.api-tabs .tab-btn.active {
    background-color: var(--color-primary);
    color: var(--color-card);
    border-color: var(--color-primary);
}

.api-tabs .tab-btn:hover:not(.active) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.api-code-container {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.code-header {
    background-color: var(--color-bg);
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.code-method {
    padding: 4px 8px;
    background-color: var(--color-primary);
    color: var(--color-card);
    border-radius: var(--radius-tag);
    font-size: 12px;
    font-weight: 600;
}

.code-url {
    flex: 1;
    font-size: 14px;
    color: var(--color-text-primary);
    font-family: monospace;
}

.code-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

.code-date,
.code-serial {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.code-expand {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.code-content {
    padding: 24px;
    background-color: #f8fafc;
}

.code-content pre {
    margin: 0;
    overflow-x: auto;
}

.code-content code {
    font-family: monospace;
    font-size: 14px;
    color: var(--color-text-primary);
}

/* 字段说明 */
.field-description-section {
    padding: 60px 0;
    background-color: var(--color-card);
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.field-card {
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.field-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.field-icon {
    flex-shrink: 0;
}

.field-info {
    flex: 1;
}

.field-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.field-status {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.field-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.field-features {
    list-style: none;
    padding: 0;
    margin: 12px 0 0 0;
}

.field-features li {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 14px;
}

.field-features li:before {
    content: "✓";
    color: var(--color-trend-up);
    margin-right: 8px;
}

/* 更新频率 */
.update-frequency-section {
    padding: 60px 0;
    background-color: var(--color-bg);
}

.frequency-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.frequency-item {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.frequency-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.frequency-icon {
    flex-shrink: 0;
}

.frequency-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.frequency-update {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.frequency-footer {
    text-align: right;
}

.view-all-btn {
    padding: 10px 20px;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-all-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-card);
}

/* CTA 订阅模块 */
.navxd-api-data .footer-cta-section {
    background: linear-gradient(135deg, var(--color-gradient-1) 0%, var(--color-gradient-2) 50%, var(--color-gradient-3) 100%);
    padding: 60px 0;
    color: var(--color-card);
}

.navxd-api-data .cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navxd-api-data .cta-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.navxd-api-data .price-info {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.navxd-api-data .price-month,
.navxd-api-data .price-year {
    font-size: 20px;
    font-weight: 700;
}

.navxd-api-data .cta-btn {
    padding: 12px 24px;
    background-color: var(--color-card);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.navxd-api-data .cta-btn:hover {
    transform: translateY(-2px);
}

/* ============================================   评估方法页样式   ============================================ */
.navxd-evaluation-method {
    background-color: var(--color-bg);
}

/* Hero 区 */
.navxd-evaluation-method .hero-section {
    background: linear-gradient(135deg, var(--color-gradient-1) 0%, var(--color-gradient-2) 50%, var(--color-gradient-3) 100%);
    padding: 60px 0;
    color: var(--color-card);
}

.navxd-evaluation-method .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
}

.navxd-evaluation-method .hero-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.navxd-evaluation-method .hero-subtitle {
    font-size: 20px;
    margin-bottom: 16px;
    opacity: 0.9;
}

.navxd-evaluation-method .hero-description {
    font-size: 16px;
    opacity: 0.8;
    margin-bottom: 24px;
}

.navxd-evaluation-method .hero-image img {
    width: 100%;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* Hero 特征 */
.hero-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.feature-item {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-card);
    padding: 24px;
    text-align: center;
    backdrop-filter: blur(10px);
}

.feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    margin: 0 auto 16px;
}

.feature-text {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-card);
}

.feature-description {
    font-size: 14px;
    opacity: 0.8;
    color: var(--color-card);
}

/* 评估维度 */
.evaluation-dimensions-section {
    padding: 60px 0;
    background-color: var(--color-bg);
}

.dimensions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.dimension-card {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: transform 0.3s ease;
}

.dimension-card:hover {
    transform: translateY(-4px);
}

.dimension-icon {
    margin: 0 auto 16px;
}

.dimension-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.dimension-rating {
    color: var(--color-rank-1);
    margin-bottom: 16px;
}

.dimension-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* 数据来源与评估流程 */
.data-process-section {
    padding: 60px 0;
    background-color: var(--color-card);
}

.process-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.process-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.process-icon {
    flex-shrink: 0;
}

.process-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.process-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.process-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    padding: 16px;
    box-shadow: var(--shadow-card);
}

.process-card .card-icon {
    flex-shrink: 0;
}

.process-card .card-content {
    flex: 1;
}

.process-card .card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.process-card .card-description {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.radar-chart {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
}

/* 评分权重模型 */
.weight-model-section {
    padding: 60px 0;
    background-color: var(--color-bg);
}

.weight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.weight-card {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: transform 0.3s ease;
}

.weight-card:hover {
    transform: translateY(-4px);
}

.weight-icon {
    margin: 0 auto 16px;
}

.weight-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.weight-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* 评分权重模型详情 */
.weight-model-detail-section {
    padding: 60px 0;
    background-color: var(--color-card);
}

.weight-detail-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
}

.weight-left {
    padding-right: 32px;
}

.weight-description {
    font-size: 16px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}

.weight-btn {
    padding: 12px 24px;
    background-color: var(--color-primary);
    color: var(--color-card);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.weight-btn:hover {
    background-color: #4a5ce0;
}

.weight-right {
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
}

.weight-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 24px;
}

.weight-list {
    margin-bottom: 24px;
}

.weight-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.weight-label {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.weight-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
}

.pie-chart {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
}

/* CTA 订阅模块 */
.navxd-evaluation-method .footer-cta-section {
    background: linear-gradient(135deg, var(--color-gradient-1) 0%, var(--color-gradient-2) 50%, var(--color-gradient-3) 100%);
    padding: 60px 0;
    color: var(--color-card);
}

.navxd-evaluation-method .cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navxd-evaluation-method .cta-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.navxd-evaluation-method .price-info {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.navxd-evaluation-method .price-month,
.navxd-evaluation-method .price-year {
    font-size: 20px;
    font-weight: 700;
}

.navxd-evaluation-method .cta-btn {
    padding: 12px 24px;
    background-color: var(--color-card);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.navxd-evaluation-method .cta-btn:hover {
    transform: translateY(-2px);
}

/* ============================================   订阅Pro页样式   ============================================ */
.navxd-subscribe-pro {
    background-color: var(--color-bg);
}

/* Hero 区 */
.navxd-subscribe-pro .hero-section {
    background: linear-gradient(135deg, var(--color-gradient-1) 0%, var(--color-gradient-2) 50%, var(--color-gradient-3) 100%);
    padding: 60px 0;
    color: var(--color-card);
}

.navxd-subscribe-pro .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.navxd-subscribe-pro .hero-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.navxd-subscribe-pro .hero-subtitle {
    font-size: 24px;
    margin-bottom: 16px;
    opacity: 0.9;
}

.navxd-subscribe-pro .hero-description {
    font-size: 16px;
    opacity: 0.8;
    margin-bottom: 24px;
}

.navxd-subscribe-pro .hero-image img {
    width: 100%;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* 订阅计划对比 */
.pricing-section {
    padding: 60px 0;
    background-color: var(--color-card);
}

.pricing-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.pricing-tabs .tab-btn {
    padding: 10px 20px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pricing-tabs .tab-btn.active {
    background-color: var(--color-primary);
    color: var(--color-card);
    border-color: var(--color-primary);
}

.pricing-tabs .tab-btn:hover:not(.active) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.pricing-card {
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
    position: relative;
}

.pricing-card.pro {
    border: 2px solid var(--color-primary);
    background-color: var(--color-primary-light);
}

.pricing-card.pro .card-header {
    background-color: var(--color-primary);
    color: var(--color-card);
    padding: 16px;
    border-radius: var(--radius-card);
    margin: -32px -32px 24px -32px;
}

.card-header {
    margin-bottom: 24px;
}

.card-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.pricing-card.pro .card-title {
    color: var(--color-card);
}

.price-info {
    margin-bottom: 16px;
}

.plan-select {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    font-size: 14px;
    background-color: var(--color-card);
    cursor: pointer;
}

.price {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
    display: block;
}

.pricing-card.pro .price {
    color: var(--color-card);
}

.price-alt {
    font-size: 14px;
    color: var(--color-text-secondary);
    display: block;
    margin-top: 4px;
}

.pricing-card.pro .price-alt {
    color: rgba(255,255,255,0.8);
}

.card-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feature-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-trend-up);
    color: var(--color-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.feature-text {
    font-size: 14px;
    color: var(--color-text-primary);
}

/* 权益要点 */
.benefits-section {
    padding: 60px 0;
    background-color: var(--color-bg);
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.benefit-card {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.benefit-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.benefit-icon {
    flex-shrink: 0;
}

.benefit-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.benefit-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.benefit-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 14px;
}

.benefit-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.view-tools-btn {
    margin-top: 16px;
    padding: 10px 20px;
    background-color: var(--color-primary);
    color: var(--color-card);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.view-tools-btn:hover {
    background-color: #4a5ce0;
}

/* 订阅表单 */
.subscribe-form-section {
    padding: 60px 0;
    background-color: var(--color-card);
}

.subscribe-form {
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-header {
    flex: 1;
    margin-right: 32px;
}

.form-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.form-subtitle {
    font-size: 16px;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}

.form-note {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.form-actions {
    flex-shrink: 0;
}

.subscribe-btn {
    padding: 12px 24px;
    background-color: var(--color-primary);
    color: var(--color-card);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.subscribe-btn:hover {
    transform: translateY(-2px);
}

/* CTA 订阅模块 */
.navxd-subscribe-pro .footer-cta-section {
    background: linear-gradient(135deg, var(--color-gradient-1) 0%, var(--color-gradient-2) 50%, var(--color-gradient-3) 100%);
    padding: 60px 0;
    color: var(--color-card);
}

.navxd-subscribe-pro .cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navxd-subscribe-pro .cta-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.navxd-subscribe-pro .price-info {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.navxd-subscribe-pro .price-month,
.navxd-subscribe-pro .price-year {
    font-size: 20px;
    font-weight: 700;
}

.navxd-subscribe-pro .cta-btn {
    padding: 12px 24px;
    background-color: var(--color-card);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.navxd-subscribe-pro .cta-btn:hover {
    transform: translateY(-2px);
}

/* ============================================   赛道全景页样式   ============================================ */
.navxd-track-overview {
    background-color: var(--color-bg);
}

/* Hero 区 */
.navxd-track-overview .hero-section {
    background: linear-gradient(135deg, var(--color-gradient-1) 0%, var(--color-gradient-2) 50%, var(--color-gradient-3) 100%);
    padding: 60px 0;
    color: var(--color-card);
}

.navxd-track-overview .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.navxd-track-overview .hero-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.navxd-track-overview .hero-subtitle {
    font-size: 20px;
    margin-bottom: 16px;
    opacity: 0.9;
}

.navxd-track-overview .hero-description {
    font-size: 16px;
    opacity: 0.8;
    margin-bottom: 24px;
}

.navxd-track-overview .hero-image img {
    width: 100%;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* 图像AI发展阶段打通 */
.development-stage-section {
    padding: 60px 0;
    background-color: var(--color-card);
}

.stage-chart {
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
}

.stage-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.stage-item {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
    position: relative;
}

.stage-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.stage-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.stage-opportunity {
    background-color: var(--color-primary-light);
    border-radius: var(--radius-card);
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 16px;
}

.opportunity-icon {
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 4px;
}

.opportunity-text {
    flex: 1;
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.4;
}

/* 图像AI行业格局 */
.industry-landscape-section {
    padding: 60px 0;
    background-color: var(--color-bg);
}

.landscape-chart {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
}

.landscape-grid {
    position: relative;
    min-height: 400px;
}

.landscape-axis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.axis-label {
    font-size: 14px;
    color: var(--color-text-secondary);
    text-align: center;
}

.landscape-items {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    min-height: 200px;
}

.tool-item {
    background-color: var(--color-primary-light);
    border-radius: var(--radius-card);
    padding: 16px;
    text-align: center;
    position: relative;
}

.tool-item.top-left {
    grid-column: 1;
    grid-row: 1;
}

.tool-item.top-right {
    grid-column: 3 / span 2;
    grid-row: 1;
}

.tool-item.center {
    grid-column: 2 / span 2;
    grid-row: 2;
}

.tool-item.bottom-left {
    grid-column: 1 / span 2;
    grid-row: 3;
}

.tool-item.bottom-right {
    grid-column: 3 / span 2;
    grid-row: 3;
}

.tool-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.tool-rank {
    font-size: 14px;
    color: var(--color-primary);
    font-weight: 600;
}

.landscape-note {
    margin-top: 32px;
    font-size: 14px;
    color: var(--color-text-secondary);
    text-align: center;
    font-style: italic;
}

/* 图像AI热门工具分布图 */
.tool-distribution-section {
    padding: 60px 0;
    background-color: var(--color-card);
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.tool-card {
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    padding: 20px;
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: transform 0.3s ease;
}

.tool-card:hover {
    transform: translateY(-4px);
}

/* 推荐工具 */
.recommended-tools-section {
    padding: 60px 0;
    background-color: var(--color-bg);
}

.recommended-header {
    margin-bottom: 24px;
}

.recommended-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.recommended-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.recommended-card {
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-card);
}

.recommended-tool {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.tool-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-trend-up);
    color: var(--color-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.tool-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-item {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* CTA 订阅模块 */
.navxd-track-overview .footer-cta-section {
    background: linear-gradient(135deg, var(--color-gradient-1) 0%, var(--color-gradient-2) 50%, var(--color-gradient-3) 100%);
    padding: 60px 0;
    color: var(--color-card);
}

.navxd-track-overview .cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navxd-track-overview .cta-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.navxd-track-overview .price-info {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.navxd-track-overview .price-month,
.navxd-track-overview .price-year {
    font-size: 20px;
    font-weight: 700;
}

.navxd-track-overview .cta-btn {
    padding: 12px 24px;
    background-color: var(--color-card);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.navxd-track-overview .cta-btn:hover {
    transform: translateY(-2px);
}

/* ============================================   赛道全景页响应式设计   ============================================ */
@media (max-width: 1024px) {
    .navxd-track-overview .hero-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .landscape-axis {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .landscape-items {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tool-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .recommended-grid {
        grid-template-columns: 1fr;
    }
    
    .navxd-track-overview .cta-content {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .navxd-track-overview .hero-title {
        font-size: 32px;
    }
    
    .landscape-axis {
        grid-template-columns: 1fr;
    }
    
    .landscape-items {
        grid-template-columns: 1fr;
    }
    
    .tool-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stage-opportunity {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .recommended-card {
        padding: 24px;
    }
}

/* ============================================   评估方法页响应式设计   ============================================ */
@media (max-width: 1024px) {
    .navxd-evaluation-method .hero-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .hero-features {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dimensions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .process-content {
        grid-template-columns: 1fr;
    }
    
    .weight-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .weight-detail-content {
        grid-template-columns: 1fr;
    }
    
    .weight-left {
        padding-right: 0;
    }
    
    .navxd-evaluation-method .cta-content {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .navxd-evaluation-method .hero-title {
        font-size: 32px;
    }
    
    .hero-features {
        grid-template-columns: 1fr;
    }
    
    .dimensions-grid {
        grid-template-columns: 1fr;
    }
    
    .weight-grid {
        grid-template-columns: 1fr;
    }
    
    .dimension-card,
    .weight-card {
        padding: 24px;
    }
    
    .process-card {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}

/* ============================================   响应式设计   ============================================ */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .signals-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .trend-chart {
        padding: 24px;
    }
    
    .chart-content svg {
        width: 100%;
        height: auto;
    }
    
    .new-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .competition-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .selector-content {
        flex-direction: column;
        align-items: stretch;
    }
    
    .tool-select {
        flex-direction: row;
        align-items: center;
    }
    
    .tool-select select {
        flex: 1;
    }
    
    .comparison-cards {
        flex-direction: column;
        align-items: center;
    }
    
    .rating-grid,
    .pros-cons-grid,
    .use-case-grid {
        grid-template-columns: 1fr;
    }
    
    .dimension-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .dimension-scores {
        width: 100%;
        justify-content: space-between;
    }
    
    .cta-content {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }
    
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .top-ranking-content {
        grid-template-columns: 1fr;
    }
    
    .ranking-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .sidebar-section {
        flex: 1;
        min-width: 250px;
    }
    
    .evaluation-content {
        grid-template-columns: 1fr;
    }
    
    .recommended-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .comparison-grid,
    .deep-comparison-grid {
        grid-template-columns: 1fr;
    }
    
    /* 更新日志页响应式 */
    .stage-content {
        grid-template-columns: 1fr;
    }
    
    .adjusted-tools-grid {
        grid-template-columns: 1fr;
    }
    
    .update-log-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .log-link {
        align-self: flex-end;
    }
    
    /* API数据服务页响应式 */
    .score-change-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .field-grid {
        grid-template-columns: 1fr;
    }
    
    .code-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .code-url {
        width: 100%;
    }
    
    .frequency-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .frequency-title {
        width: 100%;
    }
    
    /* 订阅Pro页响应式 */
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .subscribe-form {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    
    .form-header {
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    .navxd-trend-report .hero-title {
        font-size: 32px;
    }
    
    .navxd-trend-report .hero-subtitle {
        font-size: 18px;
    }
    
    .signals-grid {
        grid-template-columns: 1fr;
    }
    
    .signal-card {
        padding: 24px;
    }
    
    .tool-tags {
        flex-wrap: wrap;
    }
    
    .new-tools-grid {
        grid-template-columns: 1fr;
    }
    
    .competition-grid {
        grid-template-columns: 1fr;
    }
    
    .navxd-tool-comparison .hero-title {
        font-size: 32px;
    }
    
    .navxd-tool-comparison .hero-subtitle {
        font-size: 18px;
    }
    
    .navxd-tool-comparison .tabs {
        overflow-x: auto;
    }
    
    .navxd-tool-comparison .tab-btn {
        white-space: nowrap;
    }
    
    .comparison-cards,
    .rating-section,
    .pros-cons-section,
    .core-diff-section,
    .use-case-section {
        padding: 24px;
    }
    
    .radar-chart-container svg {
        width: 300px;
        height: 300px;
    }
    
    .hero-title {
        font-size: 36px;
    }
    
    .hero-subtitle {
        font-size: 18px;
    }
    
    .hero-buttons {
        flex-wrap: wrap;
    }
    
    .section-title {
        font-size: 24px;
    }
    
    .category-grid {
        grid-template-columns: 1fr;
    }
    
    .ranking-grid {
        grid-template-columns: 1fr;
    }
    
    /* 更新日志页响应式 */
    .navxd-update-log .hero-title {
        font-size: 32px;
    }
    
    .navxd-update-log .hero-subtitle {
        font-size: 18px;
    }
    
    .tool-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .stage-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .stage-tool {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    /* API数据服务页响应式 */
    .navxd-api-data .hero-title {
        font-size: 32px;
    }
    
    .navxd-api-data .hero-subtitle {
        font-size: 18px;
    }
    
    .score-change-grid {
        grid-template-columns: 1fr;
    }
    
    .api-tabs {
        flex-direction: column;
    }
    
    .api-tabs .tab-btn {
        width: 100%;
        text-align: left;
    }
    
    /* 订阅Pro页响应式 */
    .navxd-subscribe-pro .hero-title {
        font-size: 32px;
    }
    
    .navxd-subscribe-pro .hero-subtitle {
        font-size: 18px;
    }
    
    .pricing-tabs {
        flex-direction: column;
    }
    
    .pricing-tabs .tab-btn {
        width: 100%;
        text-align: left;
    }
    
    .pricing-card {
        padding: 24px;
    }
    
    .pricing-card.pro .card-header {
        margin: -24px -24px 24px -24px;
    }
}
/* ══ 移动端导航覆盖层 ══ */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  z-index: 998;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.nav-backdrop.active { display: block; }

/* 菜单打开时锁定 body 滚动 */
html.nav-open { overflow: hidden; }

/* ══ 汉堡菜单项样式（≤1024px 生效）══ */
@media (max-width: 1024px) {
  .navxd-header { position: relative; }

  .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
    margin: 0;
    list-style: none;
  }
  .main-nav ul li a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 24px;
    font-size: 14px;
    color: var(--text2);
    border-bottom: 1px solid rgba(0,0,0,.04);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
  }
  .main-nav ul li:last-child a { border-bottom: none; }
  .main-nav ul li a:hover,
  .main-nav ul li a.active {
    color: var(--blue);
    background: rgba(59,126,246,.04);
  }
}

/* ============================================
   NavXD Footer — Dark theme redesign
   添加到 navxd-style.css 末尾
   或保存为独立文件在 functions.php 中 enqueue
   ============================================ */

/* Override existing footer styles */
.navxd-footer {
  background: #111827 !important;
  color: #9ca3af;
  padding: 0 !important;
  margin-top: 60px;
  border-top: none !important;
  display: block !important;
}

.navxd-footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 32px 32px;
}

/* Top row: brand + nav columns + subscribe */
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 2fr 1.2fr;
  gap: 40px;
  margin-bottom: 32px;
}

/* Brand area */
.footer-brand {
  display: flex;
  flex-direction: column;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 16px;
}

.footer-logo-img {
  height: 48px !important;
  width: auto;
}

.footer-tagline {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.65;
  margin: 0;
}

/* Nav columns */
.footer-nav-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav-title {
  font-size: 13px;
  font-weight: 600;
  color: #f9fafb;
  margin: 0 0 4px;
  letter-spacing: 0.3px;
}

.footer-nav-col a {
  font-size: 13px;
  color: #6b7280;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav-col a:hover {
  color: #d1d5db;
}

/* Subscribe area */
.footer-subscribe {
  display: flex;
  flex-direction: column;
}

.footer-sub-desc {
  font-size: 12px;
  color: #6b7280;
  margin: 0 0 14px;
  line-height: 1.5;
}

.footer-sub-form {
  display: flex;
  gap: 8px;
}

.footer-sub-input {
  flex: 1;
  padding: 9px 14px;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 8px;
  color: #f9fafb;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}

.footer-sub-input:focus {
  border-color: #5B6CFF;
  box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.15);
}

.footer-sub-input::placeholder {
  color: #4b5563;
}

.footer-sub-btn {
  padding: 9px 18px;
  background: linear-gradient(135deg, #5B6CFF, #8B5CF6);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  font-family: inherit;
  white-space: nowrap;
}

.footer-sub-btn:hover {
  opacity: 0.9;
}

/* 订阅反馈文字 */
.footer-sub-msg {
  font-size: 12px;
  min-height: 16px;
  margin: 6px 0 0;
  color: #9ca3af;
  line-height: 1.5;
}

/* Divider */
.footer-divider {
  height: 1px;
  background: #1f2937;
  margin-bottom: 24px;
}

/* Bottom row */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copy {
  font-size: 12px;
  color: #4b5563;
}

/* Social links */
.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social-link {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #1f2937;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: all 0.2s;
  text-decoration: none;
}

.footer-social-link:hover {
  background: #374151;
  color: #d1d5db;
}

/* Responsive */
@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-nav-group {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .navxd-footer .container {
    padding: 36px 20px 24px;
  }

  .footer-nav-group {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .footer-sub-form {
    flex-direction: column;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }
}

/* ══ 超小屏（≤480px）额外优化 ══ */
@media (max-width: 480px) {
  /* 防止任何元素触发横向滚动 */
  html, body { overflow-x: hidden; }

  /* Hero 标题 */
  .hero-title                                    { font-size: 26px !important; }
  .navxd-ranking-detail .hero-title,
  .navxd-track-overview .hero-title,
  .navxd-evaluation-method .hero-title,
  .navxd-trend-report .hero-title               { font-size: 26px !important; }

  /* 通用容器减小边距 */
  .navxd-section-container,
  .navxd-content-wrapper                        { padding-left: 12px; padding-right: 12px; }

  /* 触控目标 */
  .menu-toggle                                   { min-height: 44px; min-width: 44px; }
  .header-subscribe                              { min-height: 36px; padding: 6px 12px; }

  /* 表格横滑 */
  .comparison-table-wrap,
  .td-matrix-wrap                                { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Footer */
  .footer-nav-group                              { grid-template-columns: 1fr 1fr; }
  .navxd-footer .container                      { padding: 28px 16px 20px; }
  }

/* =============== Search Suggest =============== */
.navxd-suggest-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 1200;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.12);
  max-height: 420px;
  overflow-y: auto;
  padding: 8px;
}
.navxd-suggest-group {
  padding: 4px 0 6px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}
.navxd-suggest-group:last-child {
  border-bottom: none;
}
.navxd-suggest-group-title {
  font-size: 11px;
  font-weight: 700;
  color: #8a92a8;
  padding: 4px 8px 6px;
  letter-spacing: 0.2px;
}
.navxd-suggest-item {
  width: 100%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  padding: 9px 10px;
  color: #1f2937;
}
.navxd-suggest-item:hover,
.navxd-suggest-item.is-active {
  background: #f3f7ff;
}
.navxd-suggest-item.type-scene .navxd-suggest-item-icon { color: #3b7ef6; }
.navxd-suggest-item.type-tool .navxd-suggest-item-icon { color: #10b981; }
.navxd-suggest-item.type-question .navxd-suggest-item-icon { color: #d97706; }
.navxd-suggest-item-icon {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.navxd-suggest-item-text {
  font-size: 13px;
  line-height: 1.35;
}
.navxd-suggest-item-text mark {
  background: rgba(59, 126, 246, 0.12);
  color: #245fd1;
  border-radius: 4px;
  padding: 0 2px;
}

/* ══════════════════════════════════════════════════════════
   CTA Subscribe Banner (全局 — footer.php)
══════════════════════════════════════════════════════════ */
.fp-footer-wrap { margin-top: 40px; }
.fp-footer-wrap .navxd-footer { margin-top: 0 !important; }

.fp-subscribe-banner {
  max-width: 1100px;
  margin: 0 auto 24px;
  padding: 32px 36px;
  background: linear-gradient(135deg, #1a1f3a 0%, #111827 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 1px solid rgba(91,108,255,.12);
}
.fp-sub-left h3 {
  font-size: 18px;
  font-weight: 700;
  color: #f9fafb;
  margin: 0 0 6px;
}
.fp-sub-left p {
  font-size: 13px;
  color: #9ca3af;
  margin: 0;
  line-height: 1.6;
}
.fp-sub-perks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 20px;
  margin-top: 14px;
}
.fp-sub-perk {
  font-size: 12px;
  color: #d1d5db;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fp-perk-check {
  color: #5b6cff;
  font-weight: 700;
}
.fp-sub-right {
  text-align: center;
  flex-shrink: 0;
  min-width: 160px;
}
.fp-sub-price {
  font-size: 32px;
  font-weight: 800;
  color: #5b6cff;
}
.fp-sub-price span {
  font-size: 14px;
  color: #9ca3af;
  font-weight: 400;
}
.fp-sub-year {
  font-size: 12px;
  color: #6b7280;
  margin: 4px 0 16px;
}
.fp-sub-btn {
  display: inline-block;
  padding: 11px 28px;
  background: #5b6cff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.fp-sub-btn:hover { background: #4a5bef; color: #fff; }
.fp-sub-note {
  font-size: 11px;
  color: #6b7280;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .fp-subscribe-banner {
    flex-direction: column;
    text-align: center;
    padding: 28px 24px;
    border-radius: 12px 12px 0 0;
  }
  .fp-sub-perks { justify-items: center; }
  .fp-sub-right { width: 100%; }
}
@media (max-width: 480px) {
  .fp-subscribe-banner { padding: 24px 16px; margin: 0 16px 20px; border-radius: 12px; }
  .fp-sub-perks { grid-template-columns: 1fr; }
}