/* ============================================================
   LAKEFOX — section-app-promo.css
   随时随地交易（v7.html §app section：左文右视觉；arc 朱砂圆环 + 设备卡 + 浮动卡）
   store 徽章：深色底圆角 10px（加庄：下载徽章）；QR 座白底 12px 圆角 + L3 影
   断点（v7）：≤980 单列，visual min-height 420px
   ============================================================ */

.lf-app {
  min-height: 80vh; /* 内容区 80vh（客户 2026-08） */
  min-height: 80dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--section-pad);
  /* 3↔7 背景互换：原 --thead 浅灰已移交 spread-table，本节回归页面底色 */
}

@media (min-width: 768px) {
  .lf-app {
    padding-block: var(--section-pad-lg);
  }
}

.lf-app__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.lf-app__heading {
  margin-block: 0;
  font-size: var(--text-h2);
  font-weight: 900;
  line-height: 1.25;
  color: var(--ink);
}

.lf-app__heading em {
  font-style: normal;
  color: var(--acc);
}

.lf-app__copy {
  margin-block: 22px 0;
  max-width: 520px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-body); /* G 正文段落色（spec-g §03） */
}

.lf-app__actions {
  margin-block-start: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.lf-app__actions > .lf-btn {
  min-width: 280px; /* 参考示例：主按钮加宽 */
  box-shadow: none; /* 去除按钮投影（客户 2026-08） */
}

/* 第二行：二维码 + 上下堆叠的商店徽章 */
/* QR 座（spec-g §10：96px 白底 12px 圆角，10px 内距） */
/* 商店徽章（v7：深底 10px 圆角；hover --deep；2026-08 客户调整：横排并排、与按钮/QR 同组对齐） */
/* ---------- 右列视觉 ---------- */
.lf-app__visual {
  position: relative;
  min-height: 460px;
}

/* 朱砂圆环（spec-g §06：粗边圆环，opacity ≤.55） */
.lf-app__arc {
  position: absolute;
  inset-inline-end: -140px;
  inset-block-start: -40px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 70px solid rgba(200, 67, 43, 0.3); /* 朱砂透明化（装饰） */
  opacity: 0.9;
  pointer-events: none;
}

/* 设备卡（v7：白底 18px + L3 深影） */
.lf-app__device {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 54%;
  transform: translate(-58%, -50%);
  width: min(430px, 88%);
  overflow: hidden;
  background: var(--bg-white);
  border-radius: 18px;
  box-shadow: var(--shadow-float); /* G§05 L3 浮卡 */
}

.lf-app__device-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-block-end: 1px solid rgba(20, 30, 34, 0.06);
}

.lf-app__device-head b {
  font-size: 14px;
  color: var(--ink);
}

.lf-app__device-head span {
  font-family: var(--num-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--acc);
}

.lf-app__device-body {
  padding: 18px 20px 22px;
}

.lf-app__px {
  font-family: var(--num-font);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}

.lf-app__chg {
  margin-block-start: 2px;
  font-family: var(--num-font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--up); /* 涨 = 青碧（spec-g §02） */
}

.lf-app__chart {
  margin-block-start: 12px;
  width: 100%;
}

/* 浮动卡（v7：白底 16px + L3 影） */
.lf-app__float {
  position: absolute;
  padding: 18px 22px;
  background: var(--bg-white);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(10, 20, 24, 0.18); /* G§05 L3 浮卡 */
}

.lf-app__float h5 {
  margin-block: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.lf-app__float small {
  display: block;
  margin-block-start: 2px;
  font-size: 11px;
  color: var(--ink-3);
}

.lf-app__amt {
  margin-block-start: 8px;
  font-family: var(--num-font);
  font-size: 17px;
  font-weight: 700;
  color: var(--acc); /* 关键数字朱砂 */
}

.lf-app__float--earn {
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 220px;
}

.lf-app__float--247 {
  inset-inline-end: 2%;
  inset-block-start: 6%;
  text-align: center;
}

.lf-app__ring {
  width: 64px;
  height: 64px;
  margin-inline: auto;
  margin-block-end: 8px;
  border-radius: 50%;
  border: 5px solid var(--acc);
  border-inline-end-color: var(--acc-soft);
  display: grid;
  place-items: center;
  font-family: var(--num-font);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}

.lf-app__stars {
  margin-block-start: 4px;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--acc);
}

@media (max-width: 980px) {
  .lf-app__grid {
    grid-template-columns: 1fr;
  }

  .lf-app__visual {
    min-height: 420px;
  }
}


/* 右列图片视觉（客户 2026-09：替换为 spread-step-04.webp） */
.lf-app__visual {
  min-height: auto;
}

.lf-app__img {
  display: block;
  width: 100%;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
}