/* 固定背景设置 - 静态背景图片 */
body {
  background: transparent !important; /* 移除静态背景，避免底部露出 */
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}

/* 确保背景图片路径正确 */
html {
  background: transparent !important; /* 移除静态背景 */
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


.panel-cover {
  background: transparent !important;
  overflow: visible !important; /* 让页面自然滚动，避免内部滚动造成错位 */
  min-height: 100vh !important;
  position: relative !important; /* relative，背景层附着在面板 */
  width: 100% !important;
  z-index: 900 !important;
}

/* 版权跟随内容出现在页面最底部 */
.remark { position: static !important; text-align: center !important; margin: 16px auto 8px auto !important; }
.remark .power { margin: 0 !important; opacity: 0.9 !important; }

/* 基础收敛：防止图片溢出容器，保持比例 */
img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 头像标识尺寸约束 */
.profile-logo {
  width: 140px !important;
  max-width: 40vw !important;
  height: auto !important;
  margin: 0 auto 12px auto !important;
  object-fit: contain !important;
}

/* 底部操作区布局与约束 */
.actions-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* 左右各占一半 */
  align-items: stretch !important;
  gap: 16px !important;
  padding: 12px 16px !important;
}

.action-left { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 22px !important; }
.action-right { display: flex !important; align-items: center !important; justify-content: center !important; }

.action-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.action-left .action-button { min-width: 220px !important; justify-content: center !important; font-size: 16px !important; padding: 12px 18px !important; }
.btn-logo { width: 18px !important; height: 18px !important; object-fit: contain !important; opacity: .95 !important; }

.divider { display: none !important; }

/* 社交列表为弹性网格，避免挤压溢出 */
.social-container { width: 100% !important; max-width: 400px !important; overflow: hidden !important; height: 300px !important; }
/* 与上方强玻璃区块拉开距离 */
.bottom-wrapper { margin-top: 56px !important; }
/* 与上方强玻璃区块拉开距离 */
.bottom-wrapper { margin-top: 48px !important; }

.contact-scroll { display: block !important; overflow-y: auto !important; height: 100% !important; padding-right: 6px !important; }
.contact-scroll::-webkit-scrollbar { width: 6px; }
.contact-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 6px; }
.contact-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; align-content: start !important; }
.contact-tile { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 10px !important; border-radius: 12px !important; min-height: 96px !important; aspect-ratio: 1 / 1 !important; background: transparent !important; border: 1px solid rgba(255,255,255,0.35) !important; }
.contact-tile .social-icon { width: 36px !important; height: 36px !important; margin-bottom: 6px !important; }
.contact-tile .social-name { font-size: 12px !important; margin-bottom: 2px !important; }
.contact-tile .social-account { font-size: 11px !important; opacity: 0.8 !important; }

.social-item { display: grid !important; grid-template-columns: 40px 1fr !important; column-gap: 10px !important; align-items: center !important; padding: 10px !important; border-radius: 12px !important; margin-bottom: 10px !important; }

.social-icon { width: 32px !important; height: 32px !important; object-fit: contain !important; }

.social-name { font-weight: 600 !important; line-height: 1.2 !important; }

.social-account {
  color: #f5f5f5 !important;
  opacity: 0.8 !important;
  line-height: 1.2 !important;
  word-break: break-all !important;
  font-size: 12px !important;
}

/* 文本排版兜底：避免过长行导致挤压 */
.panel-cover__title,
.panel-cover__subtitle,
.panel-cover__description {
  max-width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 768px) {
  .actions-container { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; align-items: center !important; }
  .action-left { gap: 24px !important; }
  .action-left .action-button { min-width: 160px !important; font-size: 15px !important; padding: 10px 14px !important; }
  .social-container { height: 240px !important; max-width: 280px !important; }
  .divider { display: none !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .action-left { align-items: center !important; }
}

@media (max-width: 520px) {
  /* 继续保持左右结构，但更紧凑 */
  .actions-container { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .action-left .action-button { min-width: 140px !important; font-size: 14px !important; padding: 9px 12px !important; }
  .social-container { height: 220px !important; max-width: 260px !important; }
}

@media (max-width: 360px) {
  /* 极窄屏最后兜底才改为上下结构 */
  .actions-container { display: block !important; }
}
/* 强制覆盖vno.css的背景设置 */
#panel.panel-cover {
  background: transparent !important;
  background-image: none !important;
}

/* 毛玻璃效果增强 */
.glass-card {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
}

/* 导航栏毛玻璃效果 */
.navbar {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 确保文字在背景上清晰可见 */
.panel-cover__title,
.panel-cover__subtitle,
.panel-cover__description {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* 社交媒体图标容器毛玻璃效果 */
.social-container {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px !important;
  padding: 1rem !important;
}

/* 按钮毛玻璃效果 */
.action-button {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.action-button:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .glass-card {
    background: rgba(255, 255, 255, 0.2) !important;
  }
  
  .social-container {
    background: rgba(255, 255, 255, 0.15) !important;
  }
}

/* 通用液态玻璃别名 */
.glass-effect {
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  border-radius: 16px !important;
}

.glass-strong { background: rgba(255,255,255,0.28) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; }
.glass-light  { background: rgba(255,255,255,0.12) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; }

/* 头像圆形遮罩强化 */
.profile-section { display: flex !important; justify-content: center !important; }
.profile-logo { border-radius: 50% !important; overflow: hidden !important; box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important; }

/* 背景切换按钮样式 */
#bg-switch-btn {
  position: fixed !important;
  right: 16px !important;
  top: 16px !important;
  z-index: 1000 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
  cursor: pointer !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
#bg-switch-btn:hover { background: rgba(255,255,255,0.28) !important; }