/**
 * K4电竞 - 护航页专用样式层（Escort Scope）
 * 职责：护航页材质覆盖、更厚更稳更克制的视觉系统
 * 作用域：仅作用于 body.page-escort
 * 禁止：全站污染、灯带感、过度发光
 */

/* ===== Step 2: Escort Scope 变量覆盖 ===== */
body.page-escort {
  /* 护航页专用 tokens：更厚、更稳、更少透 */
  --escort-panel-bg: rgba(10, 14, 18, 0.92);  /* 主面板：高不透明度，更厚 */
  --escort-panel-bg-sub: rgba(10, 14, 18, 0.78);  /* 子面板：次厚 */
  --escort-panel-border: rgba(216, 195, 143, 0.08);  /* 边框：极弱金属边 */
  --escort-panel-hairline: rgba(255, 255, 255, 0.04);  /* 顶部刀口线：极弱 */
  
  /* Overlay 渐变：上轻下重，背景可见但不抢势 */
  --escort-overlay-top: rgba(5, 8, 12, 0.55);
  --escort-overlay-bottom: rgba(5, 8, 12, 0.72);
  
  /* Glow Hierarchy：三档，默认极弱 */
  --escort-glow-soft: 0 0 0 rgba(0, 0, 0, 0);  /* 默认无发光 */
  --escort-glow-focus: 0 0 12px rgba(216, 195, 143, 0.08);  /* 重点节点：极弱 */
  --escort-glow-hover: 0 0 16px rgba(216, 195, 143, 0.12);  /* hover：弱 */
  
  /* 文字对比度：通过面板对比度提升，不靠变白 */
  --escort-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ===== Step 2.1: 背景 Overlay 调整（已由bg-stack的vignette处理，此处移除） ===== */
/* 注意：背景overlay现在由bg-stack.css的.bg-vignette统一处理，无需重复 */

/* ===== Step 2.2: 主内容面板（更厚、更稳，使用渐变而非纯rgba） ===== */
body.page-escort .k4-panel {
  /* 提升厚度：渐变背景（上实下透）+ 内阴影凹陷感 */
  background: linear-gradient(
    180deg,
    var(--escort-panel-bg) 0%,
    rgba(10, 14, 18, 0.88) 50%,
    rgba(10, 14, 18, 0.85) 100%
  ) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  
  /* 边框：极弱金属边 + 顶部刀口线 */
  border: 1px solid var(--escort-panel-border) !important;
  
  /* 多层阴影：外深 + 内凹 + 顶部hairline */
  box-shadow:
    inset 0 1px 0 var(--escort-panel-hairline),  /* 顶部刀口线 */
    inset 0 -20px 40px rgba(0, 0, 0, 0.52),  /* 内阴影：增强凹陷感 */
    0 24px 80px rgba(0, 0, 0, 0.62),  /* 外阴影：更深 */
    0 8px 32px rgba(0, 0, 0, 0.45) !important;  /* 外阴影：次层 */
  
  /* 禁止默认glow */
  --glow-soft: var(--escort-glow-soft);
  --glow-focus: var(--escort-glow-focus);
  --glow-hover: var(--escort-glow-hover);
}

/* 子面板（计费方式、流程时间线、常见问题卡片，使用渐变） */
body.page-escort .k4-panel .glass {
  background: linear-gradient(
    180deg,
    var(--escort-panel-bg-sub) 0%,
    rgba(10, 14, 18, 0.75) 50%,
    rgba(10, 14, 18, 0.72) 100%
  ) !important;
  backdrop-filter: blur(6px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(110%) !important;
  
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  
  /* 禁止glow，只保留阴影 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),  /* 顶部hairline */
    inset 0 -16px 32px rgba(0, 0, 0, 0.45),  /* 内阴影 */
    0 12px 40px rgba(0, 0, 0, 0.5) !important;  /* 外阴影 */
}

/* ===== Step 2.3: 文字可读性（通过面板对比度，不靠变白） ===== */
body.page-escort .k4-panel h1,
body.page-escort .k4-panel h2,
body.page-escort .k4-panel .font-semibold,
body.page-escort .k4-panel .font-medium {
  text-shadow: var(--escort-text-shadow);
  color: rgba(245, 248, 255, 0.95);
}

body.page-escort .k4-panel p,
body.page-escort .k4-panel li,
body.page-escort .k4-panel .text-gray-300 {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  color: rgba(229, 231, 235, 0.92);
}

body.page-escort .k4-panel .text-gray-400 {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  color: rgba(156, 163, 175, 0.88);
}

/* ===== Step 3: Glow Hierarchy - 禁止全站平均发光 ===== */

/* 3.1: 全局glow压到极弱（主面板已在上面定义，这里只处理独立glass） */
body.page-escort .glass:not(.k4-panel) {
  /* 默认无glow，只保留基础阴影 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 -16px 32px rgba(0, 0, 0, 0.45),
    0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

/* 3.2: 禁用k4-glow的默认呼吸光动画 */
body.page-escort .k4-glow::before {
  display: none !important;
}

body.page-escort .k4-glow::after {
  display: none !important;
}

/* 3.3: 仅允许重点节点使用focus glow */

/* 3.3.1: 页面主标题区域（hero panel） */
body.page-escort .k4-panel > h1:first-child {
  text-shadow: 
    var(--escort-text-shadow),
    0 0 16px rgba(216, 195, 143, 0.12);  /* 极弱focus glow */
}

/* 3.3.2: "流程时间线/关键模块"的标题条 */
body.page-escort .k4-panel h2 {
  position: relative;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

body.page-escort .k4-panel h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 1px;
  background: rgba(216, 195, 143, 0.2);
  box-shadow: 0 0 8px rgba(216, 195, 143, 0.1);  /* 极弱focus glow */
  transition: width 0.3s ease;
}

body.page-escort .k4-panel h2:hover::after {
  width: 80px;  /* hover时轻微延伸 */
}

/* 3.3.3: CTA按钮hover */
body.page-escort .k4-btn:hover,
body.page-escort a.glass.glow:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -12px 24px rgba(0, 0, 0, 0.48),
    0 16px 50px rgba(0, 0, 0, 0.55),
    var(--escort-glow-hover) !important;  /* hover才给glow */
}

/* 3.4: 其他卡片默认无glow或只有极弱hairline */
body.page-escort .glass:not(.k4-btn):not(.glow) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 -16px 32px rgba(0, 0, 0, 0.45),
    0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

/* 3.5: 开关类 .glow-off 一键禁用发光 */
body.page-escort .glow-off,
body.page-escort .glow-off * {
  box-shadow: none !important;
  text-shadow: var(--escort-text-shadow) !important;
}

body.page-escort .glow-off::before,
body.page-escort .glow-off::after {
  display: none !important;
}

/* ===== 移动端优化 ===== */
@media (max-width: 767px) {
  body.page-escort .k4-panel {
    backdrop-filter: blur(6px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(110%) !important;
  }
  
  body.page-escort .k4-panel .glass {
    backdrop-filter: blur(4px) saturate(105%) !important;
    -webkit-backdrop-filter: blur(4px) saturate(105%) !important;
  }
}