/* ============================================================
   Inkwell Engine · scene-home.css — 千人千面首页动画（四幕+收束）
   产品内界面为浅色主题：页面底 #F6F8FB / 白卡片 / 品牌蓝 #3B82F6
   （对齐真实首页：问候 hero / 指标行 / 今日规划(置顶) / 团队负载(仅
   管理者) / 模块卡(生命周期徽章) / 角色落地页 · L2 拖拽显隐 · L3 AI 重排）
   画布坐标系 1160 × 700，由 scene-home.js 按拍子切换状态类。
   ============================================================ */

.hp-stage {
  /* absolute：块级布局下 aspect-ratio 盒的高度会被内容最小尺寸（stage 布局高
     700）撑破——落地页窄容器时比例高 633.6 < 700，fit 被 content-min 拉高，
     出现 hp-fit/hp-stage 高度不一致 + 帧内底部空带。脱流后 fit 高度纯由
     aspect-ratio 决定，与 stage 视觉高度恒等；绝对定位仍是子元素的包含块 */
  position: absolute;
  top: 0;
  left: 0;
  width: 1160px;
  height: 700px;
  transform-origin: top left;
  font-family: var(--font-body);
  /* 行高钉扎：base.css body 1.75 会沿级联抬所有 hp 文本行（.kv 42px），
     撑爆固定行高轨道（KPI 96px 行）→ 行3 白卡盖住溢出文字=板块重叠；
     落地页/录制页级联不同，必须在此钉死（1.35：KPI 内容 91px ≤ 96 轨道） */
  line-height: 1.35;
}

/* 整窗淡入 / 淡出（与 sc-/pf- 家族同节奏） */
.hp-stage .hp-window {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.hp-stage.on .hp-window { opacity: 1; transform: none; }
.hp-stage.leaving .hp-window { opacity: 0; transform: translateY(-14px) scale(0.99); }

/* ---------- 应用窗体（浅色控制台） ---------- */

.hp-window {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #f6f8fb;
  box-shadow:
    0 36px 100px rgba(13, 27, 46, 0.14),
    0 10px 36px rgba(13, 27, 46, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #1f2937;
}

/* 头部：品牌 · 日期 · 角色切换 · 用户
   （不用 backdrop-filter：软光栅下单层模糊即可把采集帧率压到 ~9fps，
   底下是纯色窗体，去模糊后视觉无差） */
.hp-hd {
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #e8ecf3;
  position: relative;
  z-index: 10;
}
.hp-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #0f2b52; }
.hp-brand .bdot {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px;
}
.hp-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #64748b;
  background: #f1f5f9;
  padding: 3px 10px;
  border-radius: 6px;
}
.hp-hd .sp { flex: 1; }

/* 角色切换器（真实：填充底 + 白色活动块，与 PC/手机分段同构） */
.hp-roles {
  display: flex;
  background: #eef2f7;
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
  transition: box-shadow 0.4s ease;
}
.hp-roles.attention {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28), 0 4px 16px rgba(59, 130, 246, 0.25);
}
.hp-roles .rseg {
  font-size: 11.5px;
  padding: 4.5px 16px;
  border-radius: 7px;
  color: #64748b;
  transition: all 0.35s ease;
}
.hp-roles .rseg.active {
  background: #fff;
  color: #3b82f6;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}
/* 三视角由窗体根类驱动（v-gm / v-sales / v-keeper） */
.hp-window.v-gm .hp-roles .rseg.r-gm,
.hp-window.v-sales .hp-roles .rseg.r-sales,
.hp-window.v-keeper .hp-roles .rseg.r-keeper { background: #fff; color: #3b82f6; font-weight: 600; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12); }

/* 用户芯片（头像 + 姓名随视角切换） */
.hp-uchip { display: none; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #334155; }
.hp-uchip .uav {
  width: 26px; height: 26px;
  border-radius: 50%;
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px;
}
.hp-window.v-gm .hp-uchip.u-gm,
.hp-window.v-sales .hp-uchip.u-sales,
.hp-window.v-keeper .hp-uchip.u-keeper { display: flex; }
.u-gm .uav { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.u-sales .uav { background: linear-gradient(135deg, #10b981, #14b8a6); }
.u-keeper .uav { background: linear-gradient(135deg, #f59e0b, #f97316); }

/* ---------- 视图（三个角色各一套块，横向滑切） ---------- */

.hp-body {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.hp-view {
  position: absolute;
  inset: 0;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 64px 96px 1fr 104px;
  gap: 12px;
  opacity: 0;
  transform: translateX(26px) scale(0.995);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.hp-view.cur { opacity: 1; transform: none; }

/* 视图内卡片入场：随 .cur 交错浮现 */
.hp-view .hp-card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hp-view.cur .hp-card { opacity: 1; transform: none; }
.hp-view.cur .hp-card[data-i="1"] { transition-delay: 0.06s; }
.hp-view.cur .hp-card[data-i="2"] { transition-delay: 0.13s; }
.hp-view.cur .hp-card[data-i="3"] { transition-delay: 0.2s; }
.hp-view.cur .hp-card[data-i="4"] { transition-delay: 0.27s; }
.hp-view.cur .hp-card[data-i="5"] { transition-delay: 0.34s; }
.hp-view.cur .hp-card[data-i="6"] { transition-delay: 0.41s; }

/* ---------- 视图内行3 跨列（各视角不同布局） ---------- */
.v-gm .hp-plan, .v-gm .hp-trend, .v-gm .hp-team { grid-column: span 4; }
.v-sales .hp-plan { grid-column: span 5; }
.v-sales .hp-follow { grid-column: span 7; }
.v-keeper .hp-plan { grid-column: span 5; }
.v-keeper .hp-alerts { grid-column: span 7; }

/* ---------- 卡片基元 ---------- */

/* FLIP-reverse 落位瞬间关闭过渡（JS landSwap 使用） */
.hp-notrans, .hp-notrans * { transition: none !important; }

.hp-card {
  background: #fff;
  border: 1px solid #e8ecf3;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  padding: 12px 16px;
  min-width: 0;
  position: relative;
}
.hp-ct { font-size: 12.5px; font-weight: 700; color: #334155; display: flex; align-items: center; gap: 7px; }
.hp-ct .ctg { color: #3b82f6; font-size: 13px; }

/* 问候 hero（真实：单行白卡，问候 + 数据派生状态） */
.hp-greet {
  grid-column: span 12;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: linear-gradient(90deg, #ffffff 0%, #f8fbff 70%, #f3f7ff 100%);
}
.hp-greet .gt { font-size: 19px; font-weight: 800; color: #0f2b52; letter-spacing: 0.01em; }
.hp-greet .gsub { font-size: 12.5px; color: #64748b; }
.hp-greet .gsub b { color: #3b82f6; font-weight: 700; }
.hp-greet .gsub .warn { color: #d97706; font-weight: 700; }
.hp-greet .gsp { flex: 1; }
.hp-greet .gbadge {
  font-size: 11px;
  font-weight: 600;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.09);
  border: 1px solid rgba(59, 130, 246, 0.18);
  padding: 4px 12px;
  border-radius: 999px;
}

/* 指标行（容器带定位：AI 重排徽章的锚） */
.hp-kpis { grid-column: span 12; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0; background: none; border: none; box-shadow: none; position: relative; }
.hp-kpi {
  background: #fff;
  border: 1px solid #e8ecf3;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.hp-kpi .kl { font-size: 11.5px; color: #64748b; line-height: 15px; }
.hp-kpi .kv { font-size: 24px; font-weight: 800; color: #0f2b52; font-family: var(--font-display); letter-spacing: 0.01em; line-height: 30px; }
.hp-kpi .kv small { font-size: 13px; font-weight: 600; color: #475569; }
.hp-kpi .kd { font-size: 11px; line-height: 14px; color: #059669; }
.hp-kpi .kd.warn { color: #d97706; }
.hp-kpi .kd.mute { color: #94a3b8; }
/* AI 重排：1↔2 位对换（宽 272 + 缝 12 = 284px）；换位态放慢到 0.9s */
.hp-kpi.sw-a {
  transform: translateX(284px); box-shadow: 0 10px 28px rgba(59, 130, 246, 0.18);
  transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.hp-kpi.sw-b {
  transform: translateX(-284px);
  transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.hp-view.cur .hp-kpi.sw-a, .hp-view.cur .hp-kpi.sw-b { opacity: 1; }
/* AI 徽章（重排后钉在指标行上） */
.hp-aibadge {
  position: absolute;
  top: -11px;
  right: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(100deg, #3b82f6, #8b5cf6);
  padding: 3.5px 11px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hp-aibadge.on { opacity: 1; transform: none; }

/* 今日规划（真实：置顶于所有角色视图） */
.hp-plan { display: flex; flex-direction: column; gap: 8px; }
.hp-plan .prow { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #334155; }
.hp-plan .prow .pck {
  width: 15px; height: 15px;
  border-radius: 5px;
  border: 1.5px solid #cbd5e1;
  flex: 0 0 15px;
  position: relative;
}
.hp-plan .prow.done .pck { background: #3b82f6; border-color: #3b82f6; }
.hp-plan .prow.done .pck::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
}
.hp-plan .prow.done .ptx { color: #94a3b8; text-decoration: line-through; }
.hp-plan .prow .ptm { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: #94a3b8; }
.hp-plan .pout {
  margin-top: auto;
  font-size: 11px;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.07);
  border-radius: 8px;
  padding: 7px 10px;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* 团队负载（真实：仅领导/管理员可见——普通角色整卡缺席） */
.hp-team { display: flex; flex-direction: column; gap: 8.5px; }
.hp-team .tmrow { display: flex; align-items: center; gap: 9px; }
.hp-team .tmav {
  width: 24px; height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  display: grid; place-items: center;
  flex: 0 0 24px;
}
.hp-team .tmn { font-size: 12px; color: #334155; width: 42px; }
.hp-team .tmbar { flex: 1; height: 7px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.hp-team .tmbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3b82f6, #6366f1); width: 0; transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; }
.hp-team .tmrow.over .tmbar i { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.hp-view.cur .hp-team .tmbar i { width: var(--w, 60%); }
.hp-team .tmp { font-family: var(--font-mono); font-size: 10.5px; color: #64748b; width: 34px; text-align: right; }
.hp-team .tmrow.over .tmp { color: #d97706; font-weight: 700; }

/* 趋势小卡（总经理视角） */
.hp-trend { display: flex; flex-direction: column; }
.hp-trend svg { flex: 1; width: 100%; margin-top: 6px; }
.hp-trend .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s ease 0.35s; }
.hp-view.cur .hp-trend .draw { stroke-dashoffset: 0; }

/* 客户跟进表（销售视角 · 拖拽主角之一） */
.hp-follow { display: flex; flex-direction: column; gap: 7px; }
.hp-follow .frow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #334155;
  padding: 6.5px 10px;
  background: #f8fafc;
  border-radius: 9px;
}
.hp-follow .frow b { font-weight: 600; color: #0f2b52; width: 76px; }
.hp-follow .fst { font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.hp-follow .fst.s0 { background: rgba(100, 116, 139, 0.1); color: #64748b; }
.hp-follow .fst.s1 { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.hp-follow .fst.s2 { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.hp-follow .famt { margin-left: auto; font-family: var(--font-mono); color: #0f2b52; font-weight: 600; }
/* 拖拽换位（行3：plan 宽 5 列 = 461px，follow 宽 7 列 = 651px，缝 12）
   换位/拖拽变换必须压过入场基线（.hp-view.cur .hp-card），故同样带 cur 前缀；
   换位态把 transform 过渡放慢到 1.05s（采集端真实帧率下飞行更连贯），
   并清掉入场 data-i 的 transition-delay，落点节拍才对得准 */
.hp-view.cur .hp-card.drag { opacity: 1; transform: translateY(-6px) scale(1.01); }
.hp-view.cur .hp-plan.sw-right {
  opacity: 1; transform: translateX(663px);
  transition: opacity 0.5s ease, transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s, 0s;
}
.hp-view.cur .hp-follow.sw-left {
  opacity: 1; transform: translateX(-473px);
  transition: opacity 0.5s ease, transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s, 0s;
}
.hp-card.drag { z-index: 6; box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18); cursor: grabbing; }
/* 手动换位后的落点微光 */
.hp-card.settle { animation: hpSettle 0.9s ease; }
@keyframes hpSettle {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.35); }
  60% { box-shadow: 0 0 0 9px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); }
}

/* 库存预警（库管视角） */
.hp-alerts { display: flex; flex-direction: column; gap: 7px; }
.hp-alerts .alrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: #334155;
  padding: 7px 10px;
  background: #fff7ed;
  border: 1px solid #ffedd5;
  border-radius: 9px;
}
.hp-alerts .alrow .aldot { width: 7px; height: 7px; border-radius: 50%; background: #f97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.16); flex: 0 0 7px; }
.hp-alerts .alrow.cold .aldot { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16); }
.hp-alerts .alrow .altag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: #c2410c;
  background: rgba(249, 115, 22, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.hp-alerts .alrow.cold .altag { color: #1d4ed8; background: rgba(59, 130, 246, 0.1); }

/* 模块卡（真实：生命周期徽章 PUBLISHED/TESTING/DRAFT） */
.hp-mods { grid-column: span 12; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0; background: none; border: none; box-shadow: none; }
.hp-mod {
  background: #fff;
  border: 1px solid #e8ecf3;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  position: relative;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.hp-mod .mico {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 16px;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.09);
  flex: 0 0 36px;
}
.hp-mod .mn { font-size: 13px; font-weight: 700; color: #0f2b52; }
.hp-mod .mm { font-size: 10.5px; color: #94a3b8; margin-top: 2px; }
.hp-mod .mbadge {
  position: absolute;
  top: 9px;
  right: 10px;
  font-size: 9px;
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
}
.hp-mod .mbadge.pub { background: rgba(16, 185, 129, 0.1); color: #059669; }
.hp-mod .mbadge.tst { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.hp-mod .mbadge.dft { background: rgba(100, 116, 139, 0.1); color: #64748b; }
/* 编辑态：显隐眼睛 */
.hp-eye {
  position: absolute;
  bottom: -9px;
  right: 10px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #64748b;
  display: grid; place-items: center;
  font-size: 11px;
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12);
}
.hp-mods.editing .hp-eye { opacity: 1; transform: none; }
.hp-mod.ishidden { opacity: 0.42; }
.hp-mod.ishidden .mn, .hp-mod.ishidden .mm, .hp-mod.ishidden .mico { filter: grayscale(1); }
.hp-mod .hstamp {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.2em;
  background: rgba(248, 250, 252, 0.72);
  border-radius: 14px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.hp-mod.ishidden .hstamp { opacity: 1; }
.hp-eye.offed { color: #94a3b8; background: #f1f5f9; }

/* ---------- Toast（保存回执） ---------- */
.hp-toast {
  position: absolute;
  right: 22px;
  bottom: 20px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: #f1f5f9;
  background: rgba(15, 23, 42, 0.92);
  padding: 10px 18px;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(5, 8, 15, 0.35);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.hp-toast.on { opacity: 1; transform: none; }
.hp-toast .tck {
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  font-size: 10px;
  display: grid; place-items: center;
}

/* ---------- AI 夜间整理面板（L3） ---------- */
.hp-ai {
  position: absolute;
  top: 66px;
  right: 20px;
  z-index: 25;
  width: 330px;
  min-height: 196px; /* 必须整盖第 4 张指标卡（底 240），否则卡片下缘从面板下露出=板块错位观感 */
  border-radius: 16px;
  background: #fff; /* 不透明：半透明底会把正下方指标的数字透出来 */
  border: 1px solid rgba(99, 102, 241, 0.25);
  box-shadow: 0 24px 70px rgba(13, 27, 46, 0.22), 0 0 0 4px rgba(99, 102, 241, 0.06);
  padding: 14px 16px;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.hp-ai.on { opacity: 1; transform: none; }
.hp-ai .ait { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: #0f2b52; }
.hp-ai .ait .aig {
  width: 24px; height: 24px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #fff;
  display: grid; place-items: center;
  font-size: 13px;
}
.hp-ai .ait .aiwhen { margin-left: auto; font-size: 10.5px; color: #94a3b8; font-weight: 500; }
.hp-ai .ailn {
  margin-top: 9px;
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
  display: flex;
  gap: 7px;
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.45s ease;
}
.hp-ai .ailn.on { opacity: 1; transform: none; }
.hp-ai .ailn .ldot { color: #8b5cf6; flex: 0 0 auto; }
.hp-ai .aicta {
  margin-top: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.45s ease;
}
.hp-ai .aicta.on { opacity: 1; transform: none; }
.hp-ai .aiapply {
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(100deg, #3b82f6, #8b5cf6);
  padding: 6px 14px;
  border-radius: 8px;
}
.hp-ai .airevert { font-size: 11px; color: #64748b; border: 1px solid #e2e8f0; padding: 5.5px 12px; border-radius: 8px; }
.hp-ai .aiguard { margin-left: auto; font-size: 10px; color: #94a3b8; }

/* ---------- 收束：三屏并排（千人千面） ---------- */
.hp-trio {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  background: radial-gradient(1200px 620px at 50% 38%, #ffffff 0%, #eef3fa 82%);
}
.hp-trio.on { opacity: 1; transform: none; }
.hp-trio .ttitle {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 0.14em;
  background: var(--grad-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hp-trio .tsub { font-size: 13.5px; letter-spacing: 0.42em; color: #64748b; margin-top: -16px; }
.hp-trio .mins { display: flex; gap: 26px; }
.hp-mini {
  width: 300px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 56px rgba(13, 27, 46, 0.12);
  padding: 13px 15px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hp-mini.on { opacity: 1; transform: none; }
.hp-mini .mtag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.hp-mini.m-gm .mtag { color: #3b82f6; background: rgba(59, 130, 246, 0.09); }
.hp-mini.m-sales .mtag { color: #059669; background: rgba(16, 185, 129, 0.09); }
.hp-mini.m-keeper .mtag { color: #d97706; background: rgba(245, 158, 11, 0.12); }
.hp-mini .mtag .mdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hp-mini .mblock { height: 13px; border-radius: 6px; background: #eef2f7; margin-bottom: 8px; }
.hp-mini .mblock.hl { background: linear-gradient(90deg, rgba(59, 130, 246, 0.16), rgba(139, 92, 246, 0.1)); }
.hp-mini .mblock.g2 { width: 82%; }
.hp-mini .mblock.g3 { width: 64%; }
.hp-mini .mgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.hp-mini .mgrid2 .mblock { margin-bottom: 0; height: 26px; }
.hp-mini .mfoot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.hp-mini .mfoot i { height: 22px; border-radius: 7px; background: #f1f5f9; }
.hp-mini .mfoot i.on { background: rgba(59, 130, 246, 0.14); }

/* ---------- 字幕 / 水印 / 结尾卡（品牌深色系，与 sc-/pf- 同规格） ---------- */

.hp-caption {
  position: absolute;
  left: 0; right: 0;
  bottom: 7.5%;
  text-align: center;
  z-index: 40;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #eef3fb;
  text-shadow: 0 2px 30px rgba(5, 8, 15, 0.95), 0 0 60px rgba(61, 139, 255, 0.35);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.hp-caption.on { opacity: 1; transform: none; }

.hp-caption-veil {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26%;
  background: linear-gradient(180deg, transparent, rgba(5, 8, 15, 0.78));
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  z-index: 35;
}
.hp-caption-veil.on { opacity: 1; }

.hp-endcard {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: radial-gradient(1100px 560px at 50% 42%, rgba(11, 23, 48, 0.92), rgba(5, 8, 15, 0.985) 78%);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.hp-endcard.on { opacity: 1; }
.hp-endcard .logo-wrap {
  width: 132px; height: 132px;
  border-radius: 32px;
  display: grid; place-items: center;
  transform: scale(0.8);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s, opacity 0.9s ease 0.25s;
  box-shadow: 0 30px 90px rgba(52, 224, 232, 0.22), 0 0 120px rgba(139, 92, 246, 0.14);
}
.hp-endcard.on .logo-wrap { transform: scale(1); opacity: 1; }
.hp-endcard .logo-wrap img { width: 108px; height: 108px; }
.hp-endcard .ename {
  font-family: var(--font-display);
  font-size: 46px;
  letter-spacing: 0.06em;
  opacity: 0;
  transform: translateY(16px);
  transition: all 0.8s ease 0.5s;
}
.hp-endcard.on .ename { opacity: 1; transform: none; }
.hp-endcard .eslogan {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: #a9b7d0;
  opacity: 0;
  transform: translateY(16px);
  transition: all 0.8s ease 0.75s;
}
.hp-endcard.on .eslogan { opacity: 1; transform: none; }
.hp-endcard .ecta {
  font-size: 14.5px;
  letter-spacing: 0.3em;
  color: #6b7a96;
  padding: 10px 30px;
  border: 1px solid rgba(140, 170, 220, 0.14);
  border-radius: 999px;
  opacity: 0;
  transition: all 0.8s ease 1s;
}
.hp-endcard.on .ecta { opacity: 1; }

.hp-watermark {
  position: absolute;
  top: 11px;
  left: 285px;
  z-index: 45;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(5, 10, 20, 0.78);
  border: 1px solid rgba(140, 170, 220, 0.2);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 1s ease 0.4s;
}
.hp-watermark.on { opacity: 1; }
.hp-watermark img { width: 22px; height: 22px; }
.hp-watermark .wm-name {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: rgba(238, 243, 251, 0.95);
}

/* 自适应缩放壳（与 sc-fit 同构） */
.hp-fit { position: relative; width: 100%; }