/* ========== 全局重置 ========== */
/* 去除所有元素的默认内外边距，设置盒模型为border-box，去除轮廓线（可通过其他方式处理焦点样式） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

/* ========== 链接全局样式 ========== */
/* 去除移动端点击高亮，去除默认下划线 */
a {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  text-decoration: none;
}

/* ========== 页面主体 ========== */
/* 设置默认字体、行高、文字颜色，背景色为浅紫灰色，最小高度占满视口，flex布局垂直居中，水平滚动隐藏 */
body {
  font-family: 'Segoe UI', 'Arial', sans-serif;
  line-height: 1.6;
  color: #4a4a4a;
  background: #faf6f9;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  overflow-x: hidden;
}

/* ========== 主内容卡片 ========== */
/* 限制最大宽度800px，宽度90%，白色背景，圆角24px，柔和阴影，内边距，相对定位用于内部绝对定位元素（如颜色切换按钮） */
.main-content {
  max-width: 800px;
  width: 90%;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 10px 36px rgba(165, 148, 181, 0.08);
  padding: 30px 20px;
  margin: auto;
  overflow: hidden;
  position: relative;
}

/* ========== 个人资料区域 ========== */
/* 文字居中，上下内边距 */
.profile-section {
  text-align: center;
  padding: 20px 0 30px;
}

/* 头像样式：尺寸120px，圆形，覆盖方式，自动水平外边距，阴影，边框，悬浮放大效果 */
.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 15px;
  box-shadow: 0 8px 20px rgba(123, 97, 255, 0.12);
  border: 3px solid #f0ebf5;
  transition: transform 0.3s ease;
}
.avatar:hover {
  transform: scale(1.03);
}

/* 地理位置：颜色浅紫灰，flex居中对齐，间距 */
.location {
  color: #8a7ea9;
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* 名字：较大字号，粗体，渐变文字（紫-粉），透明填充实现渐变效果 */
.name {
  font-size: 26px;
  font-weight: 600;
  background: linear-gradient(to right, #7b61ff, #b268d3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 15px;
}

/* 个性签名：灰色文字，限制最大宽度，自动外边距，断词 */
.bio {
  color: #6b6b6b;
  font-size: 15px;
  padding: 0 20px;
  max-width: 600px;
  margin: 0 auto;
  word-break: break-word;
}

/* ========== 导航链接区域 ========== */
/* flex布局，水平居中，间隙15px，禁止换行，横向滚动（移动端），隐藏滚动条 */
.nav-links {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: nowrap;
  margin: 15px 0 25px;
  white-space: nowrap;
  overflow-x: auto;
  padding: 0 10px;
  scrollbar-width: none; /* Firefox隐藏滚动条 */
}
/* 隐藏WebKit浏览器滚动条 */
.nav-links::-webkit-scrollbar {
  display: none;
}
/* 导航链接按钮样式：固定宽度80px，圆角，背景浅紫，文字紫色，边框，文字居中 */
.nav-links a {
  padding: 8px 0;
  width: 80px;
  border-radius: 12px;
  background: #f5f1f8;
  color: #7b61ff;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 1px solid #ede7f3;
  text-align: center;
}
.nav-links a:hover {
  background: #ede7f3;
  color: #6a50e0;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(123, 97, 255, 0.1);
}
.nav-links a:active {
  transform: scale(0.96);
  background: #e3d9f0;
  color: #5b44c0;
}
/* 移动端适配：缩小间隙和按钮尺寸 */
@media (max-width: 767px) {
  .nav-links {
    gap: 8px;
  }
  .nav-links a {
    padding: 6px 0;
    width: 70px;
    font-size: 12px;
  }
}

/* ========== 页脚 ========== */
.footer {
  text-align: center;
  padding: 12px 0;
  color: #a098b0;
  font-size: 11px;
  margin-top: auto; /* 将页脚推至底部 */
  width: 100%;
  z-index: 1;
}
/* ICP信息容器：flex水平居中，间隙6px，换行，左右边距 */
.icp-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 10px;
}
/* 移动端隐藏ICP信息（可选） */
@media (max-width: 767px) {
  .icp-info {
    display: none;
  }
}
/* ICP链接样式：flex垂直居中，浅灰文字，小圆角，悬浮变色 */
.icp-info a {
  display: flex;
  align-items: center;
  color: #8a7ea9;
  gap: 3px;
  transition: color 0.2s;
  padding: 2px 4px;
  border-radius: 4px;
}
.icp-info a:hover {
  color: #7b61ff;
  background: #f5f1f8;
}

/* ========== 模态框（弹窗）基础样式 ========== */
/* 默认隐藏，固定定位全屏，半透明背景，flex居中，过渡效果 */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(240, 235, 245, 0.92);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
/* 显示状态：flex显示，完全不透明可见 */
.modal.show {
  display: flex;
  opacity: 1;
  visibility: visible;
}
/* 模态框内容卡片：白色背景，圆角，阴影，最大高度限制，溢出隐藏，初始微下移，显示时归位 */
.modal-content {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(123, 97, 255, 0.15);
  width: 90%;
  max-width: 600px;
  max-height: 60vh;
  overflow: hidden;
  border: 1px solid #f0ebf5;
  transform: translateY(10px);
  transition: transform 0.2s ease;
  margin: 0 auto;
}
.modal.show .modal-content {
  transform: translateY(0);
}
/* 移动端模态框内容适配：更宽，更高占比 */
@media (max-width: 767px) {
  .modal-content {
    width: 98%;
    max-width: 98%;
    max-height: 80vh;
  }
}
/* 模态框头部：内边距，下边框，flex两端对齐，吸顶，背景色 */
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f0ebf5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #faf6f9;
  position: sticky;
  top: 0;
  z-index: 1;
}
.modal-header h2 {
  font-size: 18px;
  color: #6a50e0;
  font-weight: 600;
}
/* 关闭按钮：大字号，灰色，圆形背景，悬浮效果 */
.close-btn {
  font-size: 22px;
  color: #a098b0;
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.close-btn:hover {
  color: #6a50e0;
  background: #f5f1f8;
}

/* ========== 友情链接弹窗内容 ========== */
/* 链接容器：内边距，网格布局（自动填充，最小120px），间隙12px，背景色，滚动条自定义 */
.links-container {
  padding: 20px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  background: #faf6f9;
  max-height: calc(60vh - 60px);
  scrollbar-width: thin;
  scrollbar-color: #d1c8e1 #faf6f9;
}
.links-container::-webkit-scrollbar {
  width: 6px;
}
.links-container::-webkit-scrollbar-thumb {
  background-color: #d1c8e1;
  border-radius: 3px;
}
/* 单个链接按钮：白色背景，圆角，文字淡紫，居中，边框，悬浮效果 */
.link-btn {
  padding: 10px;
  border-radius: 10px;
  background: #ffffff;
  color: #8294e3;
  font-size: 13px;
  text-align: center;
  transition: all 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  border: 1px solid #f0ebf5;
  word-break: keep-all;
}
.link-btn:hover {
  background: #f5f1f8;
  color: #6d80d6;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(123, 145, 227, 0.1);
}
.link-btn:active {
  box-shadow: inset 0 2px 6px rgba(123, 145, 227, 0.1);
  transform: scale(0.98);
  background: #ede7f3;
}

/* ========== 介绍卡片（Blog/小红书/音乐弹窗内容） ========== */
/* flex垂直居中，内边距，溢出滚动 */
.intro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px 20px;
  text-align: center;
  min-height: auto;
  max-height: calc(60vh - 60px);
  overflow-y: auto;
  background: #faf6f9;
}
/* 卡片内图标：圆形，阴影，边框，悬浮放大 */
.intro-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(123, 97, 255, 0.1);
  background: #ffffff;
  border: 1px solid #ede7f3;
  transition: transform 0.3s ease;
}
.intro-img:hover {
  transform: scale(1.05);
}
/* 卡片标题：渐变文字（紫-灰） */
.intro-title {
  font-size: 22px;
  font-weight: 600;
  color: #4a4a4a;
  margin-bottom: 10px;
  background: linear-gradient(to right, #7b61ff, #8a7ea9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* 卡片描述：灰色文字，限制宽度 */
.intro-desc {
  font-size: 15px;
  color: #6b6b6b;
  margin-bottom: 25px;
  line-height: 1.6;
  max-width: 300px;
  word-break: break-word;
  padding: 0 10px;
}
/* 进入按钮：渐变背景，白色文字，圆角，阴影，悬浮上移 */
.enter-btn {
  padding: 11px 30px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7b61ff, #8f76e8);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.25s ease;
  border: none;
  cursor: pointer;
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(123, 97, 255, 0.15);
  text-align: center;
  min-width: 140px;
}
.enter-btn:hover {
  background: linear-gradient(135deg, #6a50e0, #7d67d0);
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(123, 97, 255, 0.25);
}
.enter-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(123, 97, 255, 0.2);
  background: linear-gradient(135deg, #5b44c0, #6b57b0);
}
.enter-btn:focus-visible {
  outline: 2px solid #7b61ff;
  outline-offset: 2px;
}

/* ========== 颜色主题切换按钮 ========== */
/* 容器：绝对定位左上角，flex水平，间隙6px */
.color-switch {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1002;
  display: flex;
  gap: 6px;
  transition: display 0.2s ease;
}
/* 单个颜色按钮：圆形，轻微阴影，悬浮放大 */
.color-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  border: 1px solid #ffffff;
}
.color-btn:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border-color: #ffffff;
}
/* 四种主题色的具体颜色定义 */
.color1 {
  background: #99CC99;
  border-color: #ffffff;
}
.color2 {
  background: #6699CC;
  border-color: #ffffff;
}
.color3 {
  background: #0A1128;
  border-color: #ffffff;
}
.color4 {
  background: #CC9933;
  border-color: #ffffff;
}
/* 当前激活的主题按钮特殊样式：边框加粗，额外阴影 */
body.color1 .color1, body.color2 .color2, body.color3 .color3, body.color4 .color4 {
  border-width: 1.5px;
  border-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ========== 音乐控制按钮 ========== */
/* 绝对定位右上角，圆形，阴影，悬浮旋转，隐藏过渡 */
.music-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 999;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  -webkit-tap-highlight-color: transparent;
  border: none;
  object-fit: cover;
}
/* 当模态框显示时，隐藏音乐按钮（通过兄弟选择器） */
.main-content .modal.show ~ .music-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.music-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}
/* 播放时的旋转动画 */
.music-btn.playing {
  animation: rotate 3s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* 隐藏音频元素 */
audio {
  display: none;
}

/* ========== 全局过渡效果（用于主题切换时平滑变化） ========== */
/* 为多个主要元素添加过渡，实现主题色切换的淡变效果 */
body, .main-content, .avatar, .location, .bio, .nav-links a, .footer, .icp-info a, .modal, .modal-content, .modal-header, .modal-header h2, .close-btn, .links-container, .link-btn, .intro-card, .intro-img, .intro-desc, .enter-btn, .links-container::-webkit-scrollbar-thumb {
  transition: all 0.5s ease;
}

/* ========== 主题 color2（蓝色系） ========== */
body.color2 {
  background: #6699CC;
  color: #475569;
}
body.color2 .main-content {
  box-shadow: 0 10px 36px rgba(186, 230, 253, 0.2);
}
body.color2 .avatar {
  box-shadow: 0 8px 20px rgba(147, 197, 253, 0.15);
  border-color: #EFF6FF;
}
body.color2 .location {
  color: #64748B;
}
body.color2 .bio, body.color2 .intro-desc {
  color: #475569;
}
body.color2 .nav-links a {
  background: #EFF6FF;
  color: #1E40AF;
  border-color: #DBEAFE;
}
body.color2 .nav-links a:hover {
  background: #DBEAFE;
  color: #0F172A;
  box-shadow: 0 4px 8px rgba(147, 197, 253, 0.12);
}
body.color2 .nav-links a:active {
  background: #BFDBFE;
  color: #0F172A;
}
body.color2 .footer {
  color: #94A3B8;
}
body.color2 .icp-info a {
  color: #94A3B8;
}
body.color2 .icp-info a:hover {
  color: #60A5FA;
  background: #EFF6FF;
}
body.color2 .modal {
  background: rgba(248, 251, 255, 0.95);
}
body.color2 .modal-content {
  box-shadow: 0 12px 40px rgba(147, 197, 253, 0.2);
  border-color: #DBEAFE;
}
body.color2 .modal-header {
  background: #EFF6FF;
  border-color: #DBEAFE;
}
body.color2 .modal-header h2 {
  color: #1E40AF;
}
body.color2 .close-btn {
  color: #64748B;
}
body.color2 .close-btn:hover {
  color: #60A5FA;
  background: #DBEAFE;
}
body.color2 .links-container {
  background: #F9FBFF;
  scrollbar-color: #94A3B8 #EFF6FF;
}
body.color2 .links-container::-webkit-scrollbar-thumb {
  background-color: #94A3B8;
}
body.color2 .link-btn {
  color: #1E40AF;
  border-color: #DBEAFE;
}
body.color2 .link-btn:hover {
  background: #EFF6FF;
  color: #0F172A;
  box-shadow: 0 5px 12px rgba(147, 197, 253, 0.1);
}
body.color2 .link-btn:active {
  background: #DBEAFE;
  box-shadow: inset 0 2px 6px rgba(147, 197, 253, 0.12);
}
body.color2 .intro-img {
  box-shadow: 0 4px 8px rgba(147, 197, 253, 0.15);
  border-color: #DBEAFE;
}
body.color2 .enter-btn {
  background: linear-gradient(135deg, #60A5FA, #93C5FD);
  box-shadow: 0 3px 8px rgba(147, 197, 253, 0.2);
}
body.color2 .enter-btn:hover {
  background: linear-gradient(135deg, #3B82F6, #60A5FA);
  box-shadow: 0 5px 12px rgba(147, 197, 253, 0.28);
}
body.color2 .enter-btn:active {
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  box-shadow: 0 2px 6px rgba(147, 197, 253, 0.22);
}
body.color2 .enter-btn:focus-visible {
  outline: 2px solid #60A5FA;
}

/* ========== 主题 color3（深蓝/黑色系） ========== */
body.color3 {
  background: #0A1128;
  color: #E2E8F0;
}
body.color3 .main-content {
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 10px 36px rgba(0, 15, 45, 0.3);
}
body.color3 .avatar {
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.2);
  border-color: #1E3A8A;
}
body.color3 .location {
  color: #94A3B8;
}
body.color3 .bio, body.color3 .intro-desc {
  color: #E2E8F0;
}
body.color3 .nav-links a {
  background: #1E3A8A;
  color: #BFDBFE;
  border-color: #3B82F6;
}
body.color3 .nav-links a:hover {
  background: #3B82F6;
  color: #FFFFFF;
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
}
body.color3 .nav-links a:active {
  background: #2563EB;
  color: #FFFFFF;
}
body.color3 .footer {
  color: #94A3B8;
}
body.color3 .icp-info a {
  color: #94A3B8;
}
body.color3 .icp-info a:hover {
  color: #60A5FA;
  background: #1E3A8A;
}
body.color3 .modal {
  background: rgba(10, 17, 40, 0.95);
}
body.color3 .modal-content {
  background: #1E293B;
  box-shadow: 0 12px 40px rgba(59, 130, 246, 0.25);
  border-color: #3B82F6;
}
body.color3 .modal-header {
  background: #1E3A8A;
  border-color: #3B82F6;
}
body.color3 .modal-header h2 {
  color: #BFDBFE;
}
body.color3 .close-btn {
  color: #94A3B8;
}
body.color3 .close-btn:hover {
  color: #60A5FA;
  background: #3B82F6;
}
body.color3 .links-container {
  background: #1E3A8A;
  scrollbar-color: #475569 #1E3A8A;
}
body.color3 .links-container::-webkit-scrollbar-thumb {
  background-color: #475569;
}
body.color3 .link-btn {
  background: #1E3A8A;
  color: #BFDBFE;
  border-color: #3B82F6;
}
body.color3 .link-btn:hover {
  background: #3B82F6;
  color: #FFFFFF;
  box-shadow: 0 5px 12px rgba(59, 130, 246, 0.15);
}
body.color3 .link-btn:active {
  background: #2563EB;
  box-shadow: inset 0 2px 6px rgba(59, 130, 246, 0.2);
}
body.color3 .intro-card {
  background: #1E3A8A;
}
body.color3 .intro-img {
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
  border-color: #3B82F6;
}
body.color3 .enter-btn {
  background: linear-gradient(135deg, #3B82F6, #60A5FA);
  box-shadow: 0 3px 8px rgba(59, 130, 246, 0.25);
}
body.color3 .enter-btn:hover {
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  box-shadow: 0 5px 12px rgba(59, 130, 246, 0.35);
}
body.color3 .enter-btn:active {
  background: linear-gradient(135deg, #1D4ED8, #2563EB);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}
body.color3 .enter-btn:focus-visible {
  outline: 2px solid #60A5FA;
}

/* ========== 主题 color4（大地色系） ========== */
body.color4 {
  background: #CC9933;
  color: #333333;
}
body.color4 .main-content {
  box-shadow: 0 10px 36px rgba(200, 200, 200, 0.15);
}
body.color4 .avatar {
  box-shadow: 0 8px 20px rgba(150, 150, 150, 0.12);
  border-color: #EAEAEA;
}
body.color4 .location {
  color: #666666;
}
body.color4 .bio, body.color4 .intro-desc {
  color: #333333;
}
body.color4 .nav-links a {
  background: #EAEAEA;
  color: #666666;
  border-color: #DDDDDD;
}
body.color4 .nav-links a:hover {
  background: #DDDDDD;
  color: #333333;
  box-shadow: 0 4px 8px rgba(150, 150, 150, 0.1);
}
body.color4 .nav-links a:active {
  background: #CCCCCC;
  color: #333333;
}
body.color4 .footer {
  color: #888888;
}
body.color4 .icp-info a {
  color: #888888;
}
body.color4 .icp-info a:hover {
  color: #666666;
  background: #EAEAEA;
}
body.color4 .modal {
  background: rgba(245, 245, 245, 0.95);
}
body.color4 .modal-content {
  box-shadow: 0 12px 40px rgba(150, 150, 150, 0.18);
  border-color: #DDDDDD;
}
body.color4 .modal-header {
  background: #EAEAEA;
  border-color: #DDDDDD;
}
body.color4 .modal-header h2 {
  color: #666666;
}
body.color4 .close-btn {
  color: #888888;
}
body.color4 .close-btn:hover {
  color: #666666;
  background: #DDDDDD;
}
body.color4 .links-container {
  background: #F8F8F8;
  scrollbar-color: #888888 #EAEAEA;
}
body.color4 .links-container::-webkit-scrollbar-thumb {
  background-color: #888888;
}
body.color4 .link-btn {
  color: #666666;
  border-color: #DDDDDD;
}
body.color4 .link-btn:hover {
  background: #EAEAEA;
  color: #333333;
  box-shadow: 0 5px 12px rgba(150, 150, 150, 0.08);
}
body.color4 .link-btn:active {
  background: #DDDDDD;
  box-shadow: inset 0 2px 6px rgba(150, 150, 150, 0.1);
}
body.color4 .intro-img {
  box-shadow: 0 4px 8px rgba(150, 150, 150, 0.12);
  border-color: #DDDDDD;
}
body.color4 .enter-btn {
  background: linear-gradient(135deg, #666666, #999999);
  box-shadow: 0 3px 8px rgba(150, 150, 150, 0.15);
}
body.color4 .enter-btn:hover {
  background: linear-gradient(135deg, #555555, #666666);
  box-shadow: 0 5px 12px rgba(150, 150, 150, 0.2);
}
body.color4 .enter-btn:active {
  background: linear-gradient(135deg, #444444, #555555);
  box-shadow: 0 2px 6px rgba(150, 150, 150, 0.18);
}
body.color4 .enter-btn:focus-visible {
  outline: 2px solid #666666;
}

/* ========== 新增规则（原内联样式迁移） ========== */
/* 头像容器：用于包裹头像和V标，实现相对定位 */
.avatar-wrapper {
  position: relative;
  display: inline-block;
}
/* V认证徽章：绝对定位在头像右下角，圆形白边 */
.v-badge {
  position: absolute;
  bottom: 20px;
  right: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  z-index: 10;
}
/* 渐变文字通用类：蓝紫渐变（用于姓名或其他需要渐变的地方） */
.gradient-text {
  background: linear-gradient(to right, blue, purple);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 页脚内容居中容器 */
.footer-content {
  text-align: center;
}
/* ICP备案图标尺寸及右侧间距 */
.icp-icon {
  width: 16px;
  margin-right: 2px;
}
/* 赞助链接红色文字 */
.sponsor-link {
    color: red !important;
}