/* ============================================================
   「添加到主屏幕」教程弹窗(2026-10-25)：iOS(.pop-bookmark-ios) / 安卓(.pop-dl-and) / PC(.pop-dl-pc) 共用。
   原来步骤是中文截图(还带旧品牌 logo)，外文看不懂 → 改成 HTML 画的浏览器菜单示意，菜单项走字典翻译，不放 logo。
   手机：单列，卡片限高可滚动；PC(≥1024)：三步并排。配色同站内玫红夜空。
   显隐仍由各页面 JS 的 .show()/.hide() 控制(外层 display:none → flex)。
   ============================================================ */
.a2hs-pop {
  position: fixed; inset: 0; z-index: 20000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
  background: rgba(10, 2, 6, .62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.a2hs-card {
  position: relative; box-sizing: border-box;
  width: 100%; max-width: 380px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 22px 18px 18px; border-radius: 22px; color: #FFF0E0; text-align: left;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 143, 163, .18) 0%, transparent 62%),
    linear-gradient(160deg, #3A1228 0%, #2A0F1F 55%, #1A0610 100%);
  border: 1px solid rgba(255, 192, 159, .28);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
}
.a2hs-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: 50%; border: 1px solid rgba(255, 192, 159, .28); background: rgba(255, 255, 255, .06); color: #E8CDB8;
}
.a2hs-close:hover { background: rgba(255, 255, 255, .12); }
.a2hs-head { text-align: center; padding: 0 28px; }
.a2hs-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px;
  color: #2D1018; background: linear-gradient(135deg, #FAD4C0 0%, #FF8FA3 60%, #C44569 100%);
  box-shadow: 0 6px 18px rgba(255, 107, 138, .35);
}
.a2hs-title { margin-top: 10px; font-size: 19px; font-weight: 800; line-height: 1.3; }
.a2hs-sub { margin-top: 4px; font-size: 13px; line-height: 1.45; color: #FFC09F; }
.a2hs-steps { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.a2hs-step-text { display: flex; gap: 8px; margin: 0 0 8px; font-size: 13.5px; line-height: 1.45; color: #FFF0E0; }
.a2hs-num {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #2D1018; background: #FF8FA3;
}

/* ---------- 浏览器菜单示意：跟弹窗同一套玫红夜空深色(不用白底，避免一块块刺眼) ---------- */
.a2hs-mock {
  border-radius: 12px; overflow: hidden; color: #FFF0E0;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 192, 159, .2);
  font-size: 13px; line-height: 1.3;
}
.a2hs-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid rgba(255, 192, 159, .12); }
.a2hs-row:first-child { border-top: 0; }
.a2hs-row svg { flex: none; color: #E8B7A8; }
.a2hs-row .a2hs-row-label { flex: 1; min-width: 0; }
.a2hs-row .a2hs-arrow { flex: none; color: #C9A98C; }
.a2hs-row.is-dim { color: #C9A98C; }
.a2hs-row.is-dim svg { color: #A88A78; }
/* 要点的那一项：玫红描边高亮 + 点按光圈 */
.a2hs-row.is-hit { position: relative; font-weight: 700; color: #FFD9C7; background: rgba(255, 143, 163, .14); box-shadow: inset 0 0 0 1.5px #FF8FA3; }
.a2hs-row.is-hit svg { color: #FF8FA3; }
.a2hs-tap { position: relative; flex: none; width: 12px; height: 12px; }
.a2hs-tap::before, .a2hs-tap::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #FF8FA3; }
.a2hs-tap::after { animation: a2hsTap 1.4s ease-out infinite; }
@keyframes a2hsTap { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .a2hs-tap::after { animation: none; } }
.a2hs-sep { height: 1px; margin: 4px 0; background: rgba(255, 192, 159, .12); }
.a2hs-group { padding: 8px 14px 2px; font-size: 11px; font-weight: 700; color: #C9A98C; }

/* Safari 底部工具栏示意 */
.a2hs-toolbar { display: flex; align-items: center; justify-content: space-around; padding: 10px 6px; color: #FFC09F; }
.a2hs-toolbar .is-off { color: rgba(255, 240, 224, .28); }
.a2hs-toolbar .is-hit { position: relative; padding: 4px 6px; border-radius: 8px; color: #FF8FA3; background: rgba(255, 143, 163, .14); box-shadow: 0 0 0 1.5px #FF8FA3; }
.a2hs-toolbar .is-hit .a2hs-tap { position: absolute; right: -6px; bottom: -6px; }

/* 「添加 / 安装」确认框示意(不放图标) */
.a2hs-dialog { padding: 14px 14px 10px; }
.a2hs-dialog-title { font-size: 14px; font-weight: 700; }
.a2hs-field { margin-top: 10px; padding: 6px 2px; border-bottom: 1.5px solid #FF8FA3; font-size: 13px; }
.a2hs-field small { display: block; margin-top: 2px; font-size: 11px; color: #C9A98C; }
.a2hs-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.a2hs-btn { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #FFC09F; }
.a2hs-btn.is-hit { position: relative; font-weight: 800; color: #2D1018; background: linear-gradient(135deg, #FAD4C0 0%, #FF8FA3 60%, #C44569 100%); }
.a2hs-btn.is-hit .a2hs-tap { position: absolute; right: -4px; bottom: -4px; }

/* ---------- PC(≥1024)：深紫直角(同 PC 语言切换面板 / 站内 PC 弹窗令牌)，三步并排 ---------- */
@media (min-width: 1024px) {
  .a2hs-pop { padding: 32px; background: rgba(8, 4, 16, .72); }
  .a2hs-card { max-width: 960px; padding: 30px 32px 28px; border-radius: 0; color: #F2EEFA;
    background: #150F22; border: 1px solid #2C2140; box-shadow: 0 18px 48px rgba(0, 0, 0, .55); }
  .a2hs-close { top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 0; border: 0; background: transparent; color: #8B7EA5; }
  .a2hs-close:hover { background: #1F1233; color: #F2EEFA; }
  .a2hs-badge { width: 44px; height: 44px; border-radius: 0; color: #fff; background: #FF3D8A; box-shadow: none; }
  .a2hs-title { font-size: 22px; color: #F2EEFA; }
  .a2hs-sub { font-size: 14px; color: #8B7EA5; }
  .a2hs-steps { flex-direction: row; align-items: stretch; gap: 16px; margin-top: 22px; }
  .a2hs-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
  .a2hs-step-text { min-height: 40px; font-size: 14px; color: #F2EEFA; }
  .a2hs-num { border-radius: 0; color: #fff; background: #6D3FB5; }
  .a2hs-mock { border-radius: 0; background: #1A1229; border-color: #2C2140; color: #F2EEFA; }
  .a2hs-row { border-top-color: #2C2140; }
  .a2hs-row svg, .a2hs-row .a2hs-arrow { color: #8B7EA5; }
  .a2hs-row.is-dim, .a2hs-row.is-dim svg { color: #8B7EA5; }
  .a2hs-row.is-hit { color: #D7C9F5; background: #2A1046; box-shadow: inset 0 0 0 1.5px #6D3FB5; }
  .a2hs-row.is-hit svg { color: #B794F6; }
  .a2hs-tap::before, .a2hs-tap::after { background: #B794F6; }
  .a2hs-sep { background: #2C2140; }
  .a2hs-group { color: #8B7EA5; }
  .a2hs-field { border-bottom-color: #6D3FB5; }
  .a2hs-field small { color: #8B7EA5; }
  .a2hs-btn { border-radius: 0; color: #B794F6; }
  .a2hs-btn.is-hit { color: #fff; background: #FF3D8A; }
}