/**
 * /app 视觉模版 1–8 — 去同质化：除色板外，首屏栅格、条带形态、资质卡版式、整页气质均不同
 * 接入：.env APP_LANDING_TEMPLATE=1 … 8；根节点 .app-lp--tpl-01 … 08
 * 依赖：app-landing.css（全站 theme.css 先行更佳）
 */

/* ═══════════════════════════════════════════════════════════════
   01 刊例非对称 — 左重右轻、大标题实色、章节下划线（偏杂志）
   ═══════════════════════════════════════════════════════════════ */
.app-lp.app-lp--tpl-01 {
  --lp-bg: #f7f4ef;
  --lp-card: #fffdf8;
  --lp-panel: #efe9df;
  --lp-line: rgba(90, 70, 45, 0.14);
  --lp-line-strong: rgba(146, 90, 42, 0.42);
}

@media (min-width: 840px) {
  .app-lp.app-lp--tpl-01 .app-lp-hero {
    grid-template-columns: 1.22fr 0.78fr;
    align-items: start;
    padding: 40px 44px 36px;
  }
}

.app-lp.app-lp--tpl-01 .app-lp-hero > div:first-child {
  border-left: 5px solid var(--lp-line-strong);
  padding-left: 22px;
  margin-left: 4px;
}

.app-lp.app-lp--tpl-01 .app-lp-hero h1 {
  font-size: clamp(1.75rem, 4.8vw, 2.45rem);
  line-height: 1.18;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: #1c1410;
  letter-spacing: -0.03em;
}

.app-lp.app-lp--tpl-01 .app-lp-kicker {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 11px;
  color: #8b5a2b;
}

.app-lp.app-lp--tpl-01 .app-lp-strip {
  border: 1px dashed var(--lp-line);
  background: repeating-linear-gradient(
    -12deg,
    var(--lp-card),
    var(--lp-card) 12px,
    var(--lp-panel) 12px,
    var(--lp-panel) 24px
  );
}

.app-lp.app-lp--tpl-01 .app-lp-section h2 {
  border-bottom: 3px solid var(--lp-line-strong);
  padding-bottom: 12px;
  display: inline-block;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   02 全站夜幕 — 整页深色 UI；首屏略提亮，下方与条统一暗色
   ═══════════════════════════════════════════════════════════════ */
.app-lp.app-lp--tpl-02 {
  --lp-bg: #0a0f18;
  --lp-card: #111827;
  --lp-panel: #161f33;
  --lp-text: #e5e7eb;
  --lp-muted: #9ca3af;
  --lp-line: rgba(148, 163, 184, 0.18);
  --lp-line-strong: rgba(94, 234, 212, 0.45);
  --lp-accent: #2dd4bf;
  --lp-accent-dim: #5eead4;
  --lp-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  --lp-shadow-soft: var(--lp-shadow);
  --lp-award-title: #7dd3fc;
}

.app-lp.app-lp--tpl-02 .app-lp-crumb,
.app-lp.app-lp--tpl-02 .app-lp-crumb a {
  color: #93c5fd;
}

.app-lp.app-lp--tpl-02 .app-lp-hero {
  background: linear-gradient(165deg, #1e293b 0%, #0f172a 55%, #0c1222 100%);
  border-color: rgba(148, 163, 184, 0.28);
}

.app-lp.app-lp--tpl-02 .app-lp-hero h1 {
  background: linear-gradient(115deg, #f8fafc 0%, #bae6fd 45%, #5eead4 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.app-lp.app-lp--tpl-02 .app-lp-hero .app-lp-hero-promise,
.app-lp.app-lp--tpl-02 .app-lp-hero .app-lp-lead {
  color: #cbd5e1;
}

.app-lp.app-lp--tpl-02 .app-lp-hero .app-lp-badge {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(148, 163, 184, 0.35);
  color: #e5e7eb;
}

.app-lp.app-lp--tpl-02 .app-lp-hero .app-lp-btn--ghost {
  border-color: rgba(226, 232, 240, 0.3);
  color: #f1f5f9;
}

.app-lp.app-lp--tpl-02 .app-lp-hero .app-lp-btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #f9fafb;
  border-color: rgba(148, 163, 184, 0.35);
}

.app-lp.app-lp--tpl-02 .app-lp-strip {
  background: #0f172a;
  border-color: rgba(94, 234, 212, 0.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.app-lp.app-lp--tpl-02 .app-lp-strip-item {
  background: linear-gradient(180deg, #1e293b 0%, #111827 100%);
  border-color: rgba(148, 163, 184, 0.12);
}

.app-lp.app-lp--tpl-02 .app-lp-strip-val {
  background: linear-gradient(105deg, #a5f3fc, #5eead4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.app-lp.app-lp--tpl-02 .app-lp-strip-label {
  color: #94a3b8;
}

.app-lp.app-lp--tpl-02 .app-lp-section h2 {
  color: var(--lp-text);
}

.app-lp.app-lp--tpl-02 .app-lp-shots-lead,
.app-lp.app-lp--tpl-02 .app-lp-awards-lead {
  color: var(--lp-muted);
}

.app-lp.app-lp--tpl-02 .app-lp-shot {
  background: var(--lp-card);
  border-color: var(--lp-line);
}

.app-lp.app-lp--tpl-02 .app-lp-awards-panel {
  background: linear-gradient(180deg, #141c2d 0%, #0f172a 100%);
  border-color: rgba(94, 234, 212, 0.15);
}

.app-lp.app-lp--tpl-02 .app-lp-award-card {
  background: #111827;
  border-color: rgba(148, 163, 184, 0.2);
}

.app-lp.app-lp--tpl-02 .app-lp-phone-mock.has-shot {
  background: #020617;
}

.app-lp.app-lp--tpl-02 .app-lp-phone-shot {
  filter: brightness(1.1) saturate(1.06);
}

/* ═══════════════════════════════════════════════════════════════
   03 快讯报刊 — 零圆角、粗黑框、黄标强调、资质卡「左图右文」纵向堆叠
   ═══════════════════════════════════════════════════════════════ */
.app-lp.app-lp--tpl-03 {
  --lp-bg: #fafaf9;
  --lp-card: #ffffff;
  --lp-panel: #f5f5f4;
  --lp-radius: 0px;
  --lp-radius-sm: 0px;
  --lp-accent: #ca8a04;
  --lp-accent-dim: #a16207;
  --lp-line: rgba(15, 23, 42, 0.85);
  --lp-line-strong: #0f172a;
  --lp-shadow: 8px 8px 0 #0f172a;
  --lp-shadow-soft: 4px 4px 0 rgba(15, 23, 42, 0.35);
  --lp-award-title: #854d0e;
}

.app-lp.app-lp--tpl-03 .app-lp-hero {
  border-width: 3px;
  border-color: #0f172a;
  background: #fffef5;
  box-shadow: var(--lp-shadow);
  border-radius: 0;
}

.app-lp.app-lp--tpl-03 .app-lp-hero h1 {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.app-lp.app-lp--tpl-03 .app-lp-kicker {
  color: #0f172a;
  font-weight: 900;
  letter-spacing: 0.12em;
  background: #facc15;
  display: inline-block;
  padding: 4px 10px;
}

.app-lp.app-lp--tpl-03 .app-lp-btn--primary {
  border-radius: 0;
  box-shadow: 4px 4px 0 #0f172a;
}

.app-lp.app-lp--tpl-03 .app-lp-btn--secondary,
.app-lp.app-lp--tpl-03 .app-lp-btn--ghost {
  border-radius: 0;
}

.app-lp.app-lp--tpl-03 .app-lp-strip {
  border-width: 3px;
  border-color: #0f172a;
  border-radius: 0;
  box-shadow: var(--lp-shadow-soft);
}

.app-lp.app-lp--tpl-03 .app-lp-strip-item {
  border-color: #0f172a;
  background: #fff;
}

.app-lp.app-lp--tpl-03 .app-lp-award-cards {
  grid-template-columns: 1fr;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  gap: 0;
}

.app-lp.app-lp--tpl-03 .app-lp-award-card {
  flex-direction: row;
  align-items: stretch;
  border-width: 3px;
  border-radius: 0;
  margin-bottom: 14px;
  box-shadow: 4px 4px 0 rgba(15, 23, 42, 0.25);
}

.app-lp.app-lp--tpl-03 .app-lp-award-card:hover {
  transform: translate(-2px, -2px);
}

.app-lp.app-lp--tpl-03 .app-lp-award-card-media {
  flex: 0 0 42%;
  max-width: 260px;
  aspect-ratio: 4 / 3;
  border-radius: 0;
}

.app-lp.app-lp--tpl-03 .app-lp-award-card-body {
  border-radius: 0;
  justify-content: center;
}

@media (max-width: 560px) {
  .app-lp.app-lp--tpl-03 .app-lp-award-card {
    flex-direction: column;
  }

  .app-lp.app-lp--tpl-03 .app-lp-award-card-media {
    flex: none;
    max-width: none;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* ═══════════════════════════════════════════════════════════════
   04 磨砂玻璃 — 大圆角、半透明层、hero 去实边框
   ═══════════════════════════════════════════════════════════════ */
.app-lp.app-lp--tpl-04 {
  --lp-bg: #e0f2fe;
  --lp-card: rgba(255, 255, 255, 0.72);
  --lp-panel: rgba(224, 242, 254, 0.65);
  --lp-line: rgba(3, 105, 161, 0.22);
  --lp-line-strong: rgba(14, 165, 233, 0.55);
  --lp-radius: 22px;
  --lp-radius-sm: 16px;
  --lp-accent: #0284c7;
  --lp-accent-dim: #0369a1;
  --lp-shadow: 0 25px 60px rgba(3, 105, 161, 0.18);
}

.app-lp.app-lp--tpl-04 .app-lp-hero {
  position: relative;
  border: none;
  /* 磨砂放 ::before：若写在本盒上 backdrop-filter，会为 fixed 子元素建立固定参照区，扫码条会相对 hero 右缘、压住右侧 browser/mock */
  background: transparent;
  box-shadow: var(--lp-shadow);
}

.app-lp.app-lp--tpl-04 .app-lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: calc(var(--lp-radius) + 4px);
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
}

.app-lp.app-lp--tpl-04 .app-lp-hero > * {
  position: relative;
  z-index: 1;
}

.app-lp.app-lp--tpl-04 .app-lp-shot {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.55);
}

.app-lp.app-lp--tpl-04 .app-lp-awards-panel {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(14, 165, 233, 0.25);
}

.app-lp.app-lp--tpl-04 .app-lp-strip {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(14, 165, 233, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   05 双卡分屏 — 首屏无大壳：左右各一小卡；宽屏左机右文
   ═══════════════════════════════════════════════════════════════ */
.app-lp.app-lp--tpl-05 {
  --lp-accent: #0e7490;
  --lp-accent-dim: #155e75;
}

/* 05：机身固定深色渐变，不跟随 --lp-text（暗色主题下 --text 常为浅字，否则机身顶半会洗成浅绿/白） */
.app-lp.app-lp--tpl-05 .app-lp-hero .app-lp-phone {
  background-color: #1e1b4b;
  background-image: linear-gradient(168deg, #1e1b4b 0%, #312e81 40%, #1e40af 100%);
  border: 1px solid rgba(165, 180, 252, 0.38);
  box-shadow:
    0 26px 58px rgba(30, 27, 75, 0.48),
    inset 0 0 0 2px rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
}

.app-lp.app-lp--tpl-05 .app-lp-hero {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 12px 0 8px;
  gap: 18px;
}

@media (max-width: 839px) {
  .app-lp.app-lp--tpl-05 .app-lp-hero {
    background: var(--lp-card);
    border: 1px solid var(--lp-line);
    border-radius: calc(var(--lp-radius) + 4px);
    box-shadow: var(--lp-shadow-soft);
    padding: 24px 20px;
  }
}

@media (min-width: 840px) {
  .app-lp.app-lp--tpl-05 .app-lp-hero {
    grid-template-columns: 1fr 1fr;
  }

  .app-lp.app-lp--tpl-05 .app-lp-hero > div:first-child {
    order: 2;
    background: var(--lp-card);
    border: 1px solid var(--lp-line);
    border-radius: calc(var(--lp-radius) + 6px);
    padding: 28px 26px;
    box-shadow: var(--lp-shadow-soft);
  }

  .app-lp.app-lp--tpl-05 .app-lp-hero > .app-lp-phone {
    order: 1;
    border-radius: calc(var(--lp-radius) + 6px);
    padding: 20px 18px;
    box-shadow:
      var(--lp-shadow-soft),
      0 26px 58px rgba(30, 27, 75, 0.38),
      inset 0 0 0 2px rgba(255, 255, 255, 0.14);
  }
}

.app-lp.app-lp--tpl-05 .app-lp-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

@media (min-width: 720px) {
  .app-lp.app-lp--tpl-05 .app-lp-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.app-lp.app-lp--tpl-05 .app-lp-strip-item {
  border-radius: calc(var(--lp-radius-sm) + 4px);
  border: 1px solid var(--lp-line) !important;
  background: var(--lp-card);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
  margin: 0;
}

.app-lp.app-lp--tpl-05 .app-lp-phone-mock.has-shot {
  background: #0f172a;
}

/* 勿对 05 双栏 SVG 叠 hue-rotate，易把示意字色推近底色 */
.app-lp.app-lp--tpl-05 .app-lp-phone-shot {
  filter: none;
}

/* ═══════════════════════════════════════════════════════════════
   06 居中舞台 — 宽屏首屏单列居中；条带变「胶囊浮动」
   ═══════════════════════════════════════════════════════════════ */
.app-lp.app-lp--tpl-06 {
  --lp-bg: #f0fdf4;
  --lp-card: #ffffff;
  --lp-panel: #dcfce7;
  --lp-accent: #15803d;
  --lp-accent-dim: #166534;
  --lp-line: rgba(22, 101, 52, 0.15);
  --lp-line-strong: rgba(22, 163, 74, 0.45);
  --lp-award-title: #14532d;
}

@media (min-width: 840px) {
  .app-lp.app-lp--tpl-06 .app-lp-hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 44px 32px 36px;
  }

  .app-lp.app-lp--tpl-06 .app-lp-hero .app-lp-lead,
  .app-lp.app-lp--tpl-06 .app-lp-hero .app-lp-hero-promise {
    margin-left: auto;
    margin-right: auto;
  }

  .app-lp.app-lp--tpl-06 .app-lp-badges,
  .app-lp.app-lp--tpl-06 .app-lp-cta {
    justify-content: center;
  }

  .app-lp.app-lp--tpl-06 .app-lp-hero-extras {
    justify-content: center;
  }

  .app-lp.app-lp--tpl-06 .app-lp-phone {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
}

.app-lp.app-lp--tpl-06 .app-lp-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 8px 0 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.app-lp.app-lp--tpl-06 .app-lp-strip-item {
  flex: 1 1 140px;
  max-width: 220px;
  border-radius: 999px;
  border: 1px solid var(--lp-line-strong) !important;
  background: var(--lp-card);
  box-shadow: 0 8px 22px rgba(22, 101, 52, 0.12);
}

.app-lp.app-lp--tpl-06 .app-lp-awards-panel {
  border-radius: calc(var(--lp-radius) + 8px);
  border-width: 2px;
  border-color: rgba(22, 163, 74, 0.22);
}

/* ═══════════════════════════════════════════════════════════════
   07 浮动数据块 — 条带拆成四块独立「卡片」；hero 霓虹边
   ═══════════════════════════════════════════════════════════════ */
.app-lp.app-lp--tpl-07 {
  --lp-bg: #f5f3ff;
  --lp-card: #ffffff;
  --lp-panel: #ede9fe;
  --lp-accent: #7c3aed;
  --lp-accent-dim: #6d28d9;
  --lp-line: rgba(109, 40, 217, 0.18);
  --lp-line-strong: rgba(124, 58, 237, 0.55);
}

.app-lp.app-lp--tpl-07 .app-lp-hero {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--lp-card), var(--lp-card)) padding-box,
    linear-gradient(125deg, #c084fc, #7c3aed, #4f46e5) border-box;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.35), 0 24px 55px rgba(76, 29, 149, 0.2);
}

.app-lp.app-lp--tpl-07 .app-lp-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.app-lp.app-lp--tpl-07 .app-lp-strip-item {
  flex: 1 1 calc(50% - 10px);
  min-height: 92px;
  border-radius: 16px;
  border: 1px solid rgba(129, 140, 248, 0.45);
  background: linear-gradient(155deg, #312e81 0%, #1e1b4b 100%);
  box-shadow: 0 14px 32px rgba(55, 48, 163, 0.35);
  border-right: 1px solid rgba(129, 140, 248, 0.45);
}

@media (min-width: 720px) {
  .app-lp.app-lp--tpl-07 .app-lp-strip-item {
    flex: 1 1 calc(25% - 12px);
  }
}

.app-lp.app-lp--tpl-07 .app-lp-strip-val {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: #fef08a;
}

.app-lp.app-lp--tpl-07 .app-lp-strip-label {
  color: rgba(226, 232, 240, 0.9);
}

.app-lp.app-lp--tpl-07 .app-lp-award-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .app-lp.app-lp--tpl-07 .app-lp-award-cards {
    grid-template-columns: 1fr;
  }
}

.app-lp.app-lp--tpl-07 .app-lp-phone-shot {
  filter: saturate(1.18) hue-rotate(12deg);
}

/* ═══════════════════════════════════════════════════════════════
   08 竖版画幅 — 窄版心 + 界面掠影桌面端改「单栏大图」长卷
   APP_LANDING_TEMPLATE=8 与 sport-template 主站配套：色板同 sport-themes_ACdZ4/sport-template/public/assets/theme.css
   ═══════════════════════════════════════════════════════════════ */
.app-lp.app-lp--tpl-08 .app-lp-wrap {
  max-width: 880px;
}

.app-lp.app-lp--tpl-08 {
  --lp-bg: #eef4fa;
  --lp-card: #ffffff;
  --lp-card2: #f6f9fd;
  --lp-panel: #e8f0f8;
  --lp-text: #0f172a;
  --lp-muted: #5c6b80;
  --lp-line: rgba(15, 23, 42, 0.085);
  --lp-line-strong: rgba(0, 120, 212, 0.38);
  --lp-accent: #0078d4;
  --lp-accent-dim: #106ebe;
  --lp-accent-blue: #005a9e;
  --lp-accent-blue-dim: #004578;
  --lp-sky: #00bcf2;
  --lp-radius: 15px;
  --lp-radius-sm: 11px;
  --lp-shadow: 0 18px 48px rgba(15, 23, 42, 0.09);
  --lp-shadow-soft: 0 10px 32px rgba(0, 90, 158, 0.07);
  --lp-glow: 0 8px 32px rgba(0, 120, 212, 0.14);
  --lp-gold-soft: rgba(193, 125, 0, 0.12);
  --lp-award-title: #876800;
}

.app-lp.app-lp--tpl-08 .app-lp-hero {
  background: linear-gradient(180deg, #f7fafd 0%, #e8f2fa 50%, #dceaf5 100%);
  border: 1px solid var(--lp-line);
  box-shadow: var(--lp-shadow);
}

.app-lp.app-lp--tpl-08 .app-lp-hero h1,
.app-lp.app-lp--tpl-08 .app-lp-section h2 {
  font-family: Georgia, "Noto Serif SC", "Songti SC", "STSong", serif;
  letter-spacing: -0.02em;
}

.app-lp.app-lp--tpl-08 .app-lp-hero h1 {
  background: linear-gradient(125deg, #0f172a 0%, #004578 32%, var(--lp-accent) 62%, var(--lp-sky) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(1.7rem, 4.2vw, 2.35rem);
}

.app-lp.app-lp--tpl-08 .app-lp-section h2 {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--lp-text);
}

.app-lp.app-lp--tpl-08 .app-lp-section h2 .app-lp-h2-brand {
  color: var(--lp-accent-blue-dim);
}

.app-lp.app-lp--tpl-08 .app-lp-kicker {
  text-transform: none;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lp-accent);
}

@media (min-width: 760px) {
  .app-lp.app-lp--tpl-08 .app-lp-shot-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    gap: 20px;
  }

  .app-lp.app-lp--tpl-08 .app-lp-shot-img {
    aspect-ratio: 9 / 16;
    max-height: 520px;
  }
}

.app-lp.app-lp--tpl-08 .app-lp-crumb {
  font-family: system-ui, sans-serif;
}