/* ===== Light theme override ===== */
/* Layers on top of styles.css to flip dark → light without rewriting everything */

:root {
  /* Keep brand but darken slightly for contrast */
  --brand: #0052ff;
  --brand-2: #2454f4;
  --brand-deep: #003ec7;

  /* Flipped backgrounds */
  --bg-0: #ffffff;
  --bg-1: #fafbff;
  --bg-2: #f5f7fb;
  --bg-3: #eef1f8;

  /* Surfaces & borders (dark overlays → light overlays) */
  --surface: rgba(15, 20, 51, 0.025);
  --surface-2: rgba(15, 20, 51, 0.05);
  --border: rgba(15, 20, 51, 0.08);
  --border-strong: rgba(15, 20, 51, 0.14);
  --border-brand: rgba(0, 82, 255, 0.28);

  /* Text scale flipped */
  --text-0: #0a0f1f;
  --text-1: #1f2541;
  --text-2: #5f6788;
  --text-3: #8b92ac;
  --text-4: #b4bacc;

  --shadow-card: 0 20px 50px -22px rgba(15, 27, 74, 0.18), 0 6px 20px -10px rgba(15, 27, 74, 0.1);
  --shadow-glow: 0 0 0 1px rgba(0, 82, 255, 0.18), 0 20px 60px -20px rgba(0, 82, 255, 0.35);
}

body {
  background: #fafbff;
  color: var(--text-1);
}

/* Background stage — soft tinted wash instead of deep navy */
.bg-stage {
  background:
    radial-gradient(1100px 600px at 15% -10%, rgba(0, 82, 255, 0.12), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(76, 214, 255, 0.07), transparent 60%),
    radial-gradient(800px 600px at 50% 100%, rgba(139, 92, 246, 0.05), transparent 60%),
    linear-gradient(180deg, #fafbff 0%, #ffffff 60%, #fafbff 100%);
}
.bg-grid {
  background-image:
    linear-gradient(rgba(15, 27, 74, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 27, 74, 0.04) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse at 50% 0%, black 10%, transparent 65%);
}

/* Nav */
.nav {
  background: rgba(255, 255, 255, 0.75);
}
.nav.scrolled { border-color: var(--border); }

/* Hero badge + gradient accent */
.hero-badge { background: rgba(255, 255, 255, 0.8); }
.hero h1 .accent {
  background: linear-gradient(180deg, #4f7fff 0%, #0052ff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero h1 .underline::after {
  background: rgba(0, 82, 255, 0.18);
}

/* Hero stage (wraps the mock) — light tint instead of navy */
.hero-stage {
  background: linear-gradient(180deg, rgba(0, 82, 255, 0.08) 0%, rgba(0, 82, 255, 0) 100%);
}
.hero-stage::before {
  background: radial-gradient(600px 200px at 50% 0%, rgba(0, 82, 255, 0.18), transparent 60%);
}
.hero-screenshot-wrap {
  background: #ffffff;
  box-shadow: 0 30px 80px -30px rgba(15, 27, 74, 0.25), 0 10px 30px -10px rgba(15, 27, 74, 0.12);
}

/* Floating cards in hero */
.floating-card {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-1);
  border-color: var(--border-strong);
  box-shadow: 0 20px 50px -20px rgba(15, 27, 74, 0.2);
}
.floating-card .title { color: var(--text-0); }

/* Hero product shot container — replace navy with near-white */
.hv-shot {
  background: #ffffff;
  box-shadow:
    0 40px 100px -30px rgba(15, 27, 74, 0.28),
    0 20px 40px -10px rgba(0, 82, 255, 0.12),
    0 0 0 1px rgba(15, 27, 74, 0.05) inset;
}

/* Hero chips (floating badges on product shot) */
.hv-chip-fp, .hv-chip-sync, .hv-chip-live {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--text-0) !important;
  border-color: var(--border-strong) !important;
  box-shadow: 0 14px 40px -14px rgba(15, 27, 74, 0.25) !important;
}
.hv-chip-fp .hv-chip-t,
.hv-chip-sync .hv-chip-t { color: var(--text-0); }
.hv-chip-fp .hv-chip-s,
.hv-chip-sync .hv-chip-s { color: var(--text-3); }
.hv-chip-ic { background: rgba(0, 82, 255, 0.1) !important; color: var(--brand) !important; }
.hv-chip-ic.g { background: rgba(16, 185, 129, 0.12) !important; color: var(--green) !important; }

/* Hero viz (back windows, rings) */
.hv-back-grid,
.hv-back-windows,
.hv-ring,
.hv-dot {
  /* keep as-is structurally; just recolor borders */
}
.hv-back-windows > * {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: var(--border) !important;
}

/* Stats row */
.stats { border-color: var(--border); }
.stat { border-right-color: var(--border); }

/* Features (bento) */
.feature {
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(15, 27, 74, 0.03);
}
.feature:hover {
  border-color: var(--border-brand);
  box-shadow: 0 20px 40px -20px rgba(15, 27, 74, 0.15);
}
.feature .icon {
  background: rgba(0, 82, 255, 0.08);
  color: var(--brand);
  border-color: var(--border-brand);
}
.mini-windows .mw {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--border);
}
.mini-windows .mw::before { background: rgba(15, 27, 74, 0.04); border-bottom-color: var(--border); }

/* Tab demo */
.tabs-demo {
  background: linear-gradient(180deg, rgba(0, 82, 255, 0.03), rgba(255,255,255,0));
  border-color: var(--border);
}
.tabs-head { background: rgba(255, 255, 255, 0.6); border-bottom-color: var(--border); }
.tab-btn { color: var(--text-2); }
.tab-btn:hover { color: var(--text-0); }
.tab-btn.on {
  background: #ffffff;
  color: var(--text-0);
  border-color: var(--border);
  box-shadow: 0 2px 6px rgba(15, 27, 74, 0.05);
}
.tab-copy { border-right-color: var(--border); }
.tab-copy li .check { background: rgba(16, 185, 129, 0.12); color: var(--green); }
.tab-visual {
  background: radial-gradient(500px 300px at 50% 50%, rgba(0, 82, 255, 0.08), transparent 70%);
}

/* Fingerprint viz */
.fp-ring { border-color: var(--border); }
.fp-ring.r2 { border-color: var(--border-brand); }
.fp-ring.r3 { border-color: rgba(0, 82, 255, 0.45); }
.fp-ring.r4 { border-color: rgba(0, 82, 255, 0.75); }
.fp-center {
  background: radial-gradient(circle, var(--brand), var(--brand-deep));
  box-shadow: 0 0 60px rgba(0, 82, 255, 0.5);
}
.fp-tag {
  background: #ffffff;
  color: var(--text-0);
  border-color: var(--border-strong);
  box-shadow: 0 4px 12px rgba(15, 27, 74, 0.1);
}

/* Windows grid in tabs */
.mini-win {
  background: #ffffff;
  border-color: var(--border);
}
.mini-win:hover { border-color: var(--border-brand); }
.mini-win .mw-head { background: rgba(15, 27, 74, 0.03); border-bottom-color: var(--border); }
.mini-win .mw-body .line { background: rgba(15, 27, 74, 0.08); }
.mini-win .mw-body .line.b { background: rgba(0, 82, 255, 0.28); }
.mini-win .mw-flag { background: rgba(0, 82, 255, 0.1); color: var(--brand); }

/* Team viz */
.team-row {
  background: #ffffff;
  border-color: var(--border);
}
.team-perm.admin { background: rgba(0, 82, 255, 0.12); color: var(--brand); }

/* RPA viz */
.rpa-viz {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: 0 4px 16px rgba(15, 27, 74, 0.06);
}
.rpa-header { border-bottom-color: var(--border); color: var(--text-3); }
.rpa-step.done { background: rgba(16, 185, 129, 0.08); color: var(--text-1); }
.rpa-step.run { background: rgba(0, 82, 255, 0.08); color: var(--text-0); }
.rpa-step .num { background: rgba(15, 27, 74, 0.06); }

/* Scenes */
.scene { background: #ffffff; border-color: var(--border); }
.scene:hover {
  background: linear-gradient(180deg, rgba(0, 82, 255, 0.04), #ffffff);
  border-color: var(--border-brand);
}
.scene .scene-icon {
  background: rgba(0, 82, 255, 0.08);
  border-color: var(--border-brand);
  color: var(--brand);
}
.scene .scene-stats { border-top-color: var(--border); }

/* Pricing */
.pricing-toggle { background: #ffffff; border-color: var(--border); }
.pricing-toggle button.on { background: rgba(0, 82, 255, 0.08); color: var(--brand); }
.plan {
  background: #ffffff;
  border-color: var(--border);
}
.plan:hover { border-color: var(--border-strong); }
.plan.featured {
  border-color: var(--brand);
  background: linear-gradient(180deg, rgba(0, 82, 255, 0.05), #ffffff);
  box-shadow: 0 0 0 1px var(--brand), 0 30px 70px -30px rgba(0, 82, 255, 0.35);
}
.plan .plan-features { border-top-color: var(--border); }

/* FAQ */
.faq-item {
  background: #ffffff;
  border-color: var(--border);
}
.faq-item.open { border-color: var(--border-brand); }

/* CTA */
.cta {
  background: linear-gradient(180deg, rgba(0, 82, 255, 0.08), rgba(0, 82, 255, 0.02));
  border-color: var(--border);
}
.cta::before {
  background: radial-gradient(500px 300px at 50% 0%, rgba(0, 82, 255, 0.22), transparent 70%);
}

/* Footer */
footer { border-top-color: var(--border); }
.footer-grid { border-bottom-color: var(--border); }

/* Ghost button — stronger outline on light */
.btn-ghost {
  color: var(--text-0);
  border-color: var(--border-strong);
  background: #ffffff;
}
.btn-ghost:hover { background: var(--bg-2); }

/* Lang switch */
.lang { border-color: var(--border); background: #ffffff; }
.lang button { color: var(--text-3); }
.lang button.on { background: rgba(0, 82, 255, 0.08); color: var(--brand); }

/* Hero meta dot */
.hero-meta { color: var(--text-3); }

/* Hero proof (avatars) */
.hp-avatar { border-color: #ffffff; box-shadow: 0 2px 8px rgba(15, 27, 74, 0.12); }

/* AppMock already light — no changes needed */

/* =========================================================
   扫尾：所有 styles.css 中写死的深色 rgba(15,20,51,*)
   和 rgba(255,255,255,*) 叠加层的浅色覆盖
   ========================================================= */

/* Hero back-windows (错位浏览器窗口) */
.hv-win {
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%) !important;
  border-color: var(--border-strong) !important;
  box-shadow:
    0 30px 60px -24px rgba(15, 27, 74, 0.2),
    0 10px 24px -10px rgba(15, 27, 74, 0.1) !important;
}

/* Window bars — 标签栏/地址栏 */
.hv-win-bar {
  background: #f5f7fb !important;
  border-bottom-color: var(--border) !important;
  color: var(--text-3) !important;
}
.hv-win-bar > span:not(.wb-dot) {
  background: rgba(15, 27, 74, 0.12) !important;
}
.hv-win-bar em { color: var(--text-3) !important; }

.wb-tab {
  background: rgba(15, 27, 74, 0.04) !important;
  color: var(--text-3) !important;
  border-color: transparent !important;
}
.wb-tab.on {
  background: #ffffff !important;
  color: var(--text-0) !important;
  border-color: var(--border) !important;
  border-bottom-color: transparent !important;
}
.wb-tab.add { background: transparent !important; color: var(--text-3) !important; }

.hv-win-url {
  background: rgba(15, 27, 74, 0.02) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text-2) !important;
}

.hv-win-body.hv-body-b {
  background:
    linear-gradient(180deg, rgba(0, 82, 255, 0.04), transparent),
    repeating-linear-gradient(180deg, transparent 0, transparent 18px, rgba(15, 27, 74, 0.04) 18px, rgba(15, 27, 74, 0.04) 19px) !important;
}

/* fingerprint grid dashed separators */
.hv-fp-grid > div {
  border-bottom-color: rgba(15, 27, 74, 0.08) !important;
}

/* progress bars inside windows */
.hv-win *[class*="bar"],
.hv-win *[class*="track"] {
  background: rgba(15, 27, 74, 0.06) !important;
}

/* Hero screenshot wrap (legacy — still referenced for image fallback) */
.hero-screenshot-wrap {
  background: #ffffff !important;
}

/* ===== Feature cards that had dark mw2 mini windows ===== */
.mw2 {
  background: #ffffff !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 12px rgba(15, 27, 74, 0.05) !important;
}
.mw2-bar {
  background: rgba(15, 27, 74, 0.04) !important;
  border-bottom-color: var(--border) !important;
}

/* Mini window chrome buttons baseline */
.mini-win .mw-head,
.mini-windows .mw::before {
  background: rgba(15, 27, 74, 0.04) !important;
  border-bottom-color: var(--border) !important;
}

/* Mini-win body line placeholders */
.mini-win .mw-body .line {
  background: rgba(15, 27, 74, 0.08) !important;
}
.mini-win .mw-body .line.b {
  background: rgba(0, 82, 255, 0.3) !important;
}

/* ===== Feature F2 — team row / permission chips (dark stripes) ===== */
.tm-row {
  background: #ffffff !important;
  border-color: var(--border) !important;
}
.tm-perm.admin { background: rgba(0, 82, 255, 0.12) !important; color: var(--brand) !important; }
.tm-perm.view  { background: rgba(15, 27, 74, 0.06) !important; color: var(--text-3) !important; }

.team-perm.view { background: rgba(15, 27, 74, 0.06) !important; color: var(--text-3) !important; }

/* Proxy / country rows that had dark background */
.px-row,
.rpa-row,
.country-row,
.pr-row {
  background: #ffffff !important;
  border-color: var(--border) !important;
}

/* Any progress track anywhere */
.pr-track,
.tm-track,
.rpa-track {
  background: rgba(15, 27, 74, 0.06) !important;
}

/* RPA step number circle */
.rpa-step .num { background: rgba(15, 27, 74, 0.06) !important; }

/* ===== Tab head strip ===== */
.tabs-head { background: rgba(255, 255, 255, 0.7) !important; }

/* ===== Chips / pills on cards ===== */
.chip,
.feature .chip,
.badge-soft {
  background: rgba(15, 27, 74, 0.05) !important;
  color: var(--text-1) !important;
  border-color: var(--border) !important;
}

/* ===== Generic: any card that used surface var with dark-mode assumption ===== */
.scene,
.feature,
.plan,
.faq-item,
.tabs-demo,
.rpa-viz,
.team-row,
.mini-win {
  /* already handled above but ensure backgrounds stay white */
}

/* Nav dropdown / mobile menu if any */
.nav-links a { color: var(--text-2); }
.nav-links a:hover { color: var(--text-0); }

/* Primary button keep */
.btn-primary {
  background: linear-gradient(180deg, #2f6bff 0%, var(--brand) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 10px 30px -10px rgba(0, 82, 255, 0.55);
}
.btn-primary:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 16px 40px -10px rgba(0, 82, 255, 0.7);
}

/* Hero eyebrow pill + logo dot shadow */
.eyebrow::before { box-shadow: 0 0 12px rgba(0, 82, 255, 0.6); }
.logo img { box-shadow: 0 4px 20px rgba(0, 82, 255, 0.3); }

/* ===================================================================
   Feature-card inner widgets — convert deep-navy mockups to light tones
   =================================================================== */

/* F2 · 多窗口并行 — win-card (browser frame mock) */
.win-card {
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fd 100%) !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 20px -12px rgba(15, 27, 74, 0.12);
}
.win-chrome {
  background: rgba(15, 27, 74, 0.03) !important;
  border-bottom-color: var(--border) !important;
}
.win-chrome .wc-dots i { background: rgba(15, 27, 74, 0.1) !important; }
.win-chrome .wc-url { color: var(--text-2) !important; }
.wb-line { opacity: 0.7; }

/* F4 · RPA 自动化 — rpa-panel */
.rpa-panel-head {
  background: rgba(15, 27, 74, 0.04) !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
}
.rpa-ph-name { color: var(--text-0) !important; }
.rpa-progress {
  background: rgba(15, 27, 74, 0.06) !important;
}
.rpa-progress-label { color: var(--text-3) !important; }
.rpa-row {
  background: #ffffff !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 6px -3px rgba(15, 27, 74, 0.08);
}
.rpa-row.done { background: color-mix(in srgb, var(--green, #10b981) 6%, #ffffff) !important; }
.rpa-row.run  { background: color-mix(in srgb, var(--brand) 6%, #ffffff) !important; }
.rpa-row-i { color: var(--text-3) !important; }
.rpa-row-t { color: var(--text-1) !important; }
.rpa-row-d { color: var(--text-3) !important; }

/* F3 · 代理一站管理 — proxy-card */
.proxy-globe {
  background:
    radial-gradient(circle at 30% 30%, rgba(47, 85, 239, 0.18), transparent 60%),
    linear-gradient(180deg, #f2f5fd 0%, #e8ecf8 100%) !important;
  border-color: var(--border) !important;
}
.pp-row {
  background: #ffffff !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 6px -3px rgba(15, 27, 74, 0.06);
}
.pp-row .pp-city { color: var(--text-1) !important; }

/* F6 · 端到端加密 — crypto-code (hex dump) */
.crypto-code,
.crypto-block {
  background: rgba(15, 27, 74, 0.04) !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
}