/* 收藏本站插件 v3 —— 醒目版
 * 配色/位置通过 CSS 变量注入：--fav-from / --fav-to / --fav-bottom
 */

/* ============ ① 顶部导航内嵌按钮 ============ */
.fav-nav-item { margin-left: 8px; }
.fav-nav-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 7px 16px !important;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--fav-from, #ff6a3d), var(--fav-to, #ff2d78));
  color: #fff !important;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.4;
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 6px 18px rgba(255, 45, 120, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.fav-nav-link:hover {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255, 45, 120, .48), inset 0 1px 0 rgba(255, 255, 255, .4);
  filter: saturate(1.12) brightness(1.04);
}
.fav-nav-ico { display: inline-flex; width: 15px; height: 15px; }
.fav-nav-ico svg { width: 15px; height: 15px; display: block; }

/* ============ ② 悬浮按钮（醒目主按钮） ============ */
.fav-btn {
  position: fixed;
  bottom: var(--fav-bottom, 96px);
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--fav-from, #ff6a3d), var(--fav-to, #ff2d78));
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(255, 45, 120, .45), 0 2px 6px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.fav-btn-left { left: 18px; right: auto; }
.fav-btn-right { right: 18px; left: auto; }
/* 兼容旧类名 */
.fav-btn.fav-left { left: 18px; right: auto; }
.fav-btn.fav-right { right: 18px; left: auto; }
.fav-btn:hover {
  transform: translateY(-2px) scale(1.03);
  filter: saturate(1.12) brightness(1.04);
  box-shadow: 0 16px 38px rgba(255, 45, 120, .55), 0 2px 8px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.fav-btn:active { transform: translateY(0) scale(.98); }
.fav-btn-ico { display: inline-flex; width: 18px; height: 18px; }
.fav-btn-ico svg { width: 18px; height: 18px; display: block; }

/* 脉冲光环：持续吸引注意力 */
.fav-btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  border: 2px solid var(--fav-to, #ff2d78);
  opacity: .55;
  animation: favRing 2.4s ease-out infinite;
  pointer-events: none;
}
.fav-btn.fav-no-pulse::after { display: none; }
@keyframes favRing {
  0%   { transform: scale(1);    opacity: .5; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
/* 轻微呼吸（无位移动画，避免与 hover 冲突） */
.fav-btn.fav-pulse-float { animation: favBreath 3s ease-in-out infinite; }
@keyframes favBreath {
  0%, 100% { box-shadow: 0 12px 30px rgba(255, 45, 120, .45), 0 2px 6px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .35); }
  50%      { box-shadow: 0 16px 40px rgba(255, 45, 120, .62), 0 2px 6px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .35); }
}
@media (prefers-reduced-motion: reduce) {
  .fav-btn::after, .fav-btn.fav-pulse-float { animation: none; }
}

/* ============ ③ 弹层 ============ */
.fav-mask {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, .5);
  opacity: 0;
  transition: opacity .2s ease;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.fav-mask.fav-show { opacity: 1; }
.fav-modal {
  width: 100%;
  max-width: 430px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  transform: translateY(12px) scale(.97);
  transition: transform .22s cubic-bezier(.22, .61, .36, 1);
  box-shadow: 0 28px 70px rgba(15, 23, 42, .32);
}
.fav-mask.fav-show .fav-modal { transform: none; }

.fav-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 20px 16px;
  background: linear-gradient(135deg, var(--fav-from, #ff6a3d), var(--fav-to, #ff2d78));
  color: #fff;
}
.fav-head-icon { display: inline-flex; width: 30px; height: 30px; flex: 0 0 auto; }
.fav-head-icon svg { width: 30px; height: 30px; display: block; }
/* 预留右上角关闭按钮的位置，标题过长时也不会压到 ✕ */
.fav-head-text { flex: 1; min-width: 0; padding-right: 32px; }
.fav-head-text h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: #fff; }
.fav-head-text p { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .88); }
.fav-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}
.fav-close:hover { background: rgba(255, 255, 255, .34); }

/* 大号快捷键卡片 */
.fav-keys {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 14px;
}
.fav-key {
  min-width: 54px;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f1f5f9);
  border: 1px solid #cbd5e1;
  border-bottom-width: 3px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 3px 0 rgba(15, 23, 42, .08);
  animation: favKeyPress 1.8s ease-in-out infinite;
}
.fav-key:nth-child(3) { animation-delay: .25s; }
.fav-plus { color: #94a3b8; font-weight: 700; }
@keyframes favKeyPress {
  0%, 100% { transform: translateY(0); box-shadow: 0 3px 0 rgba(15, 23, 42, .08); }
  50%      { transform: translateY(2px); box-shadow: 0 1px 0 rgba(15, 23, 42, .08); }
}
@media (prefers-reduced-motion: reduce) { .fav-key { animation: none; } }

/* PWA 一键安装 */
.fav-install {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 40px);
  margin: 0 20px 14px;
  padding: 13px 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--fav-from, #ff6a3d), var(--fav-to, #ff2d78));
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(255, 45, 120, .35);
}
.fav-install:hover { filter: brightness(1.05); }

.fav-body { padding: 18px 20px 4px; }
.fav-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  line-height: 1.7;
  color: #334155;
}
.fav-step b { color: #e11d48; }
/* 兜底提示：书签一定在浏览器菜单里 */
.fav-tip {
  margin: 10px 0 2px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 12.5px;
  line-height: 1.6;
}
.fav-tip b { color: #c2410c; }
/* 手动切换浏览器说明 */
.fav-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0 2px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}
.fav-switch-label { font-size: 12px; color: #94a3b8; margin-right: 2px; }
.fav-chip {
  padding: 4px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  transition: all .15s;
}
.fav-chip:hover { border-color: #fda4af; color: #e11d48; background: #fff1f2; }
.fav-chip-on {
  border-color: #e11d48;
  background: #e11d48;
  color: #fff;
  font-weight: 700;
}
.fav-chip-on:hover { background: #e11d48; color: #fff; }
.fav-step-no {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  background: #ffe4e6;
  color: #e11d48;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  line-height: 20px;
}
.fav-url { display: flex; gap: 8px; padding: 12px 20px 0; }
.fav-url input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
}
.fav-url .fav-copy {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 14px;
  border: 1px solid #fecdd3;
  border-radius: 10px;
  background: #fff1f2;
  color: #e11d48;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.fav-url .fav-copy:hover { background: #ffe4e6; }
.fav-foot {
  padding: 12px 20px 18px;
  color: #94a3b8;
  font-size: 12px;
  text-align: center;
}

/* 轻提示 */
.fav-toast {
  position: fixed;
  left: 50%;
  bottom: 120px;
  z-index: 100001;
  transform: translateX(-50%) translateY(10px);
  padding: 11px 20px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .9);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.fav-toast.fav-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ ④ 移动端适配 ============ */
@media (max-width: 480px) {
  .fav-btn { bottom: var(--fav-bottom-mobile, 84px); padding: 12px 16px; font-size: 13px; }
  .fav-btn-ico { width: 16px; height: 16px; }
  .fav-btn-ico svg { width: 16px; height: 16px; }
  .fav-nav-link { padding: 6px 12px !important; font-size: 13px; }
  .fav-key { min-width: 46px; padding: 10px 12px; font-size: 16px; }
}

/* ============ ⑤ 就地展开容器（复用原弹窗样式，但不是弹窗） ============ */
/* 原 .fav-mask 是全屏遮罩 + 居中；这里改成贴在按钮上方的小容器。
   内层仍然是 .fav-modal，所以渐变头部、星标、步骤、键位、切换浏览器全部沿用原样式。 */
.fav-panel {
  position: fixed;
  bottom: calc(var(--fav-bottom, 96px) + 62px);
  z-index: 9999;
  width: 360px;
  max-width: calc(100vw - 28px);
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition: opacity .2s ease, transform .22s cubic-bezier(.22, .61, .36, 1);
  box-sizing: border-box;
}
.fav-panel-right { right: 18px; transform-origin: bottom right; }
.fav-panel-left { left: 18px; transform-origin: bottom left; }
.fav-panel.fav-panel-show { opacity: 1; transform: translateY(0) scale(1); }

/* 内层沿用 .fav-modal，这里只覆盖会撑破小容器的部分 */
.fav-panel .fav-modal-inline {
  width: 100%;
  max-width: none;
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .08);
  border: 1px solid rgba(15, 23, 42, .06);
  max-height: min(72vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: none;
}
/* 紧凑一点，避免在小容器里太占高度 */
.fav-panel .fav-head { padding: 14px 16px 12px; gap: 10px; }
.fav-panel .fav-head-icon { width: 24px; height: 24px; }
.fav-panel .fav-head-icon svg { width: 24px; height: 24px; }
.fav-panel .fav-head-text { padding-right: 26px; }
.fav-panel .fav-head-text h3 { font-size: 15px; margin-bottom: 2px; }
.fav-panel .fav-head-text p { font-size: 11.5px; }
.fav-panel .fav-close { top: 10px; right: 10px; width: 24px; height: 24px; }
.fav-panel .fav-body { padding: 12px 16px 2px; }
.fav-panel .fav-step { padding: 5px 0; font-size: 13px; line-height: 1.6; }
.fav-panel .fav-step-no { width: 18px; height: 18px; line-height: 18px; font-size: 11px; margin-top: 2px; }
.fav-panel .fav-tip { margin: 8px 0 2px; padding: 7px 10px; font-size: 11.5px; }
.fav-panel .fav-switch { margin: 10px 0 2px; padding-top: 8px; gap: 5px; }
.fav-panel .fav-switch-label { font-size: 11.5px; }
.fav-panel .fav-chip { padding: 3px 9px; font-size: 11.5px; }
.fav-panel .fav-keys { margin: 2px 0 6px; }
.fav-panel .fav-key { min-width: 40px; padding: 7px 11px; font-size: 14px; }
.fav-panel .fav-url { padding: 10px 16px 0; }
.fav-panel .fav-foot { padding: 10px 16px 13px; font-size: 11.5px; }
.fav-panel .fav-install { margin: 10px 16px 0; font-size: 12.5px; padding: 9px 12px; }

@media (max-width: 480px) {
  .fav-panel {
    bottom: calc(var(--fav-bottom-mobile, 84px) + 56px);
    width: auto;
    left: 12px;
    right: 12px;
    max-width: none;
  }
  .fav-panel-right, .fav-panel-left { left: 12px; right: 12px; }
  .fav-panel .fav-modal-inline { max-height: 62vh; }
}