/* VGO 通用样式 v1.0 */
/* 骨架屏 */
.vgo-skeleton { background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%); background-size: 200% 100%; animation: vgo-skel 1.4s ease-in-out infinite; border-radius: 8px; }
@keyframes vgo-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.vgo-skel-card { background:#fff; border-radius:14px; border:1px solid rgba(15,23,42,.08); padding:14px; display:flex; flex-direction:column; gap:10px; }
.vgo-skel-line { height:14px; }
.vgo-skel-line.short { width: 60%; }
.vgo-skel-line.mid { width: 80%; }
.vgo-skel-img { height: 120px; }

/* 统一底部导航 */
.vgo-dock { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(15,23,42,.08); padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center; z-index:200;
  box-shadow:0 -4px 16px rgba(0,0,0,.05); }
.vgo-dock-btn { display:flex; flex-direction:column; align-items:center; gap:2px; background:transparent;
  border:none; color:#94A3B8; cursor:pointer; min-height:48px; justify-content:center; font-family:inherit; font-size:10px; font-weight:600; text-decoration:none; }
.vgo-dock-btn.active { color:#2563EB; }
.vgo-dock-btn .ico { font-size:19px; line-height:1; }
.vgo-dock-btn .badge { position:absolute; top:2px; right:calc(50% - 18px); background:#DC2626; color:#fff;
  font-size:9px; font-weight:800; padding:1px 5px; border-radius:9999px; }

/* 全局 toast */
.vgo-toast { position:fixed; top:calc(env(safe-area-inset-top,0px) + 20px); left:50%;
  transform:translateX(-50%) translateY(-12px); background:rgba(15,23,42,.94); color:#fff;
  padding:11px 20px; border-radius:9999px; font-size:13px; font-weight:600;
  opacity:0; pointer-events:none; transition:.22s; z-index:9999; max-width:90%; text-align:center; }
.vgo-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.vgo-toast.ok { background:#059669; }
.vgo-toast.err { background:#DC2626; }

/* 页面底部留出 dock 空间 */
.vgo-with-dock { padding-bottom: 80px !important; }

/* ===== 中心按钮：专业设计 + 4 层动效 ===== */
.vgo-dock-btn.center {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: none;
  box-shadow: 0 6px 16px rgba(37,99,235,.45), 0 0 0 0 rgba(37,99,235,.5);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  animation: centerBreath 2.6s ease-in-out infinite;
  overflow: visible;
  z-index: 1;
}

/* 涟漪环（两道错峰） */
.vgo-dock-btn.center::before,
.vgo-dock-btn.center::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(59,130,246,.5);
  pointer-events: none;
  animation: centerRing 2.6s ease-out infinite;
}
.vgo-dock-btn.center::after {
  border-color: rgba(59,130,246,.28);
  animation-delay: 1.3s;
}

/* 图标（SVG） */
.vgo-dock-btn.center svg {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 2;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}

/* 按下：缩放 + 旋转 */
.vgo-dock-btn.center:active {
  transform: scale(0.88);
}
.vgo-dock-btn.center:active svg {
  transform: rotate(90deg);
}

/* 呼吸光晕 */
@keyframes centerBreath {
  0%, 100% {
    box-shadow: 0 6px 16px rgba(37,99,235,.45), 0 0 0 0 rgba(37,99,235,.5);
  }
  50% {
    box-shadow: 0 8px 22px rgba(37,99,235,.65), 0 0 0 4px rgba(37,99,235,.12);
  }
}

/* 涟漪扩散 */
@keyframes centerRing {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* 无障碍：prefers-reduced-motion 用户自动关闭动画 */
@media (prefers-reduced-motion: reduce) {
  .vgo-dock-btn.center,
  .vgo-dock-btn.center::before,
  .vgo-dock-btn.center::after {
    animation: none !important;
  }
  .vgo-dock-btn.center svg {
    transition: none !important;
  }
}


/* ===== 触感兜底：视觉抖动（不支持 vibrate 时）===== */
@keyframes vgoShake {
  0%   { transform: translateX(0) rotate(0); }
  20%  { transform: translateX(-2px) rotate(-0.5deg); }
  40%  { transform: translateX(3px) rotate(0.5deg); }
  60%  { transform: translateX(-2px) rotate(-0.3deg); }
  80%  { transform: translateX(2px) rotate(0.2deg); }
  100% { transform: translateX(0) rotate(0); }
}
.vgo-shake {
  animation: vgoShake .22s cubic-bezier(.36,.07,.19,.97) both;
}

@media (prefers-reduced-motion: reduce) {
  .vgo-shake { animation: none !important; }
}