/* =========================================================================
   蓝宝书Max · UI 增强层 (bb-uiplus.css)  v20260726.30
   - 叠加在「终版锁定」的 bb-design.css 之上，不修改原文件（红线：bb-design.css 禁碰）
   - 借 Open Props 设计令牌 + shadcn / Linear / 苹果风设计语言，原生实现，零新依赖
   - 本次为「脱胎换骨」综合升级：设计令牌 / 氛围光 / 玻璃 / 卡片 / 按钮 / 表格 /
     侧栏 / 排版 / 入场动效 / 暗色校准
   - 仅用 transform / opacity / 颜色 / box-shadow / 背景，尊重 prefers-reduced-motion
   ========================================================================= */

:root {
  /* —— 缓动（优先用 Open Props 的 --ease-*，回退到手写曲线）—— */
  --ui-ease: var(--ease-3, cubic-bezier(.2, .8, .2, 1));
  --ui-ease-2: var(--ease-2, cubic-bezier(.25, .46, .45, .94));
  --ui-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* —— 时长 —— */
  --ui-t: .30s;
  --ui-t-fast: .18s;

  /* —— 分层投影（比单值更「立」）—— */
  --ui-shadow-1: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px rgba(15, 23, 42, .06);
  --ui-shadow-2: 0 2px 6px rgba(15, 23, 42, .06), 0 12px 30px rgba(15, 23, 42, .10);
  --ui-shadow-3: 0 4px 14px rgba(15, 23, 42, .08), 0 24px 64px rgba(15, 23, 42, .14);

  /* —— 品牌光晕（color-mix 让光晕随 --accent 自动取色）—— */
  --ui-glow: color-mix(in srgb, var(--accent) 38%, transparent);
  --ui-glow-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --ui-gold-glow: color-mix(in srgb, var(--gold, #f5a623) 24%, transparent);
  --ui-ring: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* =========================================================================
   氛围光背景（加在 body 上，叠加于原有背景色，固定不随滚动）
   - 用 radial-gradient 在四角铺柔和的蓝/金光晕，制造「高级感」底噪
   ========================================================================= */
body {
  background-image:
    radial-gradient(46rem 46rem at 8% -8%, var(--ui-glow-soft), transparent 60%),
    radial-gradient(38rem 38rem at 103% -4%, var(--ui-gold-glow), transparent 58%),
    radial-gradient(62rem 62rem at 50% 118%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* =========================================================================
   排版微调（通用，安全：只改字距/行高，不动尺寸布局）
   ========================================================================= */
h1, h2, h3, h4 {
  letter-spacing: -.012em;
  line-height: 1.18;
}
.section-head h2, .rh h1, .hero-title, .report-h1 {
  letter-spacing: -.02em;
}

/* =========================================================================
   玻璃 / 卡片升级：分层投影 + 顶部高光描边（不重排背景，安全叠加）
   ========================================================================= */
.card, .panel, .kpi-card, .stat-card, .feature-card,
.pricing-card, .edition-card, .report-item, .modal, .tooltip {
  position: relative;
  box-shadow: var(--ui-shadow-2);
  transition: transform var(--ui-t) var(--ui-ease),
              box-shadow var(--ui-t) var(--ui-ease),
              border-color var(--ui-t) ease,
              background var(--ui-t) ease;
}

/* 顶部 1px 高光（让卡片有「受光面」） */
.card::after, .panel::after,
.kpi-card::after, .stat-card::after, .feature-card::after,
.pricing-card::after, .edition-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
[data-theme="dark"] .card::after,
[data-theme="dark"] .panel::after,
[data-theme="dark"] .kpi-card::after,
[data-theme="dark"] .stat-card::after,
[data-theme="dark"] .feature-card::after,
[data-theme="dark"] .pricing-card::after,
[data-theme="dark"] .edition-card::after {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.card:hover, .panel:hover, .kpi-card:hover, .stat-card:hover,
.feature-card:hover, .edition-card:hover, .report-item:hover {
  box-shadow: var(--ui-shadow-3);
}
.report-item:hover, .db-rank-item:hover { transform: translateX(3px); }

/* =========================================================================
   按钮系统升级（CTA 渐变 + 悬浮光晕 + 按压回弹 + 聚焦环）
   ========================================================================= */
.btn, .btn-accent, .btn-ghost, .btn-primary {
  will-change: transform;
  transition: transform var(--ui-t) var(--ui-ease),
              box-shadow var(--ui-t) var(--ui-ease),
              background var(--ui-t) ease, background-image var(--ui-t) ease,
              border-color var(--ui-t) ease, color var(--ui-t) ease;
}
.btn-accent, .btn-primary {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 88%, #fff 0%),
      color-mix(in srgb, var(--accent) 72%, #000 6%));
  border-color: transparent;
}
.btn-accent:hover, .btn-primary:hover {
  box-shadow: 0 10px 30px var(--ui-glow);
  transform: translateY(-1px);
}
.btn-accent:active, .btn-primary:active { transform: scale(.965) translateY(-1px); }
.btn-ghost:active { transform: scale(.97); }
.btn:active { transform: scale(.97); }

/* 主 CTA 流光（hover 扫过，pointer-events:none 不挡点击） */
.btn-primary::after, .btn-accent::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 32%, rgba(255, 255, 255, .4) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .65s var(--ui-ease);
}
.btn-primary:hover::after, .btn-accent:hover::after { transform: translateX(130%); }

/* 全局聚焦可见环（无障碍 + 精致） */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ui-ring);
}

/* =========================================================================
   标签 chip 悬浮态（统一上浮 + 边框点亮）
   ========================================================================= */
.chip {
  transition: all var(--ui-t-fast) var(--ui-ease);
  cursor: default;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--text-1, #0f172a);
  background: var(--side-hover, rgba(30, 136, 229, .1));
  transform: translateY(-1px);
}
.pill, .tag { border-radius: var(--r-pill); }

/* =========================================================================
   表格 / 列表 进阶（斑马纹 + 悬浮行品牌染色 + 表头吸顶微影）
   ========================================================================= */
.code-table, .db-table, table.data {
  border-collapse: separate;
  border-spacing: 0;
}
.code-table tbody tr, .db-table tbody tr, table.data tbody tr {
  transition: background var(--ui-t-fast) ease, transform var(--ui-t-fast) var(--ui-ease),
              border-color var(--ui-t-fast) ease, box-shadow var(--ui-t-fast) ease;
}
.code-table tbody tr:hover, .db-table tbody tr:hover, table.data tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.db-rank-item, .report-item, .sector-row, .db-bar-row {
  transition: background var(--ui-t-fast) ease, transform var(--ui-t-fast) var(--ui-ease),
              border-color var(--ui-t-fast) ease, box-shadow var(--ui-t-fast) ease;
}
.sector-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* 涨跌幅数字：染色平滑过渡（非闪烁） */
.up, .dn, .down { transition: color .3s ease; }
.kpi-card .kpi-val.up, .kpi-card .kpi-val.dn,
.db-rank-pct.up, .db-rank-pct.dn, .db-rank-price.up, .db-rank-price.dn,
.sec-val.up, .sec-val.dn { transition: color .3s ease; }

/* =========================================================================
   侧边栏 / 顶栏 品牌 logo 悬浮微旋（克制）
   ========================================================================= */
.side-brand img, .topbar .tb-brand img {
  transition: transform var(--ui-t) var(--ui-ease-spring);
}
.side-brand:hover img, .topbar .tb-brand:hover img { transform: rotate(-6deg) scale(1.06); }

/* =========================================================================
   入场动效：对带 .ui-reveal 的元素做轻量淡入上移（JS 注入 .in）
   支持 [data-ui-delay] 错峰
   ========================================================================= */
.ui-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s var(--ui-ease), transform .55s var(--ui-ease);
}
.ui-reveal.in { opacity: 1; transform: none; }

/* 顶部滚动进度条（JS 注入，3px 渐变细线，信息性不属「动效」） */
.bbm-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 400;
  background: linear-gradient(90deg, var(--accent), var(--gold, #f5a623));
  box-shadow: 0 0 8px var(--ui-glow);
  transition: width .12s linear;
  pointer-events: none;
}

/* 全局指针光晕（仅精确指针设备、非减弱动效时启用，JS 注入） */
.bbm-cursor-glow {
  position: fixed;
  width: 26rem; height: 26rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  left: var(--cx, 50%); top: var(--cy, 50%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--ui-glow-soft), transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
  mix-blend-mode: screen;
}
body.bbm-cursor-on .bbm-cursor-glow { opacity: 1; }

/* =========================================================================
   P3 · 组件一致性基线（统一圆角 / 聚焦 / 输入框）
   ========================================================================= */
input[type="text"], input[type="search"], input[type="date"], input[type="password"],
textarea, select {
  transition: border-color var(--ui-t-fast) ease, box-shadow var(--ui-t-fast) ease,
              background var(--ui-t-fast) ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: var(--ui-ring);
  outline: none;
}

/* =========================================================================
   P2 · 暗色一致性校准（仅 override 变量与少数容器）
   ========================================================================= */
[data-theme="dark"] {
  --text-3: rgba(244, 248, 255, .62);
  --text-4: rgba(244, 248, 255, .40);
  --border: rgba(255, 255, 255, .12);
  --border-strong: rgba(255, 255, 255, .20);
  --shadow-md: 0 6px 26px rgba(0, 0, 0, .55);
  --shadow-lg: 0 18px 54px rgba(0, 0, 0, .65);
  --glass: rgba(15, 31, 58, .80);
  --glass-bg: rgba(22, 28, 46, .62);
  --glass-brd: rgba(255, 255, 255, .12);
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(46rem 46rem at 6% -8%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%),
    radial-gradient(40rem 40rem at 104% 0%, var(--ui-gold-glow), transparent 58%),
    radial-gradient(70rem 70rem at 50% 118%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%);
}
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .edition-card,
[data-theme="dark"] .report-item {
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 4px 22px rgba(0, 0, 0, .5);
}
[data-theme="dark"] .side-link.active { box-shadow: inset 0 0 0 1px rgba(30, 136, 229, .4); }
[data-theme="dark"] .modal,
[data-theme="dark"] .pricing-card { box-shadow: 0 20px 60px rgba(0, 0, 0, .7); }

/* =========================================================================
   减弱动效偏好：关闭本层所有新增动效（不影响可读性）
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .ui-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn-primary::after, .btn-accent::after { display: none !important; }
  body { background-attachment: scroll; }
  .bbm-cursor-glow { display: none !important; }
  .btn, .btn-accent, .btn-ghost, .btn-primary,
  .card, .panel, .chip, .db-rank-item, .report-item,
  .code-table tbody tr, .db-table tbody tr, table.data tbody tr { transition: none !important; }
}