/*
 * PWA 安装入口 / 浮层卡的样式(资料库侧)。
 *
 * 为什么不放在 MoacDrawer.astro 的 <style> 里:Astro 的 <style> 默认 scoped,
 * 编译时给模板中已存在的元素加作用域属性;而这些节点是 moac-pwa.js 在运行时
 * 注入的,拿不到那个属性,样式会整块不生效 —— 表现就是图标撑满、布局全塌。
 */
/* ---------- PWA 安装入口 / 浮层卡(与主站 PwaInstallLink / PwaInstallCard 同观感)---------- */
.mo-pwaBtn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 14px; background: color-mix(in srgb, currentColor 5%, transparent);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s cubic-bezier(.2,.7,.3,1);
}
.mo-pwaBtn:hover { background: color-mix(in srgb, currentColor 10%, transparent); border-color: color-mix(in srgb, currentColor 38%, transparent); }
.mo-pwaBtn:active { transform: scale(.985); }
.mo-pwaIcon {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px;
  border-radius: 10px; border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.mo-pwaIcon svg { width: 18px; height: 18px; display: block; }
.mo-pwaText { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mo-pwaTitle { font-size: 14px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.mo-pwaSub { font-family: var(--sl-font-mono); font-size: 10.5px; opacity: .55; margin: 0; }
.mo-pwaChev { flex: none; font-size: 14px; opacity: .45; line-height: 1; }
.mo-pwaSteps { margin: 10px 0 0; padding: 0 0 0 1.15em; list-style: decimal; font-size: 12px; line-height: 1.75; opacity: .62; }

.mo-pwaCard {
  position: fixed; z-index: 120; left: 12px; right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  padding: 14px; border-radius: 18px;
  background: rgba(21,20,16,.82); color: #f2f0ea;
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 20px 46px -18px rgba(0,0,0,.6);
  animation: moPwaIn .32s cubic-bezier(.2,.75,.2,1) both;
}
@media (min-width: 720px) { .mo-pwaCard { left: auto; right: 20px; bottom: 20px; width: 320px; } }
@keyframes moPwaIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mo-pwaCard { animation: none; } }
.mo-pwaCardTop { display: flex; align-items: flex-start; gap: 11px; }
.mo-pwaCardSteps { margin: 11px 0 0; padding: 0 0 0 1.15em; list-style: decimal; font-size: 11.5px; line-height: 1.7; color: rgba(242,240,234,.82); }
.mo-pwaCardRow { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.mo-pwaSpacer { flex: 1; }
.mo-pwaPrimary { font-size: 12.5px; font-weight: 700; padding: 9px 18px; border: 0; border-radius: 999px; background: #f2f0ea; color: #151410; cursor: pointer; }
.mo-pwaGhost { font-size: 11.5px; padding: 9px 12px; border: 0; border-radius: 999px; background: none; color: rgba(242,240,234,.66); cursor: pointer; }
.mo-pwaPrimary:hover { opacity: .85; } .mo-pwaGhost:hover { color: #f2f0ea; }