/*
 * VELN Dark Theme v3.0
 * 老机场风格 - 稳重、克制、专业
 * 紫色只用于：主CTA、Logo、选中状态
 * 其余全部灰白系
 */

:root {
    /* === 主色（蓝色系） === */
    --primary: #0066FF !important;
    --primary-dark: #0052CC !important;
    --primary-light: #3385FF !important;
    
    /* === 功能色 === */
    --success: #28A745 !important;
    --warning: #FF6600 !important;
    --danger: #ef4444 !important;
    
    /* === 深色背景（偏蓝灰，不是纯黑） === */
    --dark-bg: #0d0d14 !important;
    --dark-surface: #121219 !important;
    --dark-card: #18181f !important;
    --dark-elevated: #1e1e27 !important;
    
    /* === 边框（灰色为主） === */
    --border-default: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.15);
    
    /* === 文字（白灰系） === */
    --text-primary: #f1f5f9 !important;
    --text-secondary: #a1a1aa !important;
    --text-muted: #71717a !important;
    
    /* === 渐变（蓝色系） === */
    --gradient-primary: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
    --gradient-secondary: linear-gradient(135deg, #28A745 0%, #218838 100%) !important;
    --gradient-hero: linear-gradient(180deg, #0d0d14 0%, #121219 100%) !important;
    
    /* === 卡片样式变量（用于覆盖内联样式） === */
    --card-bg: #18181f !important;
    --card-border: rgba(255, 255, 255, 0.08) !important;
    --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    --featured-border: #FF6600 !important;
    --border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================
   基础样式
   ========================================== */

body {
    background: linear-gradient(180deg, #0d0d14 0%, #121219 100%) !important;
    color: #f1f5f9 !important;
}

/* 滚动条 - 灰色 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0d0d14; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 3px; }

::selection { background: #0066FF; color: white; }

/* ==========================================
   导航栏
   ========================================== */

.navbar {
    background: rgba(13, 13, 20, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(20px) !important;
}

.navbar.scrolled {
    background: rgba(13, 13, 20, 0.95) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Logo - 保留紫色 */
.logo span {
    background: linear-gradient(135deg, #0066FF 0%, #3385FF 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.logo-icon {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3) !important;
}

/* 导航链接 - 灰白 */
.nav-link {
    color: #a1a1aa !important;
}

.nav-link:hover {
    color: #f1f5f9 !important;
}

.nav-link::after {
    background: #f1f5f9 !important;
}

/* 导航CTA - 保留紫色 */
.nav-cta, .nav-back {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.25) !important;
}

/* ==========================================
   Hero 区域 - 降噪
   ========================================== */

.hero {
    background: linear-gradient(180deg, #0d0d14 0%, #121219 100%) !important;
}

/* 背景光晕减淡 */
.hero::before {
    background: radial-gradient(circle, rgba(0, 102, 255, 0.05) 0%, transparent 50%) !important;
}

.hero::after {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.03) 0%, transparent 50%) !important;
}

/* 徽章 - 灰色底 */
.hero-badge {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #a1a1aa !important;
}

/* 标题 - 纯白，不要紫色 */
.hero-title {
    background: none !important;
    -webkit-text-fill-color: #f1f5f9 !important;
    color: #f1f5f9 !important;
}

/* 副标题 - 灰色 */
.hero-subtitle {
    color: #a1a1aa !important;
}

/* ==========================================
   按钮系统
   ========================================== */

/* 主CTA - 紫色（唯一紫色按钮） */
.btn-primary {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.25) !important;
}

/* 次要按钮 - 灰色描边 */
.btn-secondary {
    background: transparent !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #f1f5f9 !important;
}

/* Ghost按钮 - 灰色 */
.btn-ghost {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #a1a1aa !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

/* ==========================================
   统计数字 - 白色，不要紫色
   ========================================== */

.stat-value, .stat-suffix {
    background: none !important;
    -webkit-text-fill-color: #f1f5f9 !important;
    color: #f1f5f9 !important;
}

.stat-label {
    color: #71717a !important;
}

/* ==========================================
   设备卡片 - 灰色图标
   ========================================== */

.device-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.device-card:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* 图标 - 灰白，不是紫色 */
.device-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
}

.device-card:hover .device-icon {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
    color: white !important;
}

.device-name {
    color: #f1f5f9 !important;
}


/* ==========================================
   信任区域 - 灰色系（强制覆盖）
   ========================================== */

.trust-section,
body .trust-section,
html body .trust-section {
    background: #121219 !important;
    background-color: #121219 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.trust-title,
body .trust-title {
    color: #71717a !important;
}

.trust-item,
body .trust-item,
.trust-logos .trust-item {
    background: rgba(255, 255, 255, 0.03) !important;
    background-color: rgba(24, 24, 31, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.trust-item:hover,
body .trust-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    background-color: rgba(30, 30, 39, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

.trust-item::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent) !important;
}

/* 图标 - 灰白 */
.trust-icon,
body .trust-icon,
.trust-item .trust-icon,
.trust-item i.trust-icon {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #a1a1aa !important;
    color: #a1a1aa !important;
}

.trust-text,
body .trust-text,
.trust-item .trust-text,
.trust-item span.trust-text {
    color: #f1f5f9 !important;
}

/* ==========================================
   功能区域
   ========================================== */

.features {
    background: #0d0d14 !important;
}

/* 徽章 - 灰色 */
.section-badge {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #a1a1aa !important;
}

.section-title {
    color: #f1f5f9 !important;
}

.section-subtitle {
    color: #a1a1aa !important;
}

.feature-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 顶部条 - 灰色渐变 */
.feature-card::before {
    background: linear-gradient(135deg, #3f3f46 0%, #52525b 100%) !important;
}

/* 图标 - 灰色 */
.feature-icon-wrapper {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.feature-icon-wrapper i {
    color: #f1f5f9 !important;
}

.feature-title {
    color: #f1f5f9 !important;
}

.feature-description {
    color: #a1a1aa !important;
}

/* ==========================================
   价格区域 - 重点修复
   ========================================== */

.pricing {
    background: #121219 !important;
}

/* 所有套餐卡片 - 统一深色背景 */
.pricing-card {
    background: #18181f !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.pricing-card:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Featured卡片 - 金色边框，但背景还是深色！ */
.pricing-card.featured {
    background: #18181f !important;
    border: 2px solid #f59e0b !important;
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.15) !important;
}

/* 推荐徽章 - 金色 */
.pricing-badge {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
    color: #0d0d14 !important;
}

/* 套餐名称 - 白色 */
.pricing-name {
    color: #f1f5f9 !important;
}

/* 价格 - 白色，不是紫色！ */
.pricing-price {
    color: #f1f5f9 !important;
}

.pricing-price .amount {
    color: #f1f5f9 !important;
}

.pricing-price .currency {
    color: #a1a1aa !important;
}

.pricing-price .period {
    color: #71717a !important;
}

/* 功能列表 - 白色文字，绿色勾 */
.pricing-features li {
    color: #e4e4e7 !important;
}

.pricing-features li i {
    color: #10b981 !important;
}

/* 套餐按钮 */
.pricing-card .btn,
.pricing-card .btn-primary {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
    color: white !important;
}

/* Featured卡片的按钮 - 也是紫色 */
.pricing-card.featured .btn {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
}

/* ==========================================
   评价区域
   ========================================== */

.testimonials {
    background: linear-gradient(180deg, #0d0d14 0%, #121219 100%) !important;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.testimonial-card:hover {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 引号 - 灰色 */
.testimonial-card::before {
    color: rgba(255, 255, 255, 0.05) !important;
}

.testimonial-text {
    color: #a1a1aa !important;
}

.author-name {
    color: #f1f5f9 !important;
}

.author-title {
    color: #71717a !important;
}

/* 头像 - 灰色 */
.author-avatar {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================
   FAQ区域
   ========================================== */

.faq-section {
    background: #0d0d14 !important;
}

.faq-item {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.faq-item:hover,
.faq-item.active {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.faq-question {
    color: #f1f5f9 !important;
}

.faq-answer {
    color: #a1a1aa !important;
}

.faq-title {
    color: #f1f5f9 !important;
    border-left-color: #3f3f46 !important;
}

/* ==========================================
   CTA区域
   ========================================== */

.cta-section {
    background: #121219 !important;
}

.cta-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.cta-title {
    color: #f1f5f9 !important;
}

.cta-subtitle {
    color: #a1a1aa !important;
}

/* ==========================================
   页脚
   ========================================== */

.footer {
    background: #0d0d14 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.footer-title {
    color: #f1f5f9 !important;
}

.footer-link {
    color: #a1a1aa !important;
}

.footer-link:hover {
    color: #f1f5f9 !important;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: #71717a !important;
}

.footer-domain {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #a1a1aa !important;
}

.footer-domain strong {
    color: #f1f5f9 !important;
}

.footer-copy {
    color: #71717a !important;
}

.footer-copy a {
    color: #a1a1aa !important;
}

/* ==========================================
   IPLC区域
   ========================================== */

.iplc-section {
    background: #0d0d14 !important;
}

.iplc-badge {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #a1a1aa !important;
}

.iplc-title {
    color: #f1f5f9 !important;
}

/* 高亮文字 - 白色，不是紫色 */
.iplc-title-highlight {
    background: none !important;
    -webkit-text-fill-color: #f1f5f9 !important;
    color: #f1f5f9 !important;
}

.iplc-description {
    color: #a1a1aa !important;
}

.iplc-feature-item {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.iplc-feature-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 图标 - 灰色 */
.iplc-feature-icon {
    background: rgba(255, 255, 255, 0.08) !important;
}

.iplc-feature-title {
    color: #f1f5f9 !important;
}

.iplc-feature-desc {
    color: #a1a1aa !important;
}

.canvas-wrapper {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}


/* ==========================================
   SPEEDTEST 页面
   ========================================== */

.app {
    background: linear-gradient(180deg, #0d0d14 0%, #121219 100%) !important;
}

body::before {
    background: radial-gradient(circle, rgba(0, 102, 255, 0.03) 0%, transparent 60%) !important;
}

body::after {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.02) 0%, transparent 60%) !important;
}

.header {
    background: rgba(13, 13, 20, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.btn-home {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #a1a1aa !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.btn-home:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

/* 页面标题 - 白色 */
.page-hero .page-title,
.page-title {
    background: none !important;
    -webkit-text-fill-color: #f1f5f9 !important;
    color: #f1f5f9 !important;
}

.page-subtitle {
    color: #a1a1aa !important;
}

/* 状态卡片 - 保留紫色（这是主CTA区域） */
.status-card {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
    box-shadow: 0 15px 30px rgba(0, 102, 255, 0.25) !important;
}

/* 统计卡片 */
.stats-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.stats-title {
    color: #71717a !important;
}

.stat-item .stat-value {
    color: #f1f5f9 !important;
}

.stat-item .stat-value.success {
    color: #10b981 !important;
}

.stat-item .stat-value.danger {
    color: #ef4444 !important;
}

.stat-item .stat-label {
    color: #71717a !important;
}

/* 线路面板 */
.lines-panel {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.lines-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.lines-title {
    color: #f1f5f9 !important;
}

/* 图标 - 灰色 */
.lines-title i {
    color: #a1a1aa !important;
}

.lines-count {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #a1a1aa !important;
}

/* 线路卡片 */
.line-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.line-card:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.line-card.checking {
    border-color: #0066FF !important;
    background: rgba(0, 102, 255, 0.08) !important;
}

.line-card.success {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.08) !important;
}

.line-card.failed {
    border-color: #ef4444 !important;
    opacity: 0.5;
}

.line-card.best {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
    background: rgba(16, 185, 129, 0.1) !important;
}

.line-card.best::after {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
}

.line-name {
    color: #f1f5f9 !important;
}

.line-url {
    color: #71717a !important;
}

.line-latency {
    color: #a1a1aa !important;
}

.line-latency.fast { color: #10b981 !important; }
.line-latency.medium { color: #f59e0b !important; }
.line-latency.slow { color: #ef4444 !important; }

/* 标签 - 灰色底 */
.line-tag.tag-hot {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
}

.line-tag.tag-stable {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #a1a1aa !important;
}

.line-indicator {
    background: #52525b !important;
}

.line-indicator.checking { background: #0066FF !important; }
.line-indicator.success { background: #10b981 !important; }
.line-indicator.failed { background: #ef4444 !important; }

/* Toast */
.toast {
    background: #18181f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

.toast.success { background: #10b981 !important; border-color: #10b981 !important; }
.toast.error { background: #ef4444 !important; border-color: #ef4444 !important; }

/* ==========================================
   TUTORIALS 页面
   ========================================== */

.main-content {
    background: linear-gradient(180deg, #0d0d14 0%, #121219 100%) !important;
}

/* 页面头部 */
.page-header .page-badge {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #a1a1aa !important;
}

.page-header .page-title {
    background: none !important;
    -webkit-text-fill-color: #f1f5f9 !important;
    color: #f1f5f9 !important;
}

.page-header .page-subtitle {
    color: #a1a1aa !important;
}

/* 页面图标 - 保留紫色（品牌识别） */
.page-icon {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
    box-shadow: 0 15px 30px rgba(0, 102, 255, 0.2) !important;
}

.page-notice {
    background: rgba(245, 158, 11, 0.08) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    color: #fbbf24 !important;
}

/* 区域标题 */
.section-header .section-title {
    color: #f1f5f9 !important;
}

.section-header .section-title::after {
    background: #3f3f46 !important;
}

.section-header .section-subtitle {
    color: #a1a1aa !important;
}

.section-notice {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    color: #f87171 !important;
}

/* 下载区域 */
.download-section {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.download-section::before {
    background: #3f3f46 !important;
}

/* 下载按钮 - 主CTA紫色 */
.download-btn-compact {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.2) !important;
}

.download-btn-compact.recommended::before {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
}

/* 客户端卡片 */
.client-simple-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.client-simple-card:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.client-simple-card.recommended {
    border: 2px solid #f59e0b !important;
}

.recommend-badge {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
}

/* 图标 - 灰色 */
.client-simple-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.client-simple-icon i {
    color: #f1f5f9 !important;
}

.client-simple-text h3 {
    color: #f1f5f9 !important;
}

.client-simple-text p {
    color: #71717a !important;
}

/* 客户端按钮 - 主CTA紫色 */
.client-simple-btn {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
    color: white !important;
}

.client-simple-btn.secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #a1a1aa !important;
}

.client-simple-btn.tutorial-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

/* 快速步骤 */
.quick-steps {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.quick-steps-title {
    color: #a1a1aa !important;
}

.step-flow-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
}

.step-flow-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.step-arrow {
    color: #52525b !important;
}

/* 功能卡片 */
.feature-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.feature-card:hover {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.feature-title {
    color: #f1f5f9 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.feature-desc {
    color: #a1a1aa !important;
}

/* 徽章 - 灰色系 */
.feature-badge.rule {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.feature-badge.global {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

.feature-badge.direct {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #a1a1aa !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.tip-item {
    color: #a1a1aa !important;
}

.tip-item i {
    color: #71717a !important;
}

.streaming-tag {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #a1a1aa !important;
}

.feature-note {
    color: #71717a !important;
}

.feature-item p {
    color: #a1a1aa !important;
}

/* 弹窗 */
.turnstile-modal,
.device-modal {
    background: rgba(0, 0, 0, 0.8) !important;
}

.turnstile-content,
.device-modal-content {
    background: #18181f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.turnstile-icon,
.device-modal-icon {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
}

.turnstile-title,
.device-modal-title {
    color: #f1f5f9 !important;
}

.turnstile-desc {
    color: #a1a1aa !important;
}

.turnstile-close,
.device-modal-close {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #a1a1aa !important;
}

.device-modal-btn {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
}

.device-modal-btn.secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #a1a1aa !important;
}


/* ==========================================
   APPLE.HTML 页面
   ========================================== */

/* 警告框 */
.alert {
    background: rgba(255, 255, 255, 0.02) !important;
}

.alert-info {
    background: rgba(0, 102, 255, 0.06) !important;
    border-left: 4px solid #0066FF !important;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.06) !important;
    border-left: 4px solid #f59e0b !important;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.06) !important;
    border-left: 4px solid #ef4444 !important;
}

.alert-info .alert-icon { background: #0066FF !important; }
.alert-warning .alert-icon { background: #f59e0b !important; }
.alert-danger .alert-icon { background: #ef4444 !important; }

.alert-info .alert-title { color: #3385FF !important; }
.alert-warning .alert-title { color: #fbbf24 !important; }
.alert-danger .alert-title { color: #f87171 !important; }

.alert-content {
    color: #a1a1aa !important;
}

.alert-content p {
    color: #a1a1aa !important;
}

.alert-content strong {
    color: #f1f5f9 !important;
}

/* 选项卡片 */
.option-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.option-card:hover {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.option-card::before {
    background: #3f3f46 !important;
}

/* 图标 - 灰色 */
.option-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.option-icon i {
    color: #f1f5f9 !important;
}

.option-title {
    color: #f1f5f9 !important;
}

.option-desc {
    color: #a1a1aa !important;
}

.feature-list li {
    color: #e4e4e7 !important;
}

.feature-list li::before {
    background: #10b981 !important;
}

/* 返回按钮 */
.back-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ==========================================
   HUOJIAN & DINGYUE 教程页面
   ========================================== */

/* 教程卡片 */
.instruction-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.instruction-card::before {
    background: #3f3f46 !important;
}

.card-title {
    color: #f1f5f9 !important;
}

/* 图标 - 灰色 */
.card-title i {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
}

.card-content {
    color: #a1a1aa !important;
}

.card-content p {
    color: #a1a1aa !important;
}

.card-content strong {
    color: #f1f5f9 !important;
}

.card-content h4 {
    color: #f1f5f9 !important;
}

.card-content li {
    color: #a1a1aa !important;
}

.card-content a {
    color: #3385FF !important;
}

/* 高亮 */
.highlight {
    background: rgba(0, 102, 255, 0.15) !important;
    color: #3385FF !important;
}

.highlight-box {
    background: rgba(245, 158, 11, 0.08) !important;
    border-left: 4px solid #f59e0b !important;
    color: #a1a1aa !important;
}

/* API区域 */
.api-section {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.api-result {
    background: #18181f !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 账号卡片 */
.account-item {
    background: #18181f !important;
    border-left: 4px solid #0066FF !important;
}

.account-info strong {
    color: #3385FF !important;
}

.account-info span {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px dashed rgba(255, 255, 255, 0.15) !important;
    color: #f1f5f9 !important;
}

.account-hint {
    color: #71717a !important;
}

/* 状态徽章 */
.status-active {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

.status-inactive {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

/* 按钮组 - 主CTA紫色 */
.btn-group .btn {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
    color: white !important;
}

.btn-group .btn-secondary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.btn-group .btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #0d0d14 !important;
}

/* 教程图片 */
.tutorial-image,
.instruction-image {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 图片查看器 */
.image-viewer-overlay {
    background: rgba(0, 0, 0, 0.95) !important;
}

/* 警告文本 */
.warning-text {
    color: #f87171 !important;
}

/* 问题解决区 */
.troubleshooting {
    background: rgba(239, 68, 68, 0.05) !important;
    border-left: 4px solid #ef4444 !important;
}

.troubleshooting h3 {
    color: #f87171 !important;
}

.troubleshooting-title {
    color: #f1f5f9 !important;
}

.troubleshooting-title span {
    background: #0066FF !important;
}

.troubleshooting p,
.troubleshooting li {
    color: #a1a1aa !important;
}

/* 模态框 */
.modal-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
}

.modal-content {
    background: #18181f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.modal-title {
    color: #f1f5f9 !important;
}

.modal-close {
    color: #71717a !important;
}

.modal-body {
    color: #a1a1aa !important;
}

.modal-body strong {
    color: #f1f5f9 !important;
}

.modal-body h4 {
    color: #f1f5f9 !important;
}

/* 加载器 */
.loader {
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-top-color: #0066FF !important;
}

/* 教程网格文字 */
.tutorial-grid p {
    color: #a1a1aa !important;
}

/* ==========================================
   通用元素
   ========================================== */

a {
    color: #a1a1aa;
}

a:hover {
    color: #f1f5f9;
}

hr {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

code, pre {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #a1a1aa !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

input, textarea, select {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

input:focus, textarea:focus, select:focus {
    border-color: #0066FF !important;
    box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.15) !important;
}

input::placeholder, textarea::placeholder {
    color: #71717a !important;
}

/* 移动端菜单 */
.mobile-toggle {
    color: #f1f5f9 !important;
}

@media (max-width: 768px) {
    .nav-menu {
        background: rgba(13, 13, 20, 0.98) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    
    .nav-link {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    
    /* 信任区域 - 紧凑横向布局 */
    .trust-section {
        padding: 2rem 1rem !important;
    }
    
    .trust-title {
        font-size: 0.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    .trust-logos {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        padding: 0 !important;
    }
    
    .trust-item {
        padding: 0.5rem 1rem !important;
        min-height: auto !important;
        flex-direction: row !important;
        gap: 0 !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* 移动端隐藏图标 */
    .trust-icon {
        display: none !important;
    }
    
    .trust-text {
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        text-align: center !important;
    }
    
    /* 功能卡片 - 更紧凑 */
    .features {
        padding: 3rem 1rem !important;
    }
    
    .features-grid {
        gap: 0.75rem !important;
    }
    
    .feature-card {
        padding: 1.25rem 1rem !important;
        min-height: 100px !important;
        border-radius: 12px !important;
    }
    
    .feature-icon-wrapper {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 0.75rem !important;
        border-radius: 10px !important;
    }
    
    .feature-icon-wrapper i {
        font-size: 1.25rem !important;
    }
    
    .feature-title {
        font-size: 0.9rem !important;
    }
}

/* 粒子背景减淡 */
.particle {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent) !important;
}


/* ==========================================
   价格卡片 - 强制覆盖所有内联样式
   ========================================== */

/* 所有套餐卡片统一深色背景 */
.pricing-card,
.pricing-card.featured,
div.pricing-card,
div.pricing-card.featured {
    background: #18181f !important;
    color: #f1f5f9 !important;
}

/* 套餐名称 - 白色 */
.pricing-name,
.pricing-card .pricing-name,
.pricing-card.featured .pricing-name {
    color: #f1f5f9 !important;
}

/* 价格 - 白色 */
.pricing-price,
.pricing-price span,
.pricing-card .pricing-price,
.pricing-card .pricing-price span,
.pricing-card.featured .pricing-price,
.pricing-card.featured .pricing-price span {
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9 !important;
}

/* 货币符号 */
.pricing-currency,
.pricing-card .pricing-currency,
.pricing-card.featured .pricing-currency {
    color: #a1a1aa !important;
}

/* 周期 */
.pricing-period,
.pricing-card .pricing-period,
.pricing-card.featured .pricing-period {
    color: #71717a !important;
}

/* 功能列表边框 */
.pricing-features,
.pricing-card .pricing-features,
.pricing-card.featured .pricing-features {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 功能列表文字 - 确保可见 */
.pricing-feature,
.pricing-card .pricing-feature,
.pricing-card.featured .pricing-feature {
    color: #e4e4e7 !important;
}

/* 功能列表勾选图标 */
.pricing-feature i,
.pricing-card .pricing-feature i,
.pricing-card.featured .pricing-feature i {
    color: #10b981 !important;
}

/* Featured卡片边框 - 金色 */
.pricing-card.featured {
    border: 2px solid #f59e0b !important;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.12) !important;
}

/* 所有套餐按钮统一紫色 */
.pricing-cta,
.pricing-card .pricing-cta,
.pricing-card.featured .pricing-cta {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
    color: white !important;
    border: none !important;
}

.pricing-cta:hover,
.pricing-card .pricing-cta:hover,
.pricing-card.featured .pricing-cta:hover {
    box-shadow: 0 8px 25px rgba(0, 102, 255, 0.35) !important;
}

/* 推荐徽章 */
.pricing-badge {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
    color: #0d0d14 !important;
}

/* ==========================================
   手机端价格卡片 - 强制覆盖
   ========================================== */

@media (max-width: 768px) {
    .pricing-card,
    .pricing-card.featured,
    div.pricing-card,
    div.pricing-card.featured {
        background: #18181f !important;
        color: #f1f5f9 !important;
    }
    
    .pricing-name,
    .pricing-card .pricing-name,
    .pricing-card.featured .pricing-name {
        color: #f1f5f9 !important;
    }
    
    .pricing-price,
    .pricing-price span,
    .pricing-card .pricing-price,
    .pricing-card .pricing-price span,
    .pricing-card.featured .pricing-price,
    .pricing-card.featured .pricing-price span {
        color: #f1f5f9 !important;
        -webkit-text-fill-color: #f1f5f9 !important;
    }
    
    .pricing-period,
    .pricing-card .pricing-period,
    .pricing-card.featured .pricing-period {
        color: #71717a !important;
    }
    
    .pricing-features,
    .pricing-card .pricing-features,
    .pricing-card.featured .pricing-features {
        border-color: rgba(255, 255, 255, 0.08) !important;
    }
    
    .pricing-feature,
    .pricing-card .pricing-feature,
    .pricing-card.featured .pricing-feature {
        color: #e4e4e7 !important;
    }
    
    .pricing-feature i,
    .pricing-card .pricing-feature i,
    .pricing-card.featured .pricing-feature i {
        color: #10b981 !important;
    }
    
    .pricing-cta,
    .pricing-card .pricing-cta,
    .pricing-card.featured .pricing-cta {
        background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
        color: white !important;
    }
}

@media (max-width: 480px) {
    .pricing-card,
    .pricing-card.featured {
        background: #18181f !important;
        color: #f1f5f9 !important;
    }
    
    .pricing-card .pricing-name,
    .pricing-card.featured .pricing-name {
        color: #f1f5f9 !important;
    }
    
    .pricing-card .pricing-price,
    .pricing-card .pricing-price span,
    .pricing-card.featured .pricing-price,
    .pricing-card.featured .pricing-price span {
        color: #f1f5f9 !important;
        -webkit-text-fill-color: #f1f5f9 !important;
    }
    
    .pricing-card .pricing-feature,
    .pricing-card.featured .pricing-feature {
        color: #e4e4e7 !important;
    }
}


/* ==========================================
   手机端价格卡片 - 最高优先级强制覆盖
   ========================================== */

@media screen and (max-width: 768px) {
    /* 强制所有卡片深色背景 */
    .pricing .pricing-card.featured,
    .pricing-grid .pricing-card.featured,
    section.pricing .pricing-card.featured,
    body .pricing-card.featured {
        background: #18181f !important;
        background-color: #18181f !important;
        color: #f1f5f9 !important;
    }
    
    /* 强制价格白色 */
    .pricing-card.featured .pricing-price,
    .pricing-card.featured .pricing-price span,
    .pricing-card.featured .pricing-price .pricing-currency,
    body .pricing-card.featured .pricing-price,
    body .pricing-card.featured .pricing-price span {
        color: #f1f5f9 !important;
        -webkit-text-fill-color: #f1f5f9 !important;
    }
    
    /* 强制套餐名白色 */
    .pricing-card.featured .pricing-name,
    body .pricing-card.featured .pricing-name {
        color: #f1f5f9 !important;
    }
    
    /* 强制周期灰色 */
    .pricing-card.featured .pricing-period,
    body .pricing-card.featured .pricing-period {
        color: #71717a !important;
    }
    
    /* 强制功能列表白色 */
    .pricing-card.featured .pricing-feature,
    .pricing-card.featured .pricing-features li,
    body .pricing-card.featured .pricing-feature {
        color: #e4e4e7 !important;
    }
    
    /* 强制勾选图标绿色 */
    .pricing-card.featured .pricing-feature i,
    body .pricing-card.featured .pricing-feature i {
        color: #10b981 !important;
    }
    
    /* 强制边框颜色 */
    .pricing-card.featured .pricing-features,
    body .pricing-card.featured .pricing-features {
        border-color: rgba(255, 255, 255, 0.08) !important;
    }
    
    /* 强制按钮紫色 */
    .pricing-card.featured .pricing-cta,
    body .pricing-card.featured .pricing-cta {
        background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%) !important;
        color: white !important;
    }
}

@media screen and (max-width: 480px) {
    .pricing-card.featured,
    body .pricing-card.featured,
    html body .pricing-card.featured {
        background: #18181f !important;
        background-color: #18181f !important;
        color: #f1f5f9 !important;
    }
    
    .pricing-card.featured .pricing-price,
    .pricing-card.featured .pricing-price span,
    html body .pricing-card.featured .pricing-price,
    html body .pricing-card.featured .pricing-price span {
        color: #f1f5f9 !important;
        -webkit-text-fill-color: #f1f5f9 !important;
    }
    
    .pricing-card.featured .pricing-name,
    html body .pricing-card.featured .pricing-name {
        color: #f1f5f9 !important;
    }
    
    .pricing-card.featured .pricing-feature,
    html body .pricing-card.featured .pricing-feature {
        color: #e4e4e7 !important;
    }
}


/* ==========================================
   IPLC区域 - 修复背景 + 新设计（强制覆盖）
   ========================================== */

.iplc-section,
body .iplc-section,
html body .iplc-section {
    background: #0d0d14 !important;
    background-color: #0d0d14 !important;
    padding: 100px 2rem;
}

.iplc-section::before {
    background: radial-gradient(circle at 20% 30%, rgba(0, 102, 255, 0.05) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(16, 185, 129, 0.03) 0%, transparent 40%) !important;
}

/* 新的统计卡片网格 */
.iplc-stats-grid,
body .iplc-stats-grid,
.iplc-visual .iplc-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.iplc-stat-card,
body .iplc-stat-card,
.iplc-stats-grid .iplc-stat-card {
    background: rgba(24, 24, 31, 0.9) !important;
    background-color: #18181f !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.iplc-stat-card:hover,
body .iplc-stat-card:hover {
    background: rgba(30, 30, 39, 0.95) !important;
    background-color: #1e1e27 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-4px);
}

.iplc-stat-icon,
body .iplc-stat-icon,
.iplc-stat-card .iplc-stat-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 1rem;
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iplc-stat-icon i,
body .iplc-stat-icon i {
    font-size: 1.5rem;
    color: #a1a1aa !important;
}

.iplc-stat-value,
body .iplc-stat-value,
.iplc-stat-card .iplc-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: #f1f5f9 !important;
    margin-bottom: 0.25rem;
}

.iplc-stat-label,
body .iplc-stat-label,
.iplc-stat-card .iplc-stat-label {
    font-size: 0.875rem;
    color: #71717a !important;
}

/* 隐藏旧的canvas */
.canvas-wrapper,
#iepl-canvas {
    display: none !important;
}

@media (max-width: 768px) {
    .iplc-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .iplc-stat-card {
        padding: 1.5rem 1rem;
    }
    
    .iplc-stat-value {
        font-size: 1.5rem;
    }
}