/* ============================================================================
   甜途 App「扫码下载」弹窗 —— 主站 www.yuanabd.cn 专用
   
   设计约束：
   · 只使用主站自身的 CSS 变量（--bg/--ink/--line/--sun/--travel/--shadow-soft/--font-*），
     不引入甜途门户那套 --accent/--font-display/--ink-soft（命名不同，照搬会样式失效）。
   · 类名统一 dl 前缀 + BEM，避免与主站既有类冲突。
   · 尊重 prefers-reduced-motion。
   ============================================================================ */

.dl-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.dl-modal[hidden] { display: none; }

.dl-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(24, 32, 42, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: dl-fade 0.22s var(--ease-out) both;
}

.dl-modal__panel {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 30px 28px 26px;
  box-shadow: var(--shadow-soft);
  animation: dl-pop 0.32s var(--ease-out) both;
}

@keyframes dl-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes dl-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.97) }
  to   { opacity: 1; transform: translateY(0) scale(1) }
}

.dl-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.dl-modal__close:hover {
  color: var(--ink);
  background: var(--bg-soft);
  border-color: var(--line-strong);
}

.dl-modal__kicker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.dl-modal__title {
  margin-top: 8px;
  font-family: var(--font-disp);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}

.dl-modal__sub {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-dim);
}

.dl-modal__qr {
  margin: 20px auto 0;
  width: 208px;
  height: 208px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--line);
  padding: 10px;
}
.dl-modal__qr img { width: 100%; height: 100%; object-fit: contain; }

.dl-modal__meta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.dl-modal__actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.dl-modal__actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }

.dl-modal__note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--ink-mute);
  text-align: center;
}
.dl-modal__note a { color: var(--travel); border-bottom: 1px solid currentColor; }

@media (prefers-reduced-motion: reduce) {
  .dl-modal__scrim, .dl-modal__panel { animation: none !important; }
}

/* ---------- 页面滚动锁 ----------
   主站 body 滚动锁类名是 .is-locked；弹窗打开时由 app-download.js 成对加/删。 */
body.is-locked { overflow: hidden; }

/* ---------- 版本 chip 加载态 ----------
   首屏 chip 在 /api/version 返回前显示「检查更新中…」，避免白闪写死的旧版本号。 */
[data-app-version-chip] { min-width: 5.6em; justify-content: center; }


/* ---------- data-ripple 指针事件防护 ----------
   门户主站有一段 pointerdown 涟漪动画（ui 脚本）。若按钮命中真实链接并被 preventDefault，
   涟漪动画会一直停在展开态盖住按钮内容；这里显式声明不参与该动画。 */
[data-app-download] { --ripple: none; }

/* ---------- 弹窗内版本 chip ----------
   .chip 的 letter-spacing: .18em 会把 "v1.24.7" 拉成视觉上很大的空隙，弹窗内改紧凑一些。 */
.dl-modal__meta .chip { letter-spacing: .04em; }

/* ---------- 弹窗在窄屏上的收边 ---------- */
@media (max-width: 480px) {
  .dl-modal { padding: 14px; }
  .dl-modal__panel { padding: 26px 20px 22px; border-radius: 22px; }
  .dl-modal__qr { width: 184px; height: 184px; }
  .dl-modal__actions { flex-direction: column; }
}