/* ═══════════════════════════════════════════════
   样式设计风格主题覆盖 - Tencent Design System
   基于 TDesign 色彩体系 + 蓝品牌色
═══════════════════════════════════════════════ */
:root {
  /* ── 品牌色 ── */
  --accent-primary: #0052D9;
  --accent-secondary: #366EF4;
  --gradient-accent: linear-gradient(135deg, #0052D9 0%, #366EF4 50%, #00A870 100%);
  --gradient-text: linear-gradient(135deg, #FFFFFF 0%, #0052D9 50%, #00A870 100%);

  /* ── 功能色（TDesign 规范） ── */
  --color-success: #00A870;
  --color-warning: #ED7B2F;
  --color-error: #E34D59;
  --color-processing: #0052D9;
  --color-idle: #4A5280;

  /* ── 背景（腾讯深蓝灰） ── */
  --bg-base: #0B0E15;
  --bg-card: #141822;
  --bg-card-hover: #1A2030;
  --bg-overlay: rgba(11, 14, 21, 0.94);

  /* ── 边框 ── */
  --border-default: rgba(45, 55, 75, 0.6);
  --border-subtle: rgba(45, 55, 75, 0.3);
  --border-strong: rgba(0, 82, 217, 0.5);

  /* ── 文字 ── */
  --text-primary: #E7ECF3;
  --text-secondary: #A3B1C6;
  --text-muted: #6C7A92;
  --text-code: #366EF4;

  /* ── 知识层颜色 ── */
  --knowledge-brand: #366EF4;
  --knowledge-rule: #E34D59;
  --knowledge-platform: #00A870;
  --knowledge-memory: #2BA471;
  --knowledge-trend: #ED7B2F;

  /* ── 架构层颜色 ── */
  --layer-ui: #0052D9;
  --layer-meta: #7C4DFF;
  --layer-biz: #ED7B2F;
  --layer-infra: #00A870;

  /* ── 阶段色板（腾讯/TDesign 延展色） ── */
  --phase-0: #0052D9;
  --phase-1: #366EF4;
  --phase-2: #00A870;
  --phase-3: #2BA471;
  --phase-4: #7C4DFF;
  --phase-5: #ED7B2F;
  --phase-6: #E34D59;
  --phase-7: #0594FA;
  --phase-8: #AB47BC;
  --phase-9: #5C6BC0;
}

/* ── 全局字体 ── */
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Helvetica Neue", Arial, sans-serif !important;
  background: #0A0E14 !important;
  color: var(--text-primary);
}

/* ── 导航栏 ── */
#global-nav {
  background: rgba(13, 17, 23, 0.92) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(0, 82, 217, 0.15) !important;
}

.nav-brand .brand-logo {
  background: linear-gradient(135deg, #0052D9, #00C853) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.nav-btn.active {
  color: #0052D9 !important;
  border-color: #0052D9 !important;
  background: rgba(0, 82, 217, 0.08) !important;
}

.nav-btn:hover {
  color: #2B7DE9 !important;
  background: rgba(0, 82, 217, 0.06) !important;
}

/* ── Hero 区域 ── */
.hero-section h1 {
  background: linear-gradient(135deg, #E8EAED 0%, #0052D9 50%, #00C853 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.btn-primary-lg {
  background: linear-gradient(135deg, #0052D9, #2B7DE9) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0, 82, 217, 0.3) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

.btn-primary-lg:hover {
  box-shadow: 0 6px 24px rgba(0, 82, 217, 0.45) !important;
  transform: translateY(-1px);
}

.btn-secondary {
  border: 1px solid rgba(0, 82, 217, 0.4) !important;
  color: #2B7DE9 !important;
  border-radius: 8px !important;
}

/* ── KPI 卡片 ── */
.kpi-card {
  border: 1px solid rgba(0, 82, 217, 0.12) !important;
  background: rgba(0, 82, 217, 0.04) !important;
  border-radius: 12px !important;
}

.kpi-value {
  color: #0052D9 !important;
}

/* ── 痛点卡片 ── */
.pain-card {
  border: 1px solid rgba(48, 54, 61, 0.6) !important;
  background: rgba(22, 27, 34, 0.8) !important;
  border-radius: 12px !important;
}

.pain-card:hover {
  border-color: rgba(0, 82, 217, 0.4) !important;
  box-shadow: 0 8px 32px rgba(0, 82, 217, 0.12) !important;
}

/* ── 护城河卡片 ── */
.moat-card {
  border: 1px solid rgba(48, 54, 61, 0.6) !important;
  background: rgba(22, 27, 34, 0.85) !important;
  border-radius: 12px !important;
}

.moat-card:hover {
  border-color: rgba(0, 200, 83, 0.3) !important;
}

.moat-tag {
  background: rgba(0, 82, 217, 0.12) !important;
  color: #2B7DE9 !important;
  border-radius: 6px !important;
}

/* ── 阶段卡片 ── */
.phase-item {
  border: 1px solid rgba(48, 54, 61, 0.5) !important;
  background: rgba(22, 27, 34, 0.7) !important;
  border-radius: 10px !important;
}

.phase-item:hover {
  border-color: var(--pc, #0052D9) !important;
  box-shadow: 0 4px 20px rgba(0, 82, 217, 0.15) !important;
}

/* ── Dashboard 卡片 ── */
.hero-dashboard-card {
  background: rgba(22, 27, 34, 0.95) !important;
  border: 1px solid rgba(0, 82, 217, 0.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4) !important;
}

/* ── ROI 区域 ── */
.roi-m-val.good {
  color: #00C853 !important;
}

.roi-m-val.bad {
  color: #E34D59 !important;
}

/* ── 驾驶舱 ── */
.ov2-header {
  background: rgba(13, 17, 23, 0.9) !important;
  border-bottom: 1px solid rgba(0, 82, 217, 0.12) !important;
}

.ov2-panel {
  background: rgba(22, 27, 34, 0.9) !important;
  border: 1px solid rgba(48, 54, 61, 0.5) !important;
  border-radius: 12px !important;
}

.ov2-mid-card {
  background: rgba(22, 27, 34, 0.85) !important;
  border: 1px solid rgba(48, 54, 61, 0.5) !important;
  border-radius: 12px !important;
}

.ov2-live-badge {
  color: #00C853 !important;
}

/* ── 背景光效 ── */
#bg-glow {
  background: radial-gradient(ellipse at 50% 20%, rgba(0, 82, 217, 0.06) 0%, transparent 60%) !important;
}

#bg-grid {
  opacity: 0.3 !important;
}

/* ── 状态指示 ── */
.status-dot.green {
  background: #00C853 !important;
  box-shadow: 0 0 6px #00C853 !important;
}

.ov2-sdot--green {
  background: #00C853 !important;
}

.ov2-stag--green {
  color: #00C853 !important;
  background: rgba(0, 200, 83, 0.1) !important;
}

.ov2-sdot--yellow {
  background: #FF9800 !important;
}

.ov2-stag--yellow {
  color: #FF9800 !important;
  background: rgba(255, 152, 0, 0.1) !important;
}

/* ── 进度条 ── */
.ov2-perf-bar {
  border-radius: 3px !important;
}

/* ── 品牌信任墙 ── */
.logo-wall {
  background: rgba(13, 17, 23, 0.6) !important;
}

.logo-wall-title {
  color: var(--text-secondary) !important;
}

/* ── 滚动条 ── */
::-webkit-scrollbar-thumb {
  background: rgba(0, 82, 217, 0.3) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 82, 217, 0.5) !important;
}

/* ── 阶段详情页 ── */
.phase-header {
  background: rgba(13, 17, 23, 0.95) !important;
  border-bottom: 1px solid rgba(0, 82, 217, 0.12) !important;
}

.back-btn {
  color: #2B7DE9 !important;
}

.back-btn:hover {
  background: rgba(0, 82, 217, 0.08) !important;
}

/* ── 时间轴 ── */
.tl-step.state-active .tl-dot {
  background: #0052D9 !important;
  box-shadow: 0 0 8px rgba(0, 82, 217, 0.5) !important;
}

.tl-step.state-completed .tl-dot {
  background: #00C853 !important;
}

/* ── 命令面板 ── */
#cmd-panel {
  background: rgba(22, 27, 34, 0.98) !important;
  border: 1px solid rgba(0, 82, 217, 0.2) !important;
  border-radius: 12px !important;
}

#cmd-input {
  background: rgba(13, 17, 23, 0.8) !important;
  border: 1px solid rgba(48, 54, 61, 0.6) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
}

.cmd-item:hover {
  background: rgba(0, 82, 217, 0.1) !important;
}

/* ── Landing badge ── */
.landing-badge {
  background: rgba(0, 82, 217, 0.1) !important;
  border: 1px solid rgba(0, 82, 217, 0.25) !important;
  color: #2B7DE9 !important;
  border-radius: 20px !important;
}

/* ── Section headers ── */
.section-header h2 {
  color: var(--text-primary) !important;
}

.section-summary {
  color: var(--text-muted) !important;
}

/* ── 架构卡片 ── */
.arch-card {
  background: rgba(22, 27, 34, 0.8) !important;
  border: 1px solid rgba(48, 54, 61, 0.5) !important;
  border-radius: 12px !important;
}

.arch-card:hover {
  border-color: rgba(0, 82, 217, 0.3) !important;
}

/* ── 粒子颜色 ── */
.bg-particle {
  box-shadow: 0 0 6px #0052D9 !important;
}

/* ── Nebula 光效 ── */
#bg-nebula {
  background: radial-gradient(ellipse at 30% 40%, rgba(0, 82, 217, 0.04) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 60%, rgba(0, 168, 112, 0.03) 0%, transparent 50%) !important;
}

/* ── ROI 比较区 ── */
.roi-col.after {
  border-color: rgba(0, 82, 217, 0.3) !important;
}

.roi-kpi-val {
  font-weight: 700 !important;
}

.roi-col-title {
  color: var(--text-secondary) !important;
}

/* ── Hero subtitle ── */
.hero-subtitle {
  color: var(--text-secondary) !important;
}

/* ── 痛点方案覆盖 ── */
.pain-solution-overlay {
  background: rgba(0, 82, 217, 0.95) !important;
  color: #fff !important;
  border-radius: 12px !important;
}

.pain-solution {
  color: #0052D9 !important;
}

/* ── 飞轮中心 ── */
.ov2-fw-caption {
  color: var(--text-muted) !important;
}

.ov2-fw-dot {
  background: #00A870 !important;
  box-shadow: 0 0 6px rgba(0, 168, 112, 0.6) !important;
}

/* ── 左面板 ROI ── */
.ov2-roi-tag {
  font-weight: 600 !important;
}

/* ── 品牌版本号 ── */
.brand-version {
  color: #0052D9 !important;
  border-color: rgba(0, 82, 217, 0.3) !important;
}

/* ── 导航状态 ── */
.nav-status {
  color: var(--text-secondary) !important;
}

/* ── 阶段进度流线 ── */
.phases-flow-line {
  background: linear-gradient(90deg, #0052D9, #00A870) !important;
}

.phases-flow-dot {
  background: #0052D9 !important;
  box-shadow: 0 0 8px rgba(0, 82, 217, 0.6) !important;
}

/* ── 底部阶段条 ── */
.ov2-phases-label {
  color: var(--text-muted) !important;
}

/* ── 入口卡片 ── */
.ov2-entry:hover {
  background: rgba(0, 82, 217, 0.08) !important;
  border-color: rgba(0, 82, 217, 0.3) !important;
}

.ov2-entry-arr {
  color: #0052D9 !important;
}

/* ── 分割线 ── */
.ov2-divider {
  border-color: rgba(45, 55, 75, 0.4) !important;
}

/* ── dash 仪表板 ── */
.dash-header {
  border-bottom: 1px solid rgba(0, 82, 217, 0.1) !important;
}

.dash-dot {
  background: #00A870 !important;
  box-shadow: 0 0 4px rgba(0, 168, 112, 0.6) !important;
}

.dash-version {
  color: #0052D9 !important;
}

.dash-act-dot.green {
  background: #00A870 !important;
}

.dash-act-dot.blue {
  background: #0052D9 !important;
}

/* ── 最终 CTA ── */
.final-cta h2 {
  color: var(--text-primary) !important;
}

.final-cta p {
  color: var(--text-secondary) !important;
}

/* ── auth gate 登录页 ── */
.auth-gate-panel {
  background: rgba(20, 24, 34, 0.98) !important;
  border: 1px solid rgba(0, 82, 217, 0.2) !important;
  border-radius: 16px !important;
}

.auth-gate-btn {
  background: linear-gradient(135deg, #0052D9, #366EF4) !important;
  border: none !important;
  border-radius: 8px !important;
}

/* ── 全局选中色 ── */
::selection {
  background: rgba(0, 82, 217, 0.3) !important;
  color: #fff !important;
}

/* ── 活动面板 ── */
#activity-panel {
  background: rgba(20, 24, 34, 0.95) !important;
  border: 1px solid rgba(45, 55, 75, 0.5) !important;
  border-radius: 12px !important;
}

/* ── Toast 通知 ── */
.toast {
  background: rgba(20, 24, 34, 0.98) !important;
  border: 1px solid rgba(0, 82, 217, 0.2) !important;
  border-radius: 8px !important;
}

/* ── 自动演示控制条 ── */
#auto-demo-bar {
  background: rgba(11, 14, 21, 0.96) !important;
  border-top: 1px solid rgba(0, 82, 217, 0.15) !important;
}

.tts-btn.primary {
  background: #0052D9 !important;
  color: #fff !important;
}

/* ── 管线瀑布图 ── */
#waterfall-overlay {
  background: rgba(20, 24, 34, 0.98) !important;
  border: 1px solid rgba(0, 82, 217, 0.15) !important;
  border-radius: 12px !important;
}

/* ═══════════════════════════════════════════════
   腾讯布局体系 - 间距/圆角/图标/排版
═══════════════════════════════════════════════ */

/* ── 全局圆角统一（TDesign 标准 8/12/16） ── */
.kpi-card, .pain-card, .moat-card, .arch-card,
.ov2-panel, .ov2-mid-card, .phase-item {
  border-radius: 12px !important;
}

.btn-primary-lg, .btn-secondary, .nav-btn,
.landing-badge, .moat-tag {
  border-radius: 8px !important;
}

.hero-dashboard-card, #cmd-panel, .auth-gate-panel {
  border-radius: 16px !important;
}

/* ── 间距加大（腾讯宽松风格） ── */
.pain-grid {
  gap: 24px !important;
}

.moat-grid {
  gap: 24px !important;
}

.phases-grid {
  gap: 16px !important;
}

.arch-grid {
  gap: 24px !important;
}

.hero-kpi-row {
  gap: 20px !important;
}

/* ── 卡片内边距加大 ── */
.pain-card, .moat-card, .arch-card {
  padding: 28px 24px !important;
}

.kpi-card {
  padding: 20px 16px !important;
}

.phase-item {
  padding: 20px 16px !important;
}

/* ── 图标风格：腾讯简洁线性风 ── */
.pain-icon, .moat-icon, .arch-icon {
  font-size: 32px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  background: rgba(0, 82, 217, 0.08) !important;
}

.moat-icon {
  background: rgba(0, 168, 112, 0.08) !important;
}

.arch-icon {
  background: rgba(54, 110, 244, 0.08) !important;
}

/* ── 导航图标按钮 ── */
.nav-icon-btn {
  border-radius: 8px !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 14px !important;
  border: 1px solid rgba(45, 55, 75, 0.5) !important;
  background: rgba(20, 24, 34, 0.6) !important;
}

.nav-icon-btn:hover {
  background: rgba(0, 82, 217, 0.1) !important;
  border-color: rgba(0, 82, 217, 0.3) !important;
}

/* ── 导航按钮布局 ── */
.nav-btn {
  padding: 6px 14px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
}

/* ── Hero 布局宽松 ── */
.hero-section {
  padding: 120px 60px 80px !important;
  gap: 60px !important;
}

.hero-section h1 {
  font-size: 3.2rem !important;
  line-height: 1.25 !important;
  letter-spacing: -0.5px !important;
}

.hero-subtitle {
  font-size: 16px !important;
  line-height: 1.7 !important;
  margin-top: 16px !important;
}

/* ── Section 间距 ── */
.pain-section, .power-section, .moat-section,
.roi-section, .arch-section {
  padding: 80px 60px !important;
}

.section-header {
  margin-bottom: 48px !important;
}

.section-header h2 {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
}

/* ── 卡片标题与描述 ── */
.pain-title, .moat-title, .arch-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
  color: var(--text-primary) !important;
}

.pain-text, .moat-text, .arch-text {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--text-secondary) !important;
}

/* ── 阶段编号 ── */
.phase-num {
  font-size: 20px !important;
  font-weight: 700 !important;
}

.phase-name {
  font-size: 15px !important;
  font-weight: 600 !important;
}

.phase-desc {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
}

/* ── 驾驶舱布局 ── */
.ov2-panel-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--text-muted) !important;
  margin-bottom: 12px !important;
}

.ov2-mid-card-title {
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ── 入口卡片布局 ── */
.ov2-entry {
  padding: 14px 16px !important;
  border-radius: 10px !important;
  gap: 12px !important;
}

.ov2-entry-ico {
  font-size: 22px !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 82, 217, 0.06) !important;
  border-radius: 10px !important;
}

.ov2-entry-name {
  font-size: 14px !important;
  font-weight: 500 !important;
}

.ov2-entry-sub {
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

/* ── KPI 数值样式 ── */
.kpi-value {
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
}

.kpi-label {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.kpi-detail {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-top: 4px !important;
}

/* ── 按钮间距 ── */
.hero-cta-group {
  gap: 16px !important;
  margin-top: 32px !important;
}

.btn-primary-lg {
  padding: 14px 32px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.btn-secondary {
  padding: 14px 28px !important;
  font-size: 14px !important;
}

/* ── Logo 墙布局 ── */
.logo-grid {
  gap: 24px 32px !important;
}

.logo-item {
  padding: 12px 16px !important;
}

/* ── 时间轴布局 ── */
.tl-step {
  padding: 12px 16px !important;
  border-radius: 8px !important;
  margin-bottom: 4px !important;
}

.tl-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
}

.tl-step-name {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* ── 步进控制器 ── */
#step-controller {
  border-radius: 10px !important;
  gap: 12px !important;
}

#step-controller button {
  border-radius: 6px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
}

/* ── 全局阴影统一 ── */
.hero-dashboard-card,
.ov2-panel,
.ov2-mid-card,
#cmd-panel {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3),
              0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

/* ── 返回顶部按钮 ── */
.back-to-top {
  border-radius: 10px !important;
  background: rgba(0, 82, 217, 0.9) !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  font-size: 16px !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 82, 217, 0.3) !important;
}

/* ── 品牌信任墙标题 ── */
.logo-wall-title {
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* ── 最终 CTA 布局 ── */
.final-cta {
  padding: 80px 60px !important;
  text-align: center !important;
}

.final-cta h2 {
  font-size: 32px !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}

.final-cta p {
  font-size: 16px !important;
  margin-bottom: 32px !important;
}