/* ============================================================================
   BizFlow — 页面级样式 (css/pages.css)
   ----------------------------------------------------------------------------
   按页面分节组织，只放"单个页面专属"的样式；跨页面复用的组件样式在 components.css。
   分节目录：
     1. Landing Page（index.html）—— .lp- 前缀
   ========================================================================== */

/* ============================================================================
   1. Landing Page
   ============================================================================ */

/* ---------- 1.1 导航栏 ---------- */
.lp-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bf-border-color);
}

[data-bs-theme="dark"] .lp-navbar {
  background: rgba(15, 21, 36, .86);
}

.lp-navbar-inner {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.lp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--bf-text-primary);
  text-decoration: none;
}

.lp-brand em {
  font-style: normal;
  color: var(--bf-primary-600);
}

.lp-nav-links {
  display: flex;
  gap: 4px;
}

.lp-nav-links a {
  padding: 8px 12px;
  border-radius: var(--bf-radius-md);
  font-size: var(--bf-text-md);
  color: var(--bf-text-secondary);
  text-decoration: none;
  transition: color var(--bf-transition-fast), background-color var(--bf-transition-fast);
}

.lp-nav-links a:hover {
  color: var(--bf-primary-600);
  background-color: var(--bf-bg-subtle);
}

.lp-nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.lp-nav-login {
  font-size: var(--bf-text-md);
  color: var(--bf-text-secondary);
  text-decoration: none;
  transition: color var(--bf-transition-fast);
}

.lp-nav-login:hover {
  color: var(--bf-primary-600);
}

/* 导航图标按钮（主题切换 / 移动端菜单） */
.lp-icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: var(--bf-radius-md);
  color: var(--bf-text-secondary);
  transition: background-color var(--bf-transition-fast), color var(--bf-transition-fast);
}

.lp-icon-btn:hover {
  background-color: var(--bf-bg-subtle);
  color: var(--bf-text-primary);
}

/* 导航栏出品方署名（BizFlow | 澜图软件工作室出品） */
.lp-brand-by {
  padding-left: 14px;
  margin-left: 2px;
  border-left: 1px solid var(--bf-border-color);
  font-size: var(--bf-text-xs);
  color: var(--bf-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--bf-transition-fast);
}

.lp-brand-by:hover { color: var(--bf-primary-600); }

@media (max-width: 576px) {
  .lp-brand-by { display: none; }
}

/* 主题双图标：跟随 html[data-bs-theme] 显隐 */
.lp-theme-sun { display: none; }
[data-bs-theme="dark"] .lp-theme-sun { display: inline-block; }
[data-bs-theme="dark"] .lp-theme-moon { display: none; }

/* 移动端折叠菜单 */
.lp-mobile-nav {
  border-top: 1px solid var(--bf-border-color);
  padding: 12px 24px 20px;
  background: var(--bf-bg-surface);
}

.lp-mobile-nav a.lp-m-link {
  display: block;
  padding: 10px 4px;
  font-size: var(--bf-text-md);
  color: var(--bf-text-secondary);
  text-decoration: none;
}

.lp-mobile-nav a.lp-m-link:hover { color: var(--bf-primary-600); }

/* ---------- 1.2 按钮 ---------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--bf-radius-md);
  font-size: 16px;
  font-weight: var(--bf-font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--bf-transition-fast),
              border-color var(--bf-transition-fast),
              box-shadow var(--bf-transition-fast),
              transform var(--bf-transition-fast);
}

.lp-btn-primary {
  background: var(--bf-primary-600);
  color: var(--bf-text-on-primary);
  box-shadow: var(--bf-shadow-sm);
}

.lp-btn-primary:hover {
  background: var(--bf-primary-700);
  color: var(--bf-text-on-primary);
  transform: translateY(-1px);
  box-shadow: var(--bf-shadow-md);
}

.lp-btn-outline {
  background: var(--bf-bg-surface);
  color: var(--bf-text-primary);
  border-color: var(--bf-border-color-strong);
}

.lp-btn-outline:hover {
  border-color: var(--bf-primary-300);
  color: var(--bf-primary-600);
}

.lp-btn-white {
  background: #ffffff;
  color: var(--bf-primary-700);
}

.lp-btn-white:hover {
  background: var(--bf-primary-50);
  color: var(--bf-primary-800);
  transform: translateY(-1px);
}

.lp-btn-sm {
  padding: 8px 16px;
  font-size: var(--bf-text-md);
}

/* ---------- 1.3 Hero ---------- */
.lp-hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0 80px;
  text-align: center;
}

/* 顶部一抹极淡的品牌色光晕（唯一的装饰性渐变） */
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(640px 340px at 50% -90px, rgba(79, 70, 229, .08), transparent 70%);
  pointer-events: none;
}

[data-bs-theme="dark"] .lp-hero::before {
  background: radial-gradient(640px 340px at 50% -90px, rgba(129, 140, 248, .10), transparent 70%);
}

.lp-hero .container-xxl {
  position: relative;
}

.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-color);
  box-shadow: var(--bf-shadow-xs);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-font-weight-medium);
  color: var(--bf-text-secondary);
}

.lp-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bf-success);
  box-shadow: 0 0 0 3px var(--bf-success-bg);
}

.lp-hero h1 {
  margin: 22px 0 0;
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--bf-text-primary);
}

.lp-sub {
  max-width: 580px;
  margin: 18px auto 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--bf-text-secondary);
}

.lp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.lp-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  font-size: var(--bf-text-sm);
  color: var(--bf-text-muted);
}

.lp-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lp-hero-meta svg {
  width: 14px;
  height: 14px;
  color: var(--bf-success);
}

/* ---------- 1.4 界面高仿 Mock（纯 CSS/SVG，随主题联动） ---------- */
.lp-mock {
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-color);
  border-radius: var(--bf-radius-xl);
  box-shadow: var(--bf-shadow-lg);
  overflow: hidden;
  text-align: left;
}

.lp-mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bf-border-color);
  background: var(--bf-bg-subtle);
}

.lp-mock-bar .cdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bf-border-color-strong);
}

.lp-mock-url {
  flex: 0 1 340px;
  margin-left: 10px;
  padding: 4px 12px;
  border-radius: var(--bf-radius-pill);
  border: 1px solid var(--bf-border-color);
  background: var(--bf-bg-canvas);
  font-family: var(--bf-font-mono);
  font-size: 11px;
  color: var(--bf-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-mock-body {
  display: flex;
}

/* Mock 侧边栏 */
.lp-mock-side {
  flex-shrink: 0;
  width: 52px;
  padding: 12px 10px;
  border-right: 1px solid var(--bf-border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.lp-mock-side .mdot {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

.lp-mock-side .mdot.brand { background: var(--bf-primary-600); }
.lp-mock-side .mdot.item { background: var(--bf-bg-subtle); }
.lp-mock-side .mdot.item.active { background: var(--bf-primary-100); }

/* Mock 主区 */
.lp-mock-main {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
}

.lp-mock-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.lp-kpi {
  padding: 10px 12px;
  border: 1px solid var(--bf-border-color);
  border-radius: var(--bf-radius-md);
}

.lp-kpi .k-label {
  font-size: 10px;
  color: var(--bf-text-muted);
}

.lp-kpi .k-value {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--bf-text-primary);
  font-variant-numeric: tabular-nums;
}

.lp-kpi .k-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 5px;
  padding: 1px 6px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-success-bg);
  color: var(--bf-success);
  font-size: 10px;
  font-weight: 600;
}

.lp-mock-charts {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.lp-chart-card,
.lp-side-card {
  padding: 12px;
  border: 1px solid var(--bf-border-color);
  border-radius: var(--bf-radius-md);
  min-width: 0;
}

.lp-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--bf-text-primary);
}

.lp-legend {
  display: flex;
  gap: 10px;
  font-size: 10px;
  font-weight: 400;
  color: var(--bf-text-muted);
}

.lp-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
  margin-right: 4px;
}

.lp-mock-line {
  display: block;
  width: 100%;
  height: 110px;
  margin-top: 8px;
}

.lp-mock-xlabels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 9px;
  color: var(--bf-text-faint);
}

/* 热销商品侧卡 */
.lp-side-card .srow {
  margin-top: 12px;
}

.lp-side-card .srow:first-of-type { margin-top: 10px; }

.lp-side-card .s-name {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--bf-text-secondary);
}

.lp-side-card .s-name b {
  font-weight: 600;
  color: var(--bf-text-primary);
  font-variant-numeric: tabular-nums;
}

.lp-side-card .s-bar {
  height: 5px;
  margin-top: 5px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-bg-subtle);
  overflow: hidden;
}

.lp-side-card .s-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--bf-primary-500);
}

/* Mock 表格 */
.lp-mock-table {
  margin-top: 10px;
  border: 1px solid var(--bf-border-color);
  border-radius: var(--bf-radius-md);
  overflow: hidden;
}

.lp-mock-table .trow {
  display: grid;
  grid-template-columns: 1.3fr 1.2fr .9fr .7fr;
  gap: 8px;
  align-items: center;
  padding: 7px 12px;
  border-top: 1px solid var(--bf-border-color);
  font-size: 10.5px;
  color: var(--bf-text-secondary);
}

.lp-mock-table .trow.head {
  border-top: 0;
  background: var(--bf-bg-subtle);
  color: var(--bf-text-muted);
  font-weight: 600;
}

.lp-mock-table .t-co {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--bf-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-mock-table .t-av {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bf-primary-100);
  color: var(--bf-primary-700);
  font-size: 9px;
  font-weight: 600;
}

.lp-mock-table .t-amount {
  font-weight: 600;
  color: var(--bf-text-primary);
  font-variant-numeric: tabular-nums;
}

.lp-mock-table .t-status {
  justify-self: start;
  padding: 1px 7px;
  border-radius: var(--bf-radius-pill);
  font-size: 9.5px;
  font-weight: 500;
}

.lp-st-success { background: var(--bf-success-bg); color: var(--bf-success); }
.lp-st-info    { background: var(--bf-info-bg);    color: var(--bf-info); }
.lp-st-warning { background: var(--bf-warning-bg); color: var(--bf-warning); }

/* ---------- 1.5 通用 Section ---------- */
.lp-section {
  padding: 88px 0;
}

.lp-section-alt {
  background: var(--bf-bg-surface);
  border-top: 1px solid var(--bf-border-color);
  border-bottom: 1px solid var(--bf-border-color);
}

.lp-eyebrow {
  font-size: var(--bf-text-xs);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--bf-primary-600);
}

.lp-section-head {
  max-width: 620px;
  margin: 0 auto 48px;
  text-align: center;
}

.lp-section-head h2 {
  margin: 10px 0 0;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
}

.lp-section-head p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--bf-text-muted);
}

/* ---------- 1.6 核心功能卡片 ---------- */
.lp-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.lp-feature {
  padding: 24px;
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-color);
  border-radius: var(--bf-radius-lg);
  transition: box-shadow var(--bf-transition-base),
              border-color var(--bf-transition-base),
              transform var(--bf-transition-base);
}

.lp-feature:hover {
  border-color: var(--bf-primary-200);
  box-shadow: var(--bf-shadow-md);
  transform: translateY(-2px);
}

.lp-feature .f-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bf-primary-50);
  color: var(--bf-primary-600);
}

.lp-feature .f-icon svg { width: 20px; height: 20px; }

.lp-feature h3 {
  margin: 16px 0 0;
  font-size: 17px;
  font-weight: var(--bf-font-weight-semibold);
}

.lp-feature p {
  margin: 8px 0 0;
  font-size: var(--bf-text-sm);
  line-height: 1.7;
  color: var(--bf-text-muted);
}

/* ---------- 1.7 图文分栏（商机看板 / 数据分析） ---------- */
.lp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.lp-split + .lp-split { margin-top: 96px; }

.lp-split-text h3 {
  margin: 10px 0 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.lp-split-text > p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--bf-text-secondary);
}

.lp-split-points {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.lp-split-points .pt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--bf-text-md);
  color: var(--bf-text-secondary);
}

.lp-split-points .pt svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--bf-primary-600);
}

.lp-split-visual .lp-mock { box-shadow: var(--bf-shadow-md); }

/* 图文交替：偶数行视觉换到左侧 */
.lp-split-flip .lp-split-visual { order: -1; }

/* 看板 Mock */
.lp-kb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
}

.lp-kb-col {
  padding: 8px;
  background: var(--bf-bg-canvas);
  border: 1px solid var(--bf-border-color);
  border-radius: var(--bf-radius-lg);
  min-width: 0;
}

.lp-kb-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--bf-text-secondary);
}

.lp-kb-head .kdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.lp-kb-head .cnt {
  margin-left: auto;
  padding: 0 6px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-color);
  font-size: 10px;
  font-weight: 500;
  color: var(--bf-text-muted);
}

.lp-kb-card {
  padding: 10px;
  margin-top: 8px;
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-color);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-xs);
}

.lp-kb-card .t {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--bf-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-kb-card .a {
  margin-top: 3px;
  font-size: 11px;
  color: var(--bf-text-secondary);
  font-variant-numeric: tabular-nums;
}

.lp-kb-card .f {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--bf-text-faint);
}

.lp-kb-card .av {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bf-primary-200);
  color: var(--bf-primary-800);
  font-size: 8px;
  font-weight: 600;
}

.lp-kb-card .p {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: var(--bf-radius-pill);
  font-size: 9px;
  font-weight: 500;
}

.lp-p-high   { background: var(--bf-danger-bg);  color: var(--bf-danger); }
.lp-p-mid    { background: var(--bf-warning-bg); color: var(--bf-warning); }
.lp-p-low    { background: var(--bf-bg-subtle);  color: var(--bf-text-muted); }

/* 图表 Mock（月度销售额柱状） */
.lp-chart-mock-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 16px 0;
}

.lp-chart-mock-head .v {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--bf-text-primary);
  font-variant-numeric: tabular-nums;
}

.lp-chart-mock-head .c {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-success-bg);
  color: var(--bf-success);
}

.lp-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 150px;
  padding: 0 16px;
  margin-top: 16px;
}

.lp-bars span {
  flex: 1;
  min-width: 0;
  border-radius: 5px 5px 2px 2px;
  background: var(--bf-primary-200);
}

.lp-bars span.hot { background: var(--bf-primary-600); }

.lp-bars-x {
  display: flex;
  gap: 6px;
  padding: 0 16px;
  margin-top: 6px;
  font-size: 9px;
  color: var(--bf-text-faint);
}

.lp-bars-x span { flex: 1; text-align: center; }

/* ---------- 1.8 技术栈 ---------- */
.lp-tech-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.lp-tech {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 12px;
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-color);
  border-radius: var(--bf-radius-lg);
  transition: border-color var(--bf-transition-fast), box-shadow var(--bf-transition-fast);
}

.lp-tech:hover {
  border-color: var(--bf-primary-200);
  box-shadow: var(--bf-shadow-sm);
}

.lp-tech svg {
  width: 22px;
  height: 22px;
  color: var(--bf-primary-500);
}

.lp-tech .n {
  font-size: var(--bf-text-md);
  font-weight: var(--bf-font-weight-semibold);
  color: var(--bf-text-primary);
}

.lp-tech .v {
  font-size: var(--bf-text-xs);
  color: var(--bf-text-faint);
  font-variant-numeric: tabular-nums;
}

.lp-tech-note {
  margin-top: 22px;
  text-align: center;
  font-size: var(--bf-text-sm);
  color: var(--bf-text-muted);
}

/* ---------- 1.9 产品优势 ---------- */
.lp-why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.lp-why {
  display: flex;
  gap: 14px;
  padding: 22px;
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-color);
  border-radius: var(--bf-radius-lg);
}

.lp-why .f-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--bf-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bf-primary-50);
  color: var(--bf-primary-600);
}

.lp-why .f-icon svg { width: 18px; height: 18px; }

.lp-why h4 {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: var(--bf-font-weight-semibold);
}

.lp-why p {
  margin: 6px 0 0;
  font-size: var(--bf-text-sm);
  line-height: 1.7;
  color: var(--bf-text-muted);
}

/* ---------- 1.10 CTA ---------- */
.lp-cta-wrap { padding: 0 0 96px; }

.lp-cta {
  position: relative;
  overflow: hidden;
  padding: 64px 32px;
  border-radius: 20px;
  background: var(--bf-primary-600);
  text-align: center;
}

.lp-cta h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -.02em;
}

.lp-cta p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .85);
  font-size: 16px;
}

.lp-cta .lp-btn-white { margin-top: 30px; }

.lp-cta .hint {
  margin: 14px 0 0;
  font-size: var(--bf-text-xs);
  color: rgba(255, 255, 255, .65);
}

/* ---------- 1.11 页脚 ---------- */
.lp-footer {
  padding: 48px 0 32px;
  background: var(--bf-bg-surface);
  border-top: 1px solid var(--bf-border-color);
}

.lp-footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
}

.lp-footer-brand p {
  max-width: 360px;
  margin: 12px 0 0;
  font-size: var(--bf-text-sm);
  line-height: 1.7;
  color: var(--bf-text-muted);
}

.lp-footer-col h5 {
  margin: 0 0 12px;
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-font-weight-semibold);
  color: var(--bf-text-primary);
}

.lp-footer-col a {
  display: block;
  padding: 4px 0;
  font-size: var(--bf-text-sm);
  color: var(--bf-text-muted);
  text-decoration: none;
  transition: color var(--bf-transition-fast);
}

.lp-footer-col a:hover { color: var(--bf-primary-600); }

.lp-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--bf-border-color);
  font-size: var(--bf-text-xs);
  color: var(--bf-text-faint);
}

/* ---------- 1.12 响应式（基础版，阶段 17 全面打磨） ---------- */
@media (max-width: 1024px) {
  .lp-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-tech-grid { grid-template-columns: repeat(3, 1fr); }
  .lp-split { grid-template-columns: 1fr; gap: 32px; }
  .lp-split-flip .lp-split-visual { order: 0; }
  .lp-mock-charts { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .lp-hero { padding: 64px 0 56px; }
  .lp-section { padding: 64px 0; }
  .lp-feature-grid { grid-template-columns: 1fr; }
  .lp-tech-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-why-grid { grid-template-columns: 1fr; }
  .lp-mock-kpis { grid-template-columns: repeat(2, 1fr); }
  .lp-mock-side { display: none; }
  .lp-mock-table .trow { grid-template-columns: 1.4fr .9fr .7fr; }
  .lp-mock-table .t-hide-sm { display: none; }
}

/* ---------- 1.13 出品方署名（Hero 元信息 / 页脚 / 关于澜图区块） ---------- */
.lp-made-by {
  margin-top: 14px;
  font-size: var(--bf-text-xs);
  color: var(--bf-text-faint);
}

.lp-made-by a {
  color: var(--bf-text-muted);
  text-decoration: none;
}

.lp-made-by a:hover { color: var(--bf-primary-600); }

.lp-footer-studio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 12px;
  border: 1px solid var(--bf-border-color);
  border-radius: var(--bf-radius-md);
  font-size: var(--bf-text-xs);
  color: var(--bf-text-secondary);
  text-decoration: none;
  transition: border-color var(--bf-transition-fast), color var(--bf-transition-fast);
}

.lp-footer-studio:hover {
  border-color: var(--bf-primary-300);
  color: var(--bf-primary-600);
}

.lp-footer-studio img { border-radius: 6px; }

/* 关于澜图区块 */
.studio-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: center;
}

.studio-grid h2 {
  margin: 10px 0 0;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -.02em;
}

.studio-grid .studio-slogan {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--bf-text-secondary);
}

.studio-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.studio-stat {
  padding: 16px;
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-color);
  border-radius: var(--bf-radius-lg);
  text-align: center;
}

.studio-stat .v {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--bf-primary-600);
  font-variant-numeric: tabular-nums;
}

.studio-stat .k {
  margin-top: 2px;
  font-size: var(--bf-text-xs);
  color: var(--bf-text-muted);
}

.studio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.studio-tags span {
  padding: 5px 12px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-bg-subtle);
  border: 1px solid var(--bf-border-color);
  font-size: var(--bf-text-xs);
  color: var(--bf-text-secondary);
}

.studio-cases {
  margin-top: 18px;
  font-size: var(--bf-text-sm);
  line-height: 1.8;
  color: var(--bf-text-muted);
}

.studio-cases b { color: var(--bf-text-secondary); font-weight: var(--bf-font-weight-medium); }

.studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.studio-logo-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px;
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-color);
  border-radius: var(--bf-radius-xl);
  box-shadow: var(--bf-shadow-md);
}

.studio-logo-card img {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  flex-shrink: 0;
}

.studio-logo-card .n1 {
  font-size: 17px;
  font-weight: var(--bf-font-weight-semibold);
  color: var(--bf-text-primary);
}

.studio-logo-card .n2 {
  margin-top: 2px;
  font-size: var(--bf-text-xs);
  letter-spacing: .14em;
  color: var(--bf-text-muted);
}

.studio-logo-card .n3 {
  display: inline-block;
  margin-top: 8px;
  font-size: var(--bf-text-sm);
  color: var(--bf-primary-600);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.studio-logo-card .n3:hover { text-decoration: underline; }

@media (max-width: 1024px) {
  .studio-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================================
   2. Login Page（login.html）—— .auth- 前缀
   ============================================================================ */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}

.auth-theme-btn {
  position: absolute;
  top: 20px;
  right: 20px;
}

.auth-card {
  width: 100%;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-color);
  border-radius: var(--bf-radius-xl);
  box-shadow: var(--bf-shadow-lg);
  overflow: hidden;
}

/* 左侧品牌区 */
.auth-brand {
  position: relative;
  overflow: hidden;
  padding: 48px 44px;
  background: var(--bf-primary-600);
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

.auth-brand::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
}

.auth-brand::before {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -120px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
}

.auth-brand .auth-brand-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.auth-brand .auth-brand-sub {
  margin-top: 6px;
  font-size: var(--bf-text-sm);
  color: rgba(255, 255, 255, .75);
}

.auth-points {
  margin-top: auto;
  padding-top: 40px;
  display: grid;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.auth-points .pt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--bf-text-md);
  color: rgba(255, 255, 255, .92);
}

.auth-points .pt svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: rgba(255, 255, 255, .85);
}

.auth-brand-foot {
  margin-top: 32px;
  font-size: var(--bf-text-xs);
  color: rgba(255, 255, 255, .55);
  position: relative;
  z-index: 1;
}

/* 右侧表单区 */
.auth-form {
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-form h1 {
  margin: 0;
  font-size: 24px;
  font-weight: var(--bf-font-weight-semibold);
}

.auth-form .auth-sub {
  margin: 8px 0 0;
  font-size: var(--bf-text-md);
  color: var(--bf-text-muted);
}

.auth-error {
  display: none;
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: var(--bf-radius-md);
  background: var(--bf-danger-bg);
  border: 1px solid var(--bf-danger-border);
  color: var(--bf-danger);
  font-size: var(--bf-text-sm);
}

.auth-error.show { display: block; }

.auth-field { margin-top: 18px; }

.auth-field label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-font-weight-medium);
  color: var(--bf-text-secondary);
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-wrap > svg.auth-lead {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--bf-text-faint);
  pointer-events: none;
}

.auth-input {
  width: 100%;
  padding: 10px 12px 10px 38px;
  border: 1px solid var(--bf-border-color-strong);
  border-radius: var(--bf-radius-md);
  background: var(--bf-bg-surface);
  color: var(--bf-text-primary);
  font-size: var(--bf-text-md);
  font-family: inherit;
  transition: border-color var(--bf-transition-fast), box-shadow var(--bf-transition-fast);
}

.auth-input:focus {
  outline: none;
  border-color: var(--bf-primary-400);
  box-shadow: var(--bf-ring);
}

.auth-eye {
  position: absolute;
  right: 6px;
  border: 0;
  background: transparent;
  padding: 6px;
  border-radius: var(--bf-radius-sm);
  color: var(--bf-text-faint);
  display: inline-flex;
}

.auth-eye:hover { color: var(--bf-text-secondary); }

.auth-eye svg { width: 16px; height: 16px; }

.auth-eye .i-eye-off { display: none; }
.auth-eye.shown .i-eye-off { display: inline-block; }
.auth-eye.shown .i-eye { display: none; }

.auth-submit {
  width: 100%;
  margin-top: 24px;
  padding: 11px 20px;
  border: 0;
  border-radius: var(--bf-radius-md);
  background: var(--bf-primary-600);
  color: var(--bf-text-on-primary);
  font-size: 16px;
  font-weight: var(--bf-font-weight-semibold);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color var(--bf-transition-fast), transform var(--bf-transition-fast);
}

.auth-submit:hover:not(:disabled) { background: var(--bf-primary-700); }
.auth-submit:disabled { opacity: .75; cursor: not-allowed; }

.auth-demo-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px dashed var(--bf-primary-200);
  border-radius: var(--bf-radius-md);
  background: var(--bf-primary-50);
  font-size: var(--bf-text-sm);
  color: var(--bf-text-secondary);
}

[data-bs-theme="dark"] .auth-demo-hint {
  background: rgba(99, 102, 241, .10);
  border-color: rgba(129, 140, 248, .35);
}

.auth-demo-hint code {
  padding: 2px 8px;
  border-radius: var(--bf-radius-sm);
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-color);
  font-family: var(--bf-font-mono);
  font-size: var(--bf-text-sm);
  color: var(--bf-primary-600);
}

.auth-demo-hint .fill-btn {
  margin-left: auto;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-font-weight-medium);
  color: var(--bf-primary-600);
  cursor: pointer;
}

.auth-demo-hint .fill-btn:hover { text-decoration: underline; }

.auth-back {
  margin-top: 24px;
  text-align: center;
  font-size: var(--bf-text-sm);
}

.auth-back a {
  color: var(--bf-text-muted);
  text-decoration: none;
}

.auth-back a:hover { color: var(--bf-primary-600); }

/* 错误抖动 */
@keyframes auth-shake {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.shake { animation: auth-shake .4s ease; }

@media (max-width: 860px) {
  .auth-card { grid-template-columns: 1fr; max-width: 460px; }
  .auth-brand { display: none; }
  .auth-form { padding: 36px 28px; }
}

/* ============================================================================
   3. 商机看板（opportunities.html）—— .kb- 前缀
   ============================================================================ */
.kb-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(208px, 1fr));
  gap: 16px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 8px;
}

.kb-col {
  min-height: 220px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  padding: 10px;
  background: var(--bf-bg-canvas);
  border: 1px solid var(--bf-border-color);
  border-radius: var(--bf-radius-lg);
  transition: border-color var(--bf-transition-fast), background-color var(--bf-transition-fast);
}

/* 拖拽悬停高亮 */
.kb-col.drag-over {
  border-color: var(--bf-primary-400);
  background: var(--bf-primary-50);
}

[data-bs-theme="dark"] .kb-col.drag-over {
  background: rgba(99, 102, 241, .10);
}

.kb-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 2px;
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-font-weight-semibold);
  color: var(--bf-text-primary);
}

.kb-col-head .kdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kb-col-head .cnt {
  margin-left: auto;
  padding: 0 8px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-bg-subtle);
  border: 1px solid var(--bf-border-color);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-font-weight-medium);
  color: var(--bf-text-muted);
  font-variant-numeric: tabular-nums;
}

.kb-col-sub {
  padding: 0 6px 8px;
  font-size: var(--bf-text-xs);
  color: var(--bf-text-faint);
  font-variant-numeric: tabular-nums;
}

.kb-card {
  padding: 10px 12px;
  margin-top: 8px;
  background: var(--bf-bg-surface);
  border: 1px solid var(--bf-border-color);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-xs);
  cursor: grab;
  transition: box-shadow var(--bf-transition-fast), opacity var(--bf-transition-fast);
}

.kb-card:hover { box-shadow: var(--bf-shadow-md); }
.kb-card:active { cursor: grabbing; }
.kb-card.dragging { opacity: .45; box-shadow: none; }

.kb-card .t {
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-font-weight-medium);
  color: var(--bf-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-card .a {
  margin-top: 3px;
  font-size: var(--bf-text-sm);
  color: var(--bf-text-secondary);
  font-variant-numeric: tabular-nums;
}

.kb-card .f {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: var(--bf-text-xs);
  color: var(--bf-text-faint);
}

.kb-card .av {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bf-primary-200);
  color: var(--bf-primary-800);
  font-size: 9px;
  font-weight: 600;
  flex-shrink: 0;
}

/* 优先级徽章（商机/看板通用） */
.prio-badge {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: var(--bf-radius-pill);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-font-weight-medium);
}

.prio-badge.high { background: var(--bf-danger-bg);  color: var(--bf-danger); }
.prio-badge.mid  { background: var(--bf-warning-bg); color: var(--bf-warning); }
.prio-badge.low  { background: var(--bf-bg-subtle);  color: var(--bf-text-muted); }

@media (max-width: 1024px) {
  .kb-board { grid-template-columns: repeat(5, 240px); }
}

/* ============================================================================
   4. 系统设置（settings.html）—— .set- 前缀
   ============================================================================ */
.set-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1024px) {
  .set-grid { grid-template-columns: 1fr; }
}

.set-avatar-lg {
  width: 56px;
  height: 56px;
  border-radius: var(--bf-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bf-primary-600);
  color: var(--bf-text-on-primary);
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
}

/* 主题选择卡 */
.set-theme-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.set-theme-card {
  position: relative;
  padding: 14px;
  border: 2px solid var(--bf-border-color);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-bg-canvas);
  cursor: pointer;
  transition: border-color var(--bf-transition-fast);
}

.set-theme-card:hover { border-color: var(--bf-primary-300); }

.set-theme-card.active { border-color: var(--bf-primary-600); }

.set-theme-card .preview {
  height: 64px;
  border-radius: var(--bf-radius-md);
  border: 1px solid var(--bf-border-color);
  overflow: hidden;
  display: flex;
}

.set-theme-card .preview .bar {
  width: 22%;
  border-right: 1px solid var(--bf-border-color);
}

.set-theme-card .preview .lines {
  flex: 1;
  padding: 6px;
  display: grid;
  gap: 4px;
  align-content: start;
}

.set-theme-card .preview .lines i {
  display: block;
  height: 5px;
  border-radius: 3px;
  opacity: .5;
}

.set-theme-card .preview .lines i:first-child { width: 60%; opacity: .8; }

/* 浅色预览 */
.set-theme-card[data-mode="light"] .preview { background: #f6f8fb; }
.set-theme-card[data-mode="light"] .preview .bar { background: #ffffff; }
.set-theme-card[data-mode="light"] .preview .lines i { background: #cbd5e1; }

/* 深色预览 */
.set-theme-card[data-mode="dark"] .preview { background: #0f1524; }
.set-theme-card[data-mode="dark"] .preview .bar { background: #161d31; }
.set-theme-card[data-mode="dark"] .preview .lines i { background: #3b4a6b; }

.set-theme-card .name {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: var(--bf-text-md);
  font-weight: var(--bf-font-weight-medium);
  color: var(--bf-text-primary);
}

.set-theme-card .check {
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: var(--bf-primary-600);
  visibility: hidden;
}

.set-theme-card.active .check { visibility: visible; }

/* 通知开关行 */
.set-switch-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--bf-border-color);
}

.set-switch-row:first-of-type { border-top: 0; padding-top: 4px; }
.set-switch-row:last-of-type { padding-bottom: 4px; }

.set-switch-row .sw-main { flex: 1; }

.set-switch-row .sw-title {
  font-size: var(--bf-text-md);
  color: var(--bf-text-primary);
  font-weight: var(--bf-font-weight-medium);
}

.set-switch-row .sw-desc {
  margin-top: 2px;
  font-size: var(--bf-text-sm);
  color: var(--bf-text-muted);
}

/* Bootstrap 开关令牌化 */
.form-check-input:checked {
  background-color: var(--bf-primary-600);
  border-color: var(--bf-primary-600);
}

.form-check-input:focus {
  border-color: var(--bf-primary-400);
  box-shadow: var(--bf-ring);
}

/* 危险区 */
.set-danger-card {
  border-color: var(--bf-danger-border) !important;
}

.set-danger-card .bf-card-title { color: var(--bf-danger); }