/**
 * Light Theme Styles
 * Complete light mode support for Orbvop
 */

/* ========================================
   Light Theme Base
   ======================================== */

body.app-theme-light {
  color-scheme: light;
  --orbvop-bg: #f8fafc;
  --orbvop-bg-elevated: #ffffff;
  --orbvop-bg-subtle: #f1f5f9;
  --orbvop-surface: rgba(255, 255, 255, 0.85);
  --orbvop-surface-strong: rgba(255, 255, 255, 0.95);
  --orbvop-surface-border: rgba(15, 23, 42, 0.08);
  --orbvop-border: #e2e8f0;
  --orbvop-text: #0f172a;
  --orbvop-text-muted: #64748b;
  --orbvop-text-light: #94a3b8;
  --orbvop-ring: rgba(99, 102, 241, 0.2);
  --orbvop-ring-strong: rgba(99, 102, 241, 0.3);
  
  /* 背景层精致：细腻渐变 + 柔和光晕 */
  background:
    radial-gradient(ellipse 100% 80% at 15% -5%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse 90% 70% at 92% 8%, rgba(168, 85, 247, 0.04) 0%, transparent 48%),
    radial-gradient(ellipse 95% 75% at 65% 108%, rgba(236, 72, 153, 0.025) 0%, transparent 48%),
    radial-gradient(400px 400px at 50% 30%, rgba(248, 250, 252, 0.6) 0%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fafbfd 30%, #f8fafc 60%, #f4f6fa 100%);
  color: var(--orbvop-text);
}

/* ========================================
   Landing Page Light Theme
   ======================================== */

/* 落地页背景：透明，让底层 app-ambient 光效透出（不改卡片） */
body.app-theme-light .landing-page {
  background: transparent;
  color: #1e293b;
}

body.app-theme-light .landing-page::before,
body.app-theme-light .landing-page::after {
  opacity: 0.35;
}

body.app-theme-light .hero-trust-item {
  color: #334155;
}

body.app-theme-light .hero-trust-strip {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(99, 102, 241, 0.18);
  box-shadow: 0 6px 22px rgba(99, 102, 241, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.app-theme-light .hero-trust-item svg {
  color: #0891b2;
  opacity: 1;
}

body.app-theme-light .hero-trust-dot {
  background: rgba(100, 116, 139, 0.45);
}

/* ========================================
   Header Light Theme
   ======================================== */

body.app-theme-light .app-header {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(20px);
}

body.app-theme-light .brand-name {
  color: #0f172a;
}

body.app-theme-light .brand-tagline {
  color: #475569;
}

body.app-theme-light .nav-item {
  color: #64748b;
}

body.app-theme-light .nav-item:hover {
  color: #4338ca;
}

body.app-theme-light .nav-item.active {
  color: #4f46e5;
}

body.app-theme-light .nav-segmented {
  background: rgba(241, 245, 249, 0.92);
  border-color: rgba(148, 163, 184, 0.38);
}

body.app-theme-light .nav-item-seg.active {
  color: #4338ca;
  background: rgba(99, 102, 241, 0.14);
}

body.app-theme-light .nav-flow-tail {
  color: #64748b;
}

body.app-theme-light .nav-flow-step--current {
  color: #4f46e5;
}

body.app-theme-light .status-badge {
  background: rgba(15, 23, 42, 0.05);
  color: #64748b;
}

body.app-theme-light .status-dot.online {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* ========================================
   Hero Section Light Theme
   ======================================== */

body.app-theme-light .hero-title {
  color: #0f172a;
}

body.app-theme-light .hero-subtitle {
  color: #475569;
}

body.app-theme-light .hero-badge {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
  border-color: rgba(99, 102, 241, 0.2);
  color: #6366f1;
}

/* ========================================
   Buttons Light Theme
   ======================================== */

body.app-theme-light .grad-btn {
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
}

body.app-theme-light .grad-btn:hover {
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.35);
}

body.app-theme-light .ghost-btn {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.1);
  color: #334155;
}

body.app-theme-light .ghost-btn:hover {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(99, 102, 241, 0.3);
}

/* ========================================
   Feature Cards Light Theme
   ======================================== */

body.app-theme-light .feature-card h3 {
  color: #0f172a;
}

body.app-theme-light .feature-card p {
  color: #334155;
}

body.app-theme-light .features-section .feature-card .feature-psd-soon {
  color: #7c3aed;
}

body.app-theme-light .feature-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
}

/* ========================================
   Upload Section Light Theme
   ======================================== */

body.app-theme-light .upload-zone {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(99, 102, 241, 0.2);
}

body.app-theme-light .upload-zone:hover,
body.app-theme-light .upload-zone.drag-over {
  background: rgba(255, 255, 255, 0.9);
  border-color: #6366f1;
}

body.app-theme-light .upload-zone-text {
  color: #475569;
}

/* ========================================
   Form Elements Light Theme
   ======================================== */

body.app-theme-light input,
body.app-theme-light select,
body.app-theme-light textarea {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

body.app-theme-light input:focus,
body.app-theme-light select:focus,
body.app-theme-light textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

body.app-theme-light input::placeholder,
body.app-theme-light textarea::placeholder {
  color: #94a3b8;
}

body.app-theme-light label {
  color: #334155;
}

/* ========================================
   Editor Light Theme
   ======================================== */

/* 底层氛围（z-index 最小）：半透明白色放大铺底，避免与 shell 实色叠双倍发灰 */
body[data-view="editor"].app-theme-light .editor-shell {
  overflow: visible;
}

body[data-view="editor"].app-theme-light .editor-ambient {
  overflow: visible;
}

body[data-view="editor"].app-theme-light .editor-ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(248, 250, 252, 0.92) 0%,
    rgba(241, 245, 249, 0.88) 48%,
    rgba(248, 250, 252, 0.9) 100%
  );
  z-index: 0;
  pointer-events: none;
  border-radius: 0;
}

/* 避免负 inset 铺底引发整页横向滚动 */
body[data-view="editor"].app-theme-light {
  overflow-x: hidden;
}

body[data-view="editor"].app-theme-light .editor-ambient::before {
  z-index: 1;
}

body[data-view="editor"].app-theme-light .editor-ambient .editor-ambient-vignette,
body[data-view="editor"].app-theme-light .editor-ambient .editor-ambient-noise,
body[data-view="editor"].app-theme-light .editor-ambient .editor-ambient-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

body.app-theme-light .editor-shell {
  background: transparent;
}

body.app-theme-light .editor-panel {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.08);
}

body.app-theme-light .timeline-track {
  background: rgba(15, 23, 42, 0.04);
}

body.app-theme-light .subtitle-item {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(15, 23, 42, 0.08);
}

body.app-theme-light .subtitle-item:hover {
  background: rgba(255, 255, 255, 0.95);
}

body.app-theme-light .subtitle-item.active {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.3);
}

/* ========================================
   Modal Light Theme
   ======================================== */

body.app-theme-light .modal-backdrop {
  background: rgba(15, 23, 42, 0.4);
}

body.app-theme-light .modal-box {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(15, 23, 42, 0.08);
}

body.app-theme-light .modal-header {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

body.app-theme-light .modal-title {
  color: #0f172a;
}

/* ========================================
   AI Agent Light Theme
   ======================================== */

body.app-theme-light .ai-agent-panel {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.08);
}

body.app-theme-light .ai-message.user {
  background: rgba(99, 102, 241, 0.1);
  color: #0f172a;
}

body.app-theme-light .ai-message.assistant {
  background: rgba(15, 23, 42, 0.04);
  color: #1e293b;
}

/* ========================================
   Toast Light Theme
   ======================================== */

body.app-theme-light .toast {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ========================================
   Section Headers Light Theme
   ======================================== */

body.app-theme-light .lp-section-header h2,
body.app-theme-light .demo-header h2,
body.app-theme-light .compare-container h2,
body.app-theme-light .langs-container h2,
body.app-theme-light .cta-container h2 {
  color: #0f172a;
}

body.app-theme-light .lp-section-header p,
body.app-theme-light .demo-header p,
body.app-theme-light .compare-container > p,
body.app-theme-light .langs-subtitle,
body.app-theme-light .cta-container p {
  color: #334155;
}

/* ========================================
   Stats & Numbers Light Theme
   ======================================== */

body.app-theme-light .stat-number {
  color: #0f172a;
}

body.app-theme-light .stat-label {
  color: #64748b;
}

/* ========================================
   Growth Calculator Light Theme
   ======================================== */

body.app-theme-light .growth-header h3 {
  color: #0f172a;
}

body.app-theme-light .growth-header p {
  color: #64748b;
}

body.app-theme-light .growth-input,
body.app-theme-light .growth-select {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

body.app-theme-light .growth-result {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(168, 85, 247, 0.03));
}

body.app-theme-light .growth-result-label {
  color: #64748b;
}

body.app-theme-light .growth-result-value {
  color: #0f172a;
}

/* ========================================
   Scrollbar Light Theme
   ======================================== */

body.app-theme-light ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.app-theme-light ::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.03);
  border-radius: 4px;
}

body.app-theme-light ::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.2);
  border-radius: 4px;
}

body.app-theme-light ::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.35);
}

/* ========================================
   Ambient Effects Light Theme - 暗色风格光效与粒子，浅色背景可见
   图层顺序：base(-10) < canvas(-9) < fog(1) < lines(2) < noise(3) < orbits(4) < grid(5) < sheen(6) < orbs(7) < rays(8) < stars(9) < mesh(10)
   ======================================== */

/* 基座：带微妙色相的渐变，避免纯灰白单调 */
body.app-theme-light .app-ambient-base {
  background:
    radial-gradient(ellipse 100% 60% at 80% 0%, rgba(99, 102, 241, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse 80% 50% at 10% 100%, rgba(236, 72, 153, 0.03) 0%, transparent 45%),
    radial-gradient(ellipse 70% 40% at 90% 90%, rgba(56, 189, 248, 0.035) 0%, transparent 45%),
    linear-gradient(180deg, #ffffff 0%, #fafbfe 20%, #f6f7fc 45%, #f2f4fb 75%, #eef2fa 100%);
}

/* 光晕球 - 四色分区：靛蓝 / 紫粉 / 青蓝 / 琥珀粉，层次分明 */
body.app-theme-light .ambient-orb {
  opacity: 0.55;
}

body.app-theme-light .ambient-orb-1 {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(129, 140, 248, 0.18));
}

body.app-theme-light .ambient-orb-2 {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.24), rgba(236, 72, 153, 0.16));
}

body.app-theme-light .ambient-orb-3 {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(99, 102, 241, 0.14));
}

body.app-theme-light .ambient-orb-4 {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(236, 72, 153, 0.1));
}

/* 轨道光晕 - 靛紫 / 青 / 粉 三色分布 */
body.app-theme-light .app-ambient-orbits {
  opacity: 1;
  background:
    radial-gradient(900px 500px at 15% 5%, rgba(99, 102, 241, 0.14), transparent 55%),
    radial-gradient(900px 480px at 88% 12%, rgba(168, 85, 247, 0.12), transparent 58%),
    radial-gradient(800px 450px at 55% 90%, rgba(56, 189, 248, 0.1), transparent 62%),
    radial-gradient(700px 400px at 5% 60%, rgba(236, 72, 153, 0.06), transparent 60%);
}

/* 网格 - 靛紫线，略带青紫变化 */
body.app-theme-light .app-ambient-grid {
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129, 140, 248, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* 顶光晕 - 靛紫 + 青，更通透 */
body.app-theme-light .app-ambient-sheen {
  opacity: 0.65;
  background:
    linear-gradient(180deg, rgba(99, 102, 241, 0.06), transparent 22%),
    radial-gradient(1000px 450px at 50% -5%, rgba(56, 189, 248, 0.08), transparent 55%),
    radial-gradient(800px 350px at 30% -8%, rgba(168, 85, 247, 0.05), transparent 50%);
}

/* 光线 conic - 靛紫青粉多色 */
body.app-theme-light .app-ambient-rays {
  opacity: 0.42;
}

body.app-theme-light .app-ambient-rays::before {
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(99, 102, 241, 0.09) 12deg,
    transparent 28deg,
    transparent 42deg,
    rgba(56, 189, 248, 0.07) 52deg,
    transparent 68deg,
    transparent 82deg,
    rgba(168, 85, 247, 0.08) 95deg,
    transparent 112deg,
    transparent 128deg,
    rgba(236, 72, 153, 0.06) 140deg,
    transparent 155deg,
    transparent 172deg,
    rgba(99, 102, 241, 0.08) 188deg,
    transparent 205deg,
    transparent 218deg,
    rgba(129, 140, 248, 0.07) 232deg,
    transparent 248deg,
    transparent 265deg,
    rgba(168, 85, 247, 0.06) 278deg,
    transparent 295deg,
    transparent 312deg,
    rgba(56, 189, 248, 0.06) 328deg,
    transparent 345deg,
    transparent 360deg
  );
}

/* 粒子星 - 靛紫 + 青紫混合，略微可见 */
body.app-theme-light .ambient-star {
  background: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 2px 0.5px rgba(99, 102, 241, 0.35);
  --opacity: 0.6;
}

/* 渐变网格 - 四色光晕：靛蓝 / 紫粉 / 青蓝 / 琥珀粉 */
body.app-theme-light .app-ambient-mesh {
  opacity: 0.6;
  background:
    radial-gradient(ellipse at 18% 25%, rgba(99, 102, 241, 0.16), transparent 48%),
    radial-gradient(ellipse at 85% 15%, rgba(168, 85, 247, 0.14), transparent 45%),
    radial-gradient(ellipse at 62% 82%, rgba(56, 189, 248, 0.12), transparent 42%),
    radial-gradient(ellipse at 35% 65%, rgba(236, 72, 153, 0.08), transparent 40%);
}

/* 雾效 - 靛紫青粉四色分布 */
body.app-theme-light .app-ambient-fog,
body.app-theme-light[data-view="landing"] .app-ambient-fog {
  background:
    radial-gradient(950px 550px at 18% 8%, rgba(99, 102, 241, 0.12), transparent 56%),
    radial-gradient(850px 500px at 85% 18%, rgba(168, 85, 247, 0.1), transparent 58%),
    radial-gradient(900px 520px at 52% 85%, rgba(56, 189, 248, 0.08), transparent 60%),
    radial-gradient(750px 450px at 8% 55%, rgba(236, 72, 153, 0.06), transparent 58%);
  filter: blur(22px) saturate(1.12);
  mix-blend-mode: normal;
}

body.app-theme-light[data-view="landing"] .app-ambient-fog::after {
  background:
    radial-gradient(720px 420px at 20% 20%, rgba(56, 189, 248, 0.08), transparent 58%),
    radial-gradient(780px 460px at 78% 25%, rgba(236, 72, 153, 0.06), transparent 60%);
}

/* 扫描线/光束 - 靛紫 + 青 */
body.app-theme-light[data-view="landing"] .app-ambient-lines {
  opacity: 0.25;
  background:
    linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(56, 189, 248, 0.06), transparent 42%),
    repeating-linear-gradient(0deg, rgba(99, 102, 241, 0.05) 0px, rgba(99, 102, 241, 0.05) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(90deg, rgba(129, 140, 248, 0.04) 0px, rgba(129, 140, 248, 0.04) 1px, transparent 1px, transparent 10px);
  mix-blend-mode: normal;
}

body.app-theme-light[data-view="landing"] .app-ambient-lines::after {
  background: linear-gradient(95deg, transparent 42%, rgba(99, 102, 241, 0.1) 50%, rgba(168, 85, 247, 0.06) 55%, transparent 58%);
}

/* 粒子噪点 - 靛紫青粉双色 */
body.app-theme-light .app-ambient-noise {
  opacity: 0.1;
  background-image:
    repeating-radial-gradient(circle at 10% 18%, rgba(99, 102, 241, 0.1) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 90% 72%, rgba(168, 85, 247, 0.08) 0 1px, transparent 1px 5px),
    repeating-radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.04) 0 1px, transparent 1px 6px);
  mix-blend-mode: multiply;
}

/* ========================================
   Footer Light Theme
   ======================================== */

body.app-theme-light .landing-footer {
  background: rgba(248, 250, 252, 0.8);
  border-top-color: rgba(15, 23, 42, 0.08);
  color: #64748b;
}

body.app-theme-light .footer-link {
  color: #64748b;
}

body.app-theme-light .footer-link:hover {
  color: #6366f1;
}

/* ========================================
   Override Dark Backgrounds
   ======================================== */

body.app-theme-light .lp-section::before {
  background: radial-gradient(closest-side, rgba(99, 102, 241, 0.08), transparent 68%);
}

body.app-theme-light .lp-section::after {
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.08), transparent);
}

body.app-theme-light .compare-section-pro {
  background: transparent;
}

body.app-theme-light .orbvop-compare-header h2 {
  color: #0f172a;
}

body.app-theme-light .orbvop-compare-header p {
  color: #334155;
}

body.app-theme-light .trend-section {
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.88) 100%);
}

body.app-theme-light .stats-section {
  background: transparent;
}

body.app-theme-light .demo-section {
  background: linear-gradient(180deg, rgba(248,250,252,0.88) 0%, rgba(255,255,255,0.9) 100%);
}

body.app-theme-light .step {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(99, 102, 241, 0.12);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

body.app-theme-light .step-num {
  color: #4f46e5;
}

body.app-theme-light .step-content h4 {
  color: #1e293b;
}

body.app-theme-light .step-content p {
  color: #64748b;
}

body.app-theme-light .step-arrow {
  color: #94a3b8;
}

body.app-theme-light .lp-toggle {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.15);
  color: #334155;
}

body.app-theme-light .lp-toggle:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.15);
  color: #0f172a;
}

body.app-theme-light .lp-toggle-icon {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.25);
  color: #4f46e5;
}

/* FAQ — 浅色背景 */
body.app-theme-light .lp-faq-q {
  color: #1e293b;
}
body.app-theme-light .lp-faq-a {
  color: #475569;
}
body.app-theme-light .lp-faq-disclaimer {
  color: #94a3b8;
}

body.app-theme-light .orbvop-compare-toggle {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.15);
  color: #334155;
}

body.app-theme-light .orbvop-compare-toggle:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.15);
  color: #0f172a;
}

body.app-theme-light .orbvop-compare-toggle-icon {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.25);
  color: #4f46e5;
}

body.app-theme-light .cta-section {
  background: transparent;
}

body.app-theme-light .langs-section {
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(99, 102, 241, 0.04) 0%, transparent 60%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
}

body.app-theme-light .success-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* ========================================
   Additional Component Fixes
   ======================================== */

/* 浅色模式：英雄区容器背景不透明度=0，让光效透出；底下卡牌不动 */
body.app-theme-light .hero-visual,
body.app-theme-light .demo-visual {
  background: transparent;
  border-color: transparent;
}

body.app-theme-light .hero-content {
  background: transparent;
}

body.app-theme-light .hero-full::before {
  opacity: 0;
  background: transparent;
}

body.app-theme-light .hero-visual::after {
  opacity: 0;
  background: transparent;
}

/* Hero 效果层 - 浅色风格化（几何、orb 等，非容器背景） */

body.app-theme-light .hero-geo {
  opacity: 0.5;
}

body.app-theme-light .hero-geo-rings {
  background:
    radial-gradient(circle at 40% 40%, rgba(99, 102, 241, 0.04), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(168, 85, 247, 0.025), transparent 62%);
}

body.app-theme-light .hero-geo-rings::before,
body.app-theme-light .hero-geo-rings::after {
  border-color: rgba(99, 102, 241, 0.06);
  opacity: 0.2;
}

body.app-theme-light .hero-geo-rings::after {
  opacity: 0.12;
}

body.app-theme-light .hero-geo-grid {
  opacity: 0.05;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px);
}

body.app-theme-light .hero-geo-prism {
  opacity: 0.12;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(168, 85, 247, 0.03) 55%, transparent);
  border-color: rgba(99, 102, 241, 0.06);
}

body.app-theme-light .hero-orb {
  opacity: 0.18;
}

body.app-theme-light .hero-orb-1 {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 68%);
}

body.app-theme-light .hero-orb-2 {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.12), transparent 68%);
}

body.app-theme-light .hero-orb-3 {
  background: radial-gradient(circle, rgba(236, 72, 153, 0.1), transparent 68%);
}

/* 置顶几何体 - 浅色 */
body.app-theme-light .hero-geo-foreground-rings {
  border-color: rgba(99, 102, 241, 0.08);
  opacity: 0.15;
}

body.app-theme-light .hero-geo-foreground-prism {
  opacity: 0.1;
}

body.app-theme-light .compare-card::before {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), transparent);
}

body.app-theme-light .trend-icon-label {
  color: #334155;
}

body.app-theme-light .lang-card {
  background: rgba(255, 255, 255, 0.75);
}

body.app-theme-light .cta-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(168, 85, 247, 0.03));
  border-color: rgba(99, 102, 241, 0.15);
}

/* ========================================
   Text Colors Fix
   ======================================== */

body.app-theme-light .compare-title,
body.app-theme-light .trend-title,
body.app-theme-light .lang-title,
body.app-theme-light .success-title {
  color: #0f172a;
}

body.app-theme-light .compare-desc,
body.app-theme-light .trend-desc,
body.app-theme-light .lang-desc,
body.app-theme-light .success-desc {
  color: #64748b;
}

body.app-theme-light .compare-feature,
body.app-theme-light .trend-feature {
  color: #475569;
}

body.app-theme-light .compare-feature::before {
  background: #6366f1;
}

/* ========================================
   Code Blocks Light Theme
   ======================================== */

body.app-theme-light pre,
body.app-theme-light code {
  background: rgba(15, 23, 42, 0.04);
  color: #1e293b;
}

/* Ambient Canvas 粒子 - 浅色模式提高可见度 */
body.app-theme-light .app-ambient-canvas {
  opacity: 0.45;
  filter: saturate(1.1);
}

/* ========================================
   Easter Egg Light Theme
   ======================================== */

body.app-theme-light .growth-easter-container {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.05));
  border-color: rgba(99, 102, 241, 0.2);
}

body.app-theme-light .easter-message {
  color: #0f172a;
}

body.app-theme-light .easter-progress-bar {
  background: rgba(15, 23, 42, 0.1);
}

/* ========================================
   Additional Section Fixes
   ======================================== */

body.app-theme-light .growth-section {
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.88) 100%);
}

body.app-theme-light .features-section {
  background: linear-gradient(180deg, rgba(248,250,252,0.88) 0%, rgba(255,255,255,0.9) 100%);
}

body.app-theme-light .upload-section {
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(241,245,249,0.88) 100%);
}

/* ========================================
   Placeholder & Empty States
   ======================================== */

body.app-theme-light .growth-placeholder {
  color: #94a3b8;
}

/* ========================================
   Selection & Focus States
   ======================================== */

body.app-theme-light ::selection {
  background: rgba(99, 102, 241, 0.2);
  color: #0f172a;
}

body.app-theme-light :focus-visible {
  outline-color: rgba(99, 102, 241, 0.5);
}

/* ========================================
   Theme Toggle Button Light Theme
   ======================================== */

body.app-theme-light .theme-toggle-btn {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.1);
  color: #64748b;
}

body.app-theme-light .theme-toggle-btn:hover {
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

body.app-theme-light .theme-toggle-btn.active {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
  color: #6366f1;
}

/* ========================================
   Language Switcher Light Theme
   ======================================== */

body.app-theme-light .lang-switcher-btn {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.1);
  color: #64748b;
}

body.app-theme-light .lang-switcher-btn:hover {
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

body.app-theme-light .lang-switcher-dropdown {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

body.app-theme-light .lang-switcher-option {
  color: #334155;
}

body.app-theme-light .lang-switcher-option:hover {
  background: rgba(99, 102, 241, 0.08);
}

body.app-theme-light .lang-switcher-option.active {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

/* ========================================
   Comprehensive Contrast Fixes
   ======================================== */

/* Landing Page General Text */
body.app-theme-light .lp-section-header h2,
body.app-theme-light .demo-header h2,
body.app-theme-light .compare-container h2,
body.app-theme-light .langs-container h2,
body.app-theme-light .cta-container h2,
body.app-theme-light .success-header h2,
body.app-theme-light .trend-header h2 {
  color: #0f172a;
}

body.app-theme-light .lp-section-header p,
body.app-theme-light .demo-header p,
body.app-theme-light .compare-container > p,
body.app-theme-light .langs-subtitle,
body.app-theme-light .cta-container p,
body.app-theme-light .success-header p,
body.app-theme-light .trend-header p {
  color: #475569;
}

/* Feature Cards */
body.app-theme-light .feature-card h3,
body.app-theme-light .feature-card .feature-title {
  color: #0f172a;
}

body.app-theme-light .feature-card p,
body.app-theme-light .feature-card .feature-desc {
  color: #475569;
}

body.app-theme-light .feature-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.1));
  color: #6366f1;
}

/* Compare Section */
body.app-theme-light .compare-title {
  color: #0f172a;
}

body.app-theme-light .compare-desc {
  color: #475569;
}

body.app-theme-light .compare-feature {
  color: #334155;
}

body.app-theme-light .compare-feature::before {
  background: #6366f1;
}

/* Trend Section */
body.app-theme-light .trend-title {
  color: #0f172a;
}

body.app-theme-light .trend-desc {
  color: #475569;
}

body.app-theme-light .trend-feature {
  color: #334155;
}

/* Demo Section */
body.app-theme-light .demo-title {
  color: #0f172a;
}

body.app-theme-light .demo-desc {
  color: #475569;
}

body.app-theme-light .demo-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.1);
}

body.app-theme-light .demo-visual {
  background: rgba(241, 245, 249, 0.5);
  border-color: rgba(15, 23, 42, 0.1);
}

/* Langs Section */
body.app-theme-light .lang-title {
  color: #0f172a;
}

body.app-theme-light .lang-desc {
  color: #475569;
}

body.app-theme-light .lang-card {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(15, 23, 42, 0.1);
}

body.app-theme-light .lang-feature {
  color: #334155;
}

/* Success Section */
body.app-theme-light .success-title {
  color: #0f172a;
}

body.app-theme-light .success-desc {
  color: #475569;
}

body.app-theme-light .success-feature {
  color: #334155;
}

/* CTA Section */
body.app-theme-light .cta-title {
  color: #0f172a;
}

body.app-theme-light .cta-desc {
  color: #475569;
}

body.app-theme-light .cta-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.05));
  border-color: rgba(99, 102, 241, 0.2);
}

/* Stats Section — 卡片外观由 .lp-surface 统一，见 stat-number / stat-label 文字色 */

body.app-theme-light .stat-number {
  color: #0f172a;
}

body.app-theme-light .stat-label {
  color: #475569;
}

body.app-theme-light .stat-label-line2 {
  color: #64748b;
}

body.app-theme-light .stat-source {
  color: #64748b;
}

/* Hero Section */
body.app-theme-light .hero-brand-name {
  color: #0f172a;
}

body.app-theme-light .hero-brand-slogan {
  color: #475569;
}

body.app-theme-light .hero-headline {
  color: #0f172a;
}

body.app-theme-light .hero-desc {
  color: #334155;
}

body.app-theme-light .hero-sellpoints li {
  color: #334155;
}

body.app-theme-light .hero-upload {
  border-color: rgba(99, 102, 241, 0.3);
}

body.app-theme-light .hero-upload::before {
  border-color: rgba(148, 163, 184, 0.4);
}

/* Footer - site-footer / saas-footer（浅色底灰区：副文案与链接需更深色以保证对比度） */
body.app-theme-light .site-footer {
  border-top-color: rgba(15, 23, 42, 0.12);
}

body.app-theme-light .site-footer.saas-footer {
  background: linear-gradient(180deg, transparent 0%, rgba(241, 245, 249, 0.98) 24%, rgba(226, 232, 240, 0.55) 100%);
  border-top-color: rgba(15, 23, 42, 0.1);
}

body.app-theme-light .site-footer .footer-inner {
  color: #334155;
}

body.app-theme-light .site-footer .footer-brand,
body.app-theme-light .saas-footer-brand-block .footer-brand {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.app-theme-light .site-footer .footer-divider {
  color: #64748b;
}

body.app-theme-light .saas-footer-tagline {
  color: #475569;
}

body.app-theme-light .saas-footer-col h3 {
  color: #64748b;
}

body.app-theme-light .saas-footer-links a {
  color: #334155;
}

body.app-theme-light .saas-footer-links a:hover {
  color: #4f46e5;
}

body.app-theme-light .saas-footer-meta {
  border-top-color: rgba(15, 23, 42, 0.1);
}

body.app-theme-light .saas-footer-compliance {
  color: #64748b;
}

body.app-theme-light .saas-footer-bottom {
  color: #64748b;
}

body.app-theme-light .landing-footer {
  background: rgba(248, 250, 252, 0.9);
  border-top-color: rgba(15, 23, 42, 0.1);
  color: #475569;
}

body.app-theme-light .footer-link {
  color: #64748b;
}

body.app-theme-light .footer-link:hover {
  color: #6366f1;
}

/* Upload Zone */
body.app-theme-light .upload-zone {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(99, 102, 241, 0.25);
}

body.app-theme-light .upload-zone-text {
  color: #475569;
}

body.app-theme-light .upload-zone-hint {
  color: #64748b;
}

/* Tags & Badges */
body.app-theme-light .hero-tag,
body.app-theme-light .feature-tag,
body.app-theme-light .demo-tag {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
  color: #6366f1;
}

/* Buttons */
body.app-theme-light .ghost-btn {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.15);
  color: #334155;
}

body.app-theme-light .ghost-btn:hover {
  background: rgba(15, 23, 42, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
  color: #0f172a;
}

/* Links */
body.app-theme-light a {
  color: #6366f1;
}

body.app-theme-light a:hover {
  color: #4f46e5;
}

/* Dividers - 渐隐过渡，避免生硬分界 */
body.app-theme-light .divider,
body.app-theme-light .section-divider {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(15, 23, 42, 0.06) 20%,
    rgba(15, 23, 42, 0.1) 50%,
    rgba(15, 23, 42, 0.06) 80%,
    transparent 100%
  );
  max-width: 480px;
  opacity: 0.9;
}

/* Placeholders */
body.app-theme-light ::placeholder {
  color: #94a3b8;
}

/* Disabled States */
body.app-theme-light .disabled,
body.app-theme-light [disabled] {
  color: #94a3b8;
  opacity: 0.6;
}

/* Muted Text */
body.app-theme-light .text-muted,
body.app-theme-light .muted {
  color: #64748b;
}

/* Secondary Text */
body.app-theme-light .text-secondary {
  color: #94a3b8;
}

/* Helper Text */
body.app-theme-light .helper-text,
body.app-theme-light .hint-text {
  color: #64748b;
}

/* Error States */
body.app-theme-light .error-text,
body.app-theme-light .text-error {
  color: #dc2626;
}

/* Success States */
body.app-theme-light .success-text,
body.app-theme-light .text-success {
  color: #16a34a;
}

/* Warning States */
body.app-theme-light .warning-text,
body.app-theme-light .text-warning {
  color: #d97706;
}

/* Info States */
body.app-theme-light .info-text,
body.app-theme-light .text-info {
  color: #2563eb;
}

/* ========================================
   User Selected Elements Light Theme
   ======================================== */

/* Hero Brand */
body.app-theme-light .hero-brand {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(99, 102, 241, 0.22);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body.app-theme-light .hero-brand-name {
  color: #0f172a;
}

body.app-theme-light .hero-brand-slogan {
  color: #475569;
}

/* Hero Tag */
body.app-theme-light .hero-tag {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.1));
  border-color: rgba(99, 102, 241, 0.35);
  color: #4f46e5;
}

/* Hero Headline - override landing-enhanced light gradient (was invisible on light bg) */
body.app-theme-light .hero-headline {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #0f172a;
  text-shadow: none !important;
  filter: none !important;
}

body.app-theme-light .hero-headline .text-gradient {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero Upload */
body.app-theme-light .hero-upload {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(238, 242, 255, 0.85) 50%, rgba(224, 231, 255, 0.92) 100%);
  border-color: rgba(99, 102, 241, 0.32);
  box-shadow:
    0 12px 36px rgba(99, 102, 241, 0.16),
    0 0 0 1px rgba(99, 102, 241, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: #0f172a;
}

body.app-theme-light .hero-upload::before {
  border-color: rgba(99, 102, 241, 0.18);
  opacity: 0.6;
}

body.app-theme-light .hero-upload:hover {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(238, 242, 255, 0.92) 50%, rgba(199, 210, 254, 0.95) 100%);
  border-color: #6366f1;
  box-shadow:
    0 16px 44px rgba(99, 102, 241, 0.22),
    0 0 0 1px rgba(99, 102, 241, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

body.app-theme-light .hero-upload.is-dragover,
body.app-theme-light .hero-upload.is-dragging {
  background:
    linear-gradient(135deg, rgba(238, 242, 255, 0.95) 0%, rgba(199, 210, 254, 0.92) 100%);
  border-color: #6366f1;
}

body.app-theme-light .upload-text {
  color: #0f172a;
}

body.app-theme-light .upload-hint {
  color: #64748b;
}

body.app-theme-light .upload-hint-psd-soon {
  color: #7c3aed;
}

/* ========================================
   浅色模式：卡片与连接处优化（连接不突兀）
   ======================================== */

/* 功能卡片 - 柔和边框 + 软阴影（border-radius 与深色模式一致，避免切换主题时位置错位） */
body.app-theme-light .feature-card,
body.app-theme-light .glass-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(248, 250, 252, 0.88) 100%
  );
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 16px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.app-theme-light .feature-card:hover,
body.app-theme-light .glass-card:hover {
  border-color: rgba(99, 102, 241, 0.18);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 12px 32px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(99, 102, 241, 0.08);
}

/* 高亮卡片 - 柔和光晕 */
body.app-theme-light .feature-card-highlight {
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 28px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(99, 102, 241, 0.1),
    0 0 40px -8px rgba(99, 102, 241, 0.15);
}

body.app-theme-light .feature-card-highlight:hover {
  box-shadow:
    0 4px 8px rgba(15, 23, 42, 0.06),
    0 16px 40px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(99, 102, 241, 0.15),
    0 0 48px -6px rgba(99, 102, 241, 0.2);
}

/* 趋势卡片（案例卡片外观由 .lp-surface 统一） */
body.app-theme-light .trend-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(248, 250, 252, 0.85) 100%
  );
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 16px rgba(15, 23, 42, 0.05);
}

body.app-theme-light .trend-card:hover,
body.app-theme-light .lp-case-card.lp-surface:hover {
  border-color: rgba(99, 102, 241, 0.12);
  box-shadow:
    var(--lp-surface-shadow),
    0 0 0 1px rgba(99, 102, 241, 0.08);
}

/* 增长计算器 — 卡片外观由 .lp-surface 统一 */
body.app-theme-light .growth-calculator::before {
  opacity: 0.25;
}

/* 区块背景 - 柔和过渡，避免硬切 */
body.app-theme-light .stats-section,
body.app-theme-light .trend-section,
body.app-theme-light .demo-section {
  background: transparent;
}

body.app-theme-light .compare-section-pro {
  background: transparent;
}

/* 区块间光晕 - 更柔和 */
body.app-theme-light .lp-section::before {
  background: radial-gradient(
    closest-side,
    rgba(99, 102, 241, 0.04) 0%,
    transparent 72%
  );
}

body.app-theme-light .lp-section::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(99, 102, 241, 0.04) 30%,
    rgba(99, 102, 241, 0.06) 50%,
    rgba(99, 102, 241, 0.04) 70%,
    transparent 100%
  );
}

/* LP Section */
body.app-theme-light .lp-section {
  background: transparent;
}

body.app-theme-light .lp-section-header h2 {
  color: #0f172a;
}

body.app-theme-light .lp-section-header p {
  color: #334155;
}

body.app-theme-light .lp-split-text p {
  color: #334155;
}

body.app-theme-light .lp-split-text h3 {
  color: #0f172a;
}

body.app-theme-light .lp-creator-inner > p,
body.app-theme-light .lp-creator-pillar span,
body.app-theme-light .lp-lipsync-note p,
body.app-theme-light .lp-case-desc,
body.app-theme-light .langs-footnote {
  color: #334155;
}

/* lp-schematic / lp-lipsync-note 卡片底由 .landing-page .lp-surface / inset 统一 */
body.app-theme-light .lp-creator-inner {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.88));
  border-color: rgba(15, 23, 42, 0.08);
}

body.app-theme-light .lp-creator-pillar {
  background: rgba(241, 245, 249, 0.9);
  border-color: rgba(15, 23, 42, 0.08);
}

body.app-theme-light .lp-creator-inner h2,
body.app-theme-light .lp-creator-pillar strong,
body.app-theme-light .lp-lipsync-note strong,
body.app-theme-light .growth-slider-value {
  color: #0f172a;
}

body.app-theme-light .hero-creator-subtitle {
  color: #4338ca;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(168, 85, 247, 0.08));
}

body.app-theme-light .lp-kicker {
  color: #6366f1;
}

body.app-theme-light .lp-bullet {
  color: #334155;
}

body.app-theme-light .lp-bullet::before {
  background: #6366f1;
}

/* LP Media Placeholder */
body.app-theme-light .lp-media-inner {
  background: rgba(241, 245, 249, 0.8);
  border-color: rgba(15, 23, 42, 0.1);
}

body.app-theme-light .lp-media-label {
  color: #64748b;
}

body.app-theme-light .lp-placeholder-hint {
  color: #94a3b8;
}

/* LP Case Cards — 文字色；卡片底由 .lp-surface 提供 */
body.app-theme-light .lp-case-title {
  color: #0f172a;
}

body.app-theme-light .lp-case-metric {
  color: #6366f1;
}

body.app-theme-light .lp-case-desc {
  color: #475569;
}

/* Orbvop Compare Panel — 外观由 .landing-page .lp-surface 统一 */
body.app-theme-light .orbvop-compare-kicker {
  color: #6366f1;
}

body.app-theme-light .orbvop-compare-sub {
  color: #475569;
}

/* Orbvop Demo Card */
body.app-theme-light .orbvop-demo-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.1);
}

body.app-theme-light .video-placeholder:not(.lp-surface) {
  background: linear-gradient(135deg, rgba(241, 245, 249, 0.95), rgba(226, 232, 240, 0.9));
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

body.app-theme-light .video-placeholder .video-label {
  color: #1e293b;
}

body.app-theme-light .video-placeholder .lp-placeholder-hint {
  color: #475569;
}

body.app-theme-light .video-placeholder .play-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.18));
  border: 2px solid #6366f1;
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.3);
}

body.app-theme-light .video-placeholder .play-icon svg {
  color: #4338ca;
}

body.app-theme-light .video-placeholder .play-icon:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.38), rgba(168, 85, 247, 0.28));
  border-color: #4f46e5;
  box-shadow: 0 10px 32px rgba(99, 102, 241, 0.4);
}

body.app-theme-light .video-placeholder .play-icon:hover svg {
  color: #3730a3;
}

body.app-theme-light .video-placeholder-large {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border-color: rgba(15, 23, 42, 0.1);
}

body.app-theme-light .video-placeholder-large .video-title {
  color: #1e293b;
}

body.app-theme-light .video-placeholder-large .video-duration {
  color: #475569;
}

body.app-theme-light .video-poster {
  background: rgba(241, 245, 249, 0.8);
}

/* video-overlay：演示视频 + 敬请期待 区域 */
body.app-theme-light .video-overlay {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
}

body.app-theme-light .overlay-label {
  color: #1e293b;
}

body.app-theme-light .orbvop-demo-overlay-note {
  color: #475569;
}

/* Orbvop Lang Strip - 选择配音语言 */
body.app-theme-light .orbvop-lang-label {
  color: #334155;
}

body.app-theme-light .orbvop-lang-strip {
  background: rgba(241, 245, 249, 0.9);
  border-color: rgba(15, 23, 42, 0.12);
}

body.app-theme-light .orbvop-lang-pill {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.1);
  color: #334155;
}

body.app-theme-light .orbvop-lang-pill:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
}

body.app-theme-light .orbvop-lang-pill.active {
  background: rgba(99, 102, 241, 0.15);
  border-color: #6366f1;
  color: #6366f1;
}

/* Orbvop Audio Compare - 情感克隆对比 */
body.app-theme-light .orbvop-audio-header h3 {
  color: #0f172a;
}

/* Audio Cards */
body.app-theme-light .audio-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.1);
}

body.app-theme-light .audio-tag {
  color: #0f172a;
}

body.app-theme-light .audio-tag.raw {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.15);
}

body.app-theme-light .audio-tag.processed {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.1));
  border-color: rgba(99, 102, 241, 0.3);
}

body.app-theme-light .audio-label {
  color: #334155;
}

body.app-theme-light .audio-desc {
  color: #334155;
}

body.app-theme-light .audio-play-btn {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.15);
  color: #1e293b;
}

body.app-theme-light .audio-play-btn svg {
  color: #1e293b;
}

body.app-theme-light .audio-play-btn:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.35);
  color: #4f46e5;
}

body.app-theme-light .audio-play-btn:hover svg {
  color: #4f46e5;
}

body.app-theme-light .audio-play-btn.processed {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(168, 85, 247, 0.12));
  border-color: rgba(99, 102, 241, 0.4);
  color: #4f46e5;
}

body.app-theme-light .audio-play-btn.processed svg {
  color: #4f46e5;
}

/* Wave Bars */
body.app-theme-light .wave-bar {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.4), rgba(168, 85, 247, 0.3));
}

/* Feature Icons - 背景音分离、多说话人识别等图标浅色可见 */
body.app-theme-light .feature-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.1));
  border-color: rgba(99, 102, 241, 0.25);
  color: #4f46e5;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.12);
}

body.app-theme-light .feature-icon svg {
  color: #4f46e5;
}

body.app-theme-light .feature-card-highlight .feature-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.15));
  border-color: rgba(99, 102, 241, 0.35);
}

body.app-theme-light .feature-card-highlight .feature-icon svg {
  color: #4f46e5;
}

/* Lang Tags Grid - 仅覆盖颜色，布局与深色统一避免切换主题时抖动 */
body.app-theme-light .langs-grid {
  background:
    radial-gradient(ellipse 85% 80% at 50% 50%, rgba(255, 255, 255, 0.7) 0%, rgba(248, 250, 252, 0.4) 45%, rgba(248, 250, 252, 0.08) 100%);
  border-color: rgba(15, 23, 42, 0.06);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04);
}

body.app-theme-light .lang-tag {
  background: rgba(15, 23, 42, 0.05);
  color: #334155;
}

body.app-theme-light .lang-tag:hover {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

/* VS Divider */
body.app-theme-light .vs-text {
  color: #94a3b8;
}

body.app-theme-light .vs-line {
  background: rgba(15, 23, 42, 0.1);
}

/* Audio Visualizer */
body.app-theme-light .audio-visualizer {
  background: rgba(15, 23, 42, 0.03);
}

/* Play Button Main - 提高与浅色背景的对比 */
body.app-theme-light .play-btn-main {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(168, 85, 247, 0.2));
  border: 2px solid #6366f1;
  color: #4338ca;
  box-shadow: 0 6px 28px rgba(99, 102, 241, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body.app-theme-light .play-btn-main svg {
  color: #4338ca;
}

body.app-theme-light .play-btn-main:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(168, 85, 247, 0.28));
  border-color: #4f46e5;
  color: #3730a3;
  box-shadow: 0 10px 40px rgba(99, 102, 241, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.app-theme-light .play-btn-main:hover svg {
  color: #3730a3;
}

/* Play Button Large - demo-section 产品演示大按钮 */
body.app-theme-light .play-btn-large {
  border: 3px solid rgba(99, 102, 241, 0.6);
  box-shadow: 0 12px 36px rgba(99, 102, 241, 0.45);
}

body.app-theme-light .play-btn-large:hover {
  box-shadow: 0 16px 48px rgba(99, 102, 241, 0.55);
}

/* Poster Gradient */
body.app-theme-light .poster-gradient {
  background: linear-gradient(180deg, transparent 0%, rgba(241, 245, 249, 0.5) 100%);
}

/* Lang Fade */
body.app-theme-light .orbvop-lang-fade {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), transparent);
}

body.app-theme-light .orbvop-lang-fade.right {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9));
}

/* ========================================
   Additional Fixes
   ======================================== */

/* Hero Headline - Enhanced Contrast (override landing-enhanced light gradient) */
body.app-theme-light .hero-headline {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #0f172a !important;
  text-shadow: none !important;
  filter: none !important;
}

body.app-theme-light .hero-headline .text-gradient {
  background: linear-gradient(135deg, #4f46e5, #9333ea) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Hero Headline - Force Override (ensure dark gradient on light bg) */
body.app-theme-light h1.hero-headline,
body.app-theme-light .hero-full .hero-headline,
body.app-theme-light .hero-content .hero-headline {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #0f172a !important;
  text-shadow: none !important;
}

/* Stats Footnote — 纯文字脚注，无独立卡片底 */
body.app-theme-light .stats-footnote {
  color: #64748b !important;
}

/* LP Split Media Placeholder - 背景音分离/说话人轨道/情感克隆示意图 */
body.app-theme-light .lp-split-media.placeholder-slot {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.95)) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

body.app-theme-light .lp-media-inner {
  background: rgba(241, 245, 249, 0.9) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

body.app-theme-light .lp-media-label {
  color: #334155 !important;
}

body.app-theme-light .lp-split-media.placeholder-slot .lp-media-label,
body.app-theme-light .lp-case-media.placeholder-slot .lp-media-label {
  color: #1e293b !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
}

body.app-theme-light .lp-placeholder-hint {
  color: #475569 !important;
}

/* LP Split Text Enhanced */
body.app-theme-light .lp-split-text h3 {
  color: #0f172a !important;
}

body.app-theme-light .lp-split-text p {
  color: #475569 !important;
}

body.app-theme-light .lp-kicker {
  color: #6366f1 !important;
  background: rgba(99, 102, 241, 0.1) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
}

body.app-theme-light .lp-bullet {
  color: #334155 !important;
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}

body.app-theme-light .lp-bullet::before {
  background: #6366f1 !important;
}

/* LP Split Row Step Advantage */
body.app-theme-light .lp-split-row.step-advantage .lp-split-text p {
  color: #475569 !important;
}

body.app-theme-light .lp-split-row.step-advantage .lp-kicker {
  color: #6366f1 !important;
}

body.app-theme-light .lp-split-row.step-advantage h3 {
  color: #0f172a !important;
}

body.app-theme-light .lp-split-row.step-advantage .lp-bullet {
  color: #334155 !important;
  background: rgba(15, 23, 42, 0.05) !important;
}

/* LP Split Media Placeholder - Light Mode */
body.app-theme-light .lp-split-media.placeholder-slot {
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.8), rgba(241, 245, 249, 0.95)) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08) !important;
}

body.app-theme-light .lp-split-media.placeholder-slot::before {
  background-image: none !important;
}

body.app-theme-light .lp-split-media.placeholder-slot::after {
  background-image: none !important;
}

/* lp-case-media：案例卡片内的示意图位 */
body.app-theme-light .lp-case-media.placeholder-slot {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.9)) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

body.app-theme-light .lp-case-media.placeholder-slot .lp-media-inner {
  background: transparent !important;
}

/* 通用 placeholder-slot 浅色模式 */
body.app-theme-light .placeholder-slot {
  border-color: rgba(15, 23, 42, 0.15) !important;
  background-image:
    linear-gradient(135deg, rgba(241, 245, 249, 0.6), rgba(226, 232, 240, 0.5)),
    radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.06), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.05), transparent 55%) !important;
}

/* ========================================
   Landing Glass Variables (light)
   落地页子树使用 .landing-page 上的 --lp-surface-*，此处不覆盖
   ======================================== */
body.app-theme-light:not(:has(.landing-page)) {
  --orb-glass-bg: rgba(255, 255, 255, 0.96);
  --orb-glass-border: rgba(15, 23, 42, 0.09);
}

/* Detail panel, feature rows - light variants */
body.app-theme-light .lp-detail-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.95) 100%) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

body.app-theme-light .lp-feature-rows {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
}