/* ==========================================================================
   PWA 安装横幅 + iOS 引导弹层
   ========================================================================== */

/* ---------- 安装横幅 ---------- */
.pwa-bar{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;margin-bottom:14px;
  background:linear-gradient(135deg,#1e2a4a,#1c1a3d);
  border:1px solid #3a4a86;border-radius:14px;
  animation:slideDown .34s ease-out;
}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.pwa-ic{
  width:34px;height:34px;flex:0 0 34px;border-radius:9px;
  background:linear-gradient(135deg,#5b8cff,#8b5cf6);
  display:flex;align-items:center;justify-content:center;
}
.pwa-ic svg{width:19px;height:19px;fill:#fff}
.pwa-tx{flex:1;min-width:0}
.pwa-tx b{display:block;font-size:14px;font-weight:500;line-height:1.35}
.pwa-tx span{display:block;font-size:11px;color:var(--tx3);margin-top:1px}
.pwa-btn{
  flex:0 0 auto;background:#5b8cff;border:0;color:#fff;
  padding:9px 15px;border-radius:10px;font-size:13px;cursor:pointer;
  min-height:38px;white-space:nowrap;transition:.15s;
}
.pwa-btn:hover{filter:brightness(1.12)}
.pwa-btn:active{transform:scale(.97)}
.pwa-x{
  flex:0 0 auto;width:30px;height:30px;border-radius:8px;
  background:transparent;border:0;color:var(--tx3);
  font-size:19px;line-height:1;cursor:pointer;
}
.pwa-x:hover{background:var(--bg3);color:var(--tx2)}

/* ---------- iOS 引导弹层 ---------- */
.ios-sheet-mask{
  position:fixed;inset:0;z-index:200;
  background:rgba(6,8,12,.72);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity .25s;
}
.ios-sheet-mask.on{opacity:1}
.ios-sheet{
  width:100%;max-width:420px;
  background:#181d26;border:1px solid var(--line2);
  border-radius:20px 20px 0 0;
  padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));
  transform:translateY(20px);transition:transform .28s;
}
.ios-sheet-mask.on .ios-sheet{transform:none}
@media (min-width:560px){
  .ios-sheet-mask{align-items:center}
  .ios-sheet{border-radius:20px;max-width:400px}
}
.ios-hd{font-size:17px;font-weight:500;margin-bottom:18px;text-align:center}
.ios-step{display:flex;gap:12px;align-items:flex-start;margin-bottom:15px}
.ios-ic{
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;
  background:#5b8cff;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:500;
}
.ios-tx{font-size:14px;line-height:1.55;color:var(--tx2);padding-top:2px}
.ios-tx b{color:var(--tx);font-weight:500}
.ios-demo{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;margin-left:6px;vertical-align:middle;
  background:#5b8cff;color:#fff;border-radius:6px;font-size:14px;
}
.ios-ok{
  width:100%;background:#5b8cff;border:0;color:#fff;
  padding:14px;border-radius:11px;font-size:15px;cursor:pointer;
  margin-top:6px;min-height:48px;
}
.ios-ok:active{filter:brightness(.94)}
.ios-never{
  width:100%;background:transparent;border:0;color:var(--tx3);
  padding:13px;font-size:13px;cursor:pointer;margin-top:4px;
}

/* 移动端横幅更紧凑 */
@media (max-width:640px){
  .pwa-bar{padding:10px 12px;gap:10px;margin-bottom:12px}
  .pwa-ic{width:30px;height:30px;flex-basis:30px;border-radius:8px}
  .pwa-ic svg{width:17px;height:17px}
  .pwa-tx b{font-size:13px}
  .pwa-tx span{font-size:10px}
  .pwa-btn{padding:8px 12px;font-size:12px;min-height:36px}
  .pwa-x{width:26px;height:26px;font-size:17px}
}

/* standalone 模式下若仍显示横幅（异常），兜底隐藏 */
@media (display-mode: standalone){
  .pwa-bar{display:none !important}
}