/* ============================================================
   上海百析 baixish.com — 全站浅色科技风 (theme-light.css)
   适用范围：除首页 index.html 外的所有子页面（覆盖 style.css 默认浅色排版，加科技质感）
   设计语言：与首页 home.css 统一 —— 纯白通透底 + 青蓝紫渐变 + 玻璃拟态 + 蓝图网格 + 辉光
   原理：① :root 变量统一为浅色科技调
         ② 显式覆盖写死深色/内联暗色的组件（page-hero / 卡片 / 表单 / 产品详情 / 搜索 / AI / 耗材 / 页脚）
   ============================================================ */

/* ---------- 1. 画布 ---------- */
html { background: #f5f8fc; }
body {
  background: #f5f8fc;
  color: #0f2747;
}

/* ---------- 2. :root 变量（浅色科技调） ---------- */
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-deep: #1e3a8a;
  --primary-ink: #0f1b34;
  --primary-light: rgba(37,99,235,.12);
  --primary-softer: rgba(37,99,235,.06);
  --accent: #0bbbd6;
  --accent-deep: #0e9aa8;
  --ink: #0f2747;
  --ink-soft: #41506a;
  --gray-900: #0f2747;
  --gray-800: #1c2f4f;
  --gray-700: #41506a;
  --gray-600: #5b6b82;
  --gray-500: #7a8aa3;
  --gray-400: #9fb0c8;
  --gray-300: rgba(15,39,71,.12);
  --gray-200: rgba(15,39,71,.08);
  --gray-100: rgba(15,39,71,.04);
  --white: #ffffff;
  --bg-app: #f5f8fc;
  --primary-bright: #7c3aed;
  --primary-bright-soft: rgba(124,58,237,.12);
  --shadow-xs: 0 1px 2px rgba(20,60,120,.08);
  --shadow-sm: 0 2px 10px rgba(20,60,120,.10);
  --shadow-md: 0 12px 30px rgba(20,60,120,.12);
  --shadow-lg: 0 20px 54px rgba(20,60,120,.16);
  --shadow-primary: 0 8px 22px rgba(124,58,237,.30);
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --surface: rgba(255,255,255,.72);
  --surface-2: rgba(255,255,255,.88);
  --border-soft: rgba(15,39,71,.10);
  --border-line: rgba(15,39,71,.14);
  --text-1: #0f2747;
  --text-2: #41506a;
  --text-3: #7a8aa3;
  --grad: linear-gradient(135deg,#22d3ee 0%, #7c3aed 50%, #c026d3 100%);
}

/* ---------- 3. 导航：浅色玻璃态 ---------- */
.navbar {
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid rgba(15,39,71,.08);
}
.navbar.scrolled {
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 30px rgba(20,60,120,.10);
}
.nav-links a { color: #2a3a55; }
.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta).active { color: #6d28d9; }
.nav-links a:not(.nav-cta)::after { background: var(--grad); }
.nav-cta {
  background: linear-gradient(135deg,#f97316,#fb923c) !important;
  color: #fff !important; font-weight: 700;
  box-shadow: 0 6px 18px rgba(249,115,22,.36);
}
.nav-cta:hover { box-shadow: 0 8px 24px rgba(249,115,22,.5); }
.nav-toggle span { background: #2a3a55; }
.nav-search-btn { color: #2a3a55; }

/* ---------- 4. Page Hero：纯白底 + 蓝图网格 + 青紫辉光（科技但明亮） ---------- */
.page-hero {
  background:
    linear-gradient(rgba(124,58,237,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.07) 1px, transparent 1px),
    radial-gradient(900px 480px at 82% 0%, rgba(34,211,238,.20), transparent 60%),
    radial-gradient(820px 480px at 0% 100%, rgba(192,38,211,.16), transparent 55%),
    linear-gradient(160deg,#ffffff 0%, #eef4fb 50%, #f5f8fc 100%);
  background-size: 46px 46px, 46px 46px, 100% 100%, 100% 100%, 100% 100%;
  color: #0f2747;
}
.page-hero::before { background: radial-gradient(circle, rgba(34,211,238,.14) 0%, transparent 70%); }
.page-hero::after { background: radial-gradient(circle, rgba(192,38,211,.12) 0%, transparent 70%); }
.page-hero h1 { color: #0f2747; }
.page-hero h1 .hl,
.page-hero h1 em {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: normal;
}
.page-hero p { color: #41506a; }
.page-hero .section-tag { color: #6d28d9; justify-content: center; }

/* ---------- 5. 区块标题（科技感：渐变胶囊小标 + 深蓝大标题） ---------- */
.section-title { color: #0f2747; }
.section-desc { color: #5b6b82; }
.section-tag {
  display: inline-block; font-size: 13px; letter-spacing: .12em; font-weight: 700;
  color: #6d28d9; padding: 6px 16px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(124,58,237,.12)); border: 1px solid rgba(124,58,237,.28);
  margin-bottom: 16px;
}
.section-tag::before, .section-tag::after { display: none; }

/* ---------- 6. 卡片（浅色玻璃拟态 + 渐变顶线） ---------- */
.feature-card,
.quality-card,
.value-item,
.product-card,
.fb-card {
  background: var(--surface);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.feature-card:hover,
.quality-card:hover,
.value-item:hover,
.product-card:hover,
.fb-card:hover {
  border-color: rgba(124,58,237,.45);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.feature-card h3,
.quality-card h3,
.value-item h4,
.about-text h2,
.about-values h2 { color: #0f2747; }
.feature-card p,
.quality-card p,
.value-item p,
.about-text p { color: #5b6b82; }
.feature-icon .icon-badge,
.value-item .value-header .icon-badge {
  background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(124,58,237,.16));
  color: #6d28d9;
}
.feature-card::before,
.value-item::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: var(--grad); transform: scaleX(0); transform-origin: left;
  transition: transform .3s; border-radius: 16px 16px 0 0;
}
.feature-card:hover::before,
.value-item:hover::before { transform: scaleX(1); }

/* ---------- 7. 按钮（青蓝紫渐变，白字） ---------- */
.btn-primary {
  background: var(--grad);
  color: #fff; box-shadow: 0 8px 22px rgba(124,58,237,.30);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(124,58,237,.42); }
.btn-outline {
  background: rgba(255,255,255,.7);
  color: #0f2747;
  border: 1.5px solid rgba(15,39,71,.18);
}
.btn-outline:hover { border-color: #7c3aed; color: #2563eb; background: #fff; }
.btn-ghost {
  background: transparent;
  color: #41506a;
  border: 1.5px solid rgba(15,39,71,.18);
}
.btn-ghost:hover { border-color: #7c3aed; color: #2563eb; }
/* CTA 带内的按钮（浅底上保持渐变主按钮 + 描边次按钮） */
.cta-band .btn-primary { background: var(--grad); color: #fff; box-shadow: none; }
.cta-band .btn-primary:hover { box-shadow: 0 10px 28px rgba(124,58,237,.40); }
.cta-band .btn-outline { color: #0f2747; border-color: rgba(15,39,71,.30); }
.cta-band .btn-outline:hover { background: rgba(15,39,71,.05); border-color: #7c3aed; color: #2563eb; }

/* ---------- 8. 表单（联系页） ---------- */
.contact-form {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
}
.contact-form h3 { color: #0f2747; }
.form-group label { color: #41506a; }
.form-group input,
.form-group textarea,
.form-group select {
  background: #fff;
  border: 1.5px solid rgba(15,39,71,.16);
  color: #0f2747;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #9fb0c8; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 4px rgba(124,58,237,.14);
}
.contact-item h4 { color: #0f2747; }
.contact-item p { color: #5b6b82; }
.contact-item strong { color: #6d28d9; }
.contact-info h2 { color: #0f2747; }

/* ---------- 9. 关于我们 ---------- */
.stats-band {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
}
.stat-num { color: #0f2747; font-family: var(--font-num); }
.stat-label { color: #5b6b82; }
.about-story { color: #41506a; }
.about-image { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; }
.about-gallery figure { box-shadow: var(--shadow-md); }
.about-gallery img { border-radius: var(--radius-lg); }
.partner-tag {
  background: rgba(15,39,71,.04);
  border: 1px solid rgba(15,39,71,.12);
  color: #5b6b82;
}
.partner-tag:hover { background: var(--grad); color: #fff; border-color: transparent; }

/* ---------- 10. 产品服务 / 产品详情 / 搜索结果 ---------- */
.search-hero {
  background:
    linear-gradient(rgba(124,58,237,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.07) 1px, transparent 1px),
    radial-gradient(900px 480px at 82% 0%, rgba(34,211,238,.20), transparent 60%),
    radial-gradient(820px 480px at 0% 100%, rgba(192,38,211,.16), transparent 55%),
    linear-gradient(160deg,#ffffff 0%, #eef4fb 50%, #f5f8fc 100%) !important;
  background-size: 46px 46px, 46px 46px, 100% 100%, 100% 100%, 100% 100% !important;
}
.search-hero h1 { color: #0f2747 !important; }
.search-hero p { color: #41506a !important; }
.product-detail { color: #41506a; }
.pd-visual {
  border: 1px solid var(--border-soft);
  border-radius: 16px; overflow: hidden;
  background: var(--surface);
}
.product-tag,
.pd-badge {
  background: rgba(124,58,237,.10);
  color: #6d28d9;
  border: 1px solid rgba(124,58,237,.28);
}
.chip-link {
  background: rgba(15,39,71,.04);
  border: 1px solid rgba(15,39,71,.12);
  color: #5b6b82;
}
.chip-link:hover { background: var(--grad); color: #fff; border-color: transparent; }

/* 产品详情页（product.html 内联暗色覆盖翻浅） */
.pd-page { background: linear-gradient(160deg,#eef4fb 0%, #f5f8fc 100%) !important; }
.pd-name,
.pd-pricing-title,
.pd-related-title { color: #0f2747 !important; }
.pd-en,
.pd-pricing-note,
.pd-related-sub { color: #5b6b82 !important; }
.pd-smiles {
  background: #fff;
  border: 1px solid rgba(15,39,71,.12);
  color: #41506a;
}
.pd-attr {
  background: rgba(124,58,237,.10) !important;
  border: 1px solid rgba(124,58,237,.28) !important;
  color: #6d28d9 !important;
}
.pd-related {
  background: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  box-shadow: var(--shadow-sm) !important;
}
.pd-price { color: #6d28d9 !important; }

/* 搜索结果（search.html 内联暗色覆盖翻浅） */
.search-box input {
  background: #fff;
  border: 1px solid rgba(15,39,71,.16);
  color: #0f2747;
}
.search-box input::placeholder { color: #9fb0c8; }
.search-box .ic { color: #5b8fd0; }
.result-bar { color: #5b6b82; }
.result-count { color: #5b6b82; }
.result-count b { color: #6d28d9; }
.prod-card {
  background: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
}
.prod-card:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-3px); }
.prod-img {
  background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(99,102,241,.12)) !important;
  color: #6d28d9;
}
.prod-img .formula-fallback { color: #6d28d9; }
.prod-name { color: #0f2747 !important; }
.prod-en { color: #5b6b82; }
.prod-meta { color: #41506a; }
.prod-meta span { color: #9fb0c8; }
.prod-foot { border-top: 1px solid rgba(15,39,71,.10); }
.prod-price { color: #6d28d9; }
.prod-inquiry { background: var(--grad); color: #fff; }
.prod-inquiry:hover { box-shadow: 0 10px 28px rgba(124,58,237,.40); }
.empty { color: #5b6b82; }
.formula-fallback { color: #6d28d9; }
.breadcrumb { color: #5b6b82; }
.breadcrumb a { color: #5b6b82; }
.breadcrumb a:hover { color: #2563eb; }

/* ---------- 11. AI 合成 / 逆合成 ---------- */
.ai-card,
.ai-result,
.ai-retro-result {
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.ai-input {
  background: #fff;
  border: 1px solid rgba(15,39,71,.16);
  color: #0f2747;
}
.ai-input::placeholder { color: #9fb0c8; }
.ai-chip {
  background: rgba(15,39,71,.04);
  border: 1px solid rgba(15,39,71,.12);
  color: #5b6b82;
}
.ai-chip:hover { background: rgba(124,58,237,.10); color: #6d28d9; }
.ai-notes,
.ai-metric {
  background: rgba(15,39,71,.03);
  border: 1px solid rgba(15,39,71,.10);
  color: #41506a;
}
.retro-summary {
  background: rgba(124,58,237,.08);
  border-left: 3px solid #7c3aed;
  color: #1c3a66;
}
.retro-step {
  background: rgba(15,39,71,.03);
  border-left: 2px solid #7c3aed;
}
.retro-step::before { background: #7c3aed; border: 2px solid #eef4fb; }
.retro-warn { background: rgba(245,180,40,.14); color: #9a6b00; }
.retro-disclaimer { background: rgba(239,90,90,.10); color: #c0392b; }
.ai-level.l-mid { background: rgba(245,180,40,.14); color: #9a6b00; }
.ai-level.l-high { background: rgba(239,90,90,.10); color: #c0392b; }
.ai-examples, .ai-hint { color: #5b6b82; }
.ai-empty { color: #9fb0c8; }

/* ---------- 12. 耗材中心（consumables.css 适配） ---------- */
.cs-toolbar { background: #f5f8fc !important; box-shadow: 0 6px 20px rgba(20,60,120,.06) !important; }
.cs-toolbar .lbl { color: #5b6b82; }
.chip {
  background: rgba(255,255,255,.85);
  border-color: rgba(15,39,71,.14);
  color: #41506a;
}
.chip:hover { border-color: #7c3aed; color: #2563eb; }
.chip.on {
  background: var(--grad);
  border-color: transparent; color: #fff;
}
select.cs-sel {
  background: #fff;
  border-color: rgba(15,39,71,.16);
  color: #0f2747;
}
.vswitch button {
  background: rgba(255,255,255,.85);
  border-color: rgba(15,39,71,.14);
  color: #41506a;
}
.vswitch button.on { background: var(--grad); color: #fff; }
.pg-hd { background: var(--surface) !important; }
.qk-tb th { background: rgba(15,39,71,.04); color: #5b6b82; }
.qk-tb th, .qk-tb td { border-color: rgba(15,39,71,.10); }
.qk-tb tbody tr:hover td { background: rgba(124,58,237,.05); }
.cat-ic.has-img { background: rgba(15,39,71,.04) !important; }
.shead .ic.has-img { background: rgba(15,39,71,.04) !important; }
.cat-live, .pc-s-live { background: rgba(16,185,129,.14); color: #0e9f6e; }
.cat-none, .pc-s-new { background: rgba(245,180,40,.16); color: #9a6b00; }
.cat, .pc {
  background:
    radial-gradient(240px 240px at var(--mx,50%) var(--my,-12%), rgba(34,211,238,.12), transparent 70%),
    #ffffff !important;
}
.shead { background: var(--surface); border-color: var(--border-soft); }
.quote-bar {
  background: rgba(255,255,255,.92) !important;
  border-top: 1px solid rgba(124,58,237,.25) !important;
  box-shadow: 0 -8px 30px rgba(20,60,120,.10) !important;
}
.quote-bar .qb-count { color: #6d28d9; }

/* ---------- 13. 页脚（改浅，与全站统一明亮） ---------- */
.footer {
  background: linear-gradient(180deg,#eef3fa 0%, #e7eef8 100%);
  color: #41506a;
  border-top: 1px solid rgba(15,39,71,.08);
}
.footer-grid { border-bottom: 1px solid rgba(15,39,71,.10); }
.footer-brand .logo { background: transparent; }
.footer-brand p { color: #5b6b82; }
.footer h4 { color: #0f2747; }
.footer-links a { color: #5b6b82; }
.footer-links a .ico { color: #6d28d9; }
.footer-links a:hover { color: #6d28d9; padding-left: 4px; }
.footer-bottom { color: #7a8aa3; border-top: 1px solid rgba(15,39,71,.08); }
.footer-bottom .icp { color: #7a8aa3; }

/* ---------- 14. 选区与滚动条（细节） ---------- */
::selection { background: rgba(124,58,237,.22); color: #0f2747; }
* { scrollbar-color: #b9c6da #eef3fa; }

/* ---------- 15. 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .animate-in { transition: none; }
}