/*
  Copyright 2025 缎金SatinAu

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
*/

/* ========== Fluent UI CSS Tokens ========== */
:root {
  /* 颜色主色板（Fluent UI） */
  --fluent-color-bg: #f3f2f1;
  --fluent-color-bg-hover: #edebe9;
  --fluent-color-bg-active: #e1dfdd;
  --fluent-color-border: #edebe9;
  --fluent-color-border-active: #0078d4;
  --fluent-color-text: #323130;
  --fluent-color-muted: #605e5c;
  --fluent-color-primary: #0078d4;
  --fluent-color-primary-hover: #005a9e;
  --fluent-color-primary-active: #004578;
  --fluent-color-link: #0078d4;
  --fluent-color-link-hover: #005a9e;
  --fluent-color-shadow: 0 4px 12px rgba(0,0,0,0.12);
  --fluent-color-card-shadow: 0 1.6px 5px rgba(0,0,0,0.07);

  /* 圆角与阴影 */
  --fluent-border-radius-sm: 4px;
  --fluent-border-radius-md: 8px;
  --fluent-border-radius-lg: 16px;

  /* 字体 */
  --fluent-font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fluent-font-size: 15px;
  --fluent-font-size-lg: 2.2rem;
  --fluent-font-size-md: 1.1rem;
  --fluent-font-weight: 400;
  --fluent-font-weight-bold: 600;
  --nav-height: 64px;
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --fluent-color-bg: #1b1a19;
    --fluent-color-bg-hover: #252423;
    --fluent-color-bg-active: #201f1e;
    --fluent-color-border: #252423;
    --fluent-color-border-active: #0a5bc2;
    --fluent-color-text: #f3f2f1;
    --fluent-color-muted: #b3b0ad;
    --fluent-color-primary: #0a5bc2;
    --fluent-color-primary-hover: #1858a8;
    --fluent-color-primary-active: #0a397a;
    --fluent-color-link: #0a5bc2;
    --fluent-color-link-hover: #1858a8;
    --fluent-color-shadow: 0 4px 12px rgba(0,0,0,0.6);
    --fluent-color-card-shadow: 0 1.6px 5px rgba(0,0,0,0.22);
  }
}

/* ========== 全局基础 ========== */
body {
  background: var(--fluent-color-bg);
  color: var(--fluent-color-text);
  font-family: var(--fluent-font-family);
  font-size: var(--fluent-font-size);
  font-size-adjust: 0.54;
  margin: 0;
  padding: 0;
  transition: background 0.4s, color 0.3s;
  min-height: 100vh;
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 24px);
}

main {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

header {
  text-align: center;
  padding: 80px 0 48px;
}
header h1 {
  font-size: var(--fluent-font-size-lg);
  font-weight: var(--fluent-font-weight-bold);
  margin: 0;
  color: var(--fluent-color-primary);
  letter-spacing: 1px;
}

/* 标题和 Logo 一行显示 */
.title-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.title-row h1 {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
}
.title-row img {
  max-height: 90px;
  width: auto;
  margin: 0;
  margin-top: 5px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.15));
}

/* ========== Section 通用 ========== */
section {
  padding: 24px 0;
  text-align: center;
}
section p {
  font-size: var(--fluent-font-size-md);
  color: var(--fluent-color-muted);
  margin: 10px 0;
}
h2 {
  font-size: 1.5rem;
  color: var(--fluent-color-primary);
  font-weight: var(--fluent-font-weight-bold);
  margin: 28px 0 18px;
}

/* ========== 卡片布局 ========== */
.contact-wrapper, .lang-wrapper {
  display: grid;
  gap: 18px;
  margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ========== Fluent Card ========== */
.contact-card, .lang-wrapper a {
  background: var(--fluent-color-bg);
  border: 1px solid var(--fluent-color-border);
  border-radius: var(--fluent-border-radius-lg);
  box-shadow: var(--fluent-color-card-shadow);
  color: var(--fluent-color-text);
  font-family: var(--fluent-font-family);
  font-size: var(--fluent-font-size);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 16px;
  margin: 0;
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
  cursor: pointer;
}
.contact-card:hover, .lang-wrapper a:hover {
  background: var(--fluent-color-bg-hover);
  box-shadow: 0 2.6px 12px rgba(0,0,0,0.12);
  border-color: var(--fluent-color-border-active);
}
.contact-card:active, .lang-wrapper a:active {
  background: var(--fluent-color-bg-active);
}

.content-grid {
  display: grid;
  gap: 18px;
  margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Icon */
.icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fluent-border-radius-md);
  background: var(--fluent-color-bg-hover);
  box-shadow: 0 1.2px 4px rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.icon img, .icon svg { width: 22px; height: 22px; }
.text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.label {
  font-size: 13px;
  color: var(--fluent-color-muted);
}
.value {
  font-size: 16px;
  font-weight: var(--fluent-font-weight-bold);
  color: var(--fluent-color-text);
}

/* 渐变 paw 保留 */
.paw-pink   { background: linear-gradient(135deg, #ff9a9e, #fad0c4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.paw-purple { background: linear-gradient(135deg, #a18cd1, #fbc2eb); -webkit-background-clip:text; background-clip:text; color:transparent; }
.paw-cyan   { background: linear-gradient(135deg, #43e97b, #38f9d7); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ========== Fluent Button ========== */
button, .email-item button, .ios-alert button, .back-button, .actions .cancel {
  background: var(--fluent-color-primary);
  color: #fff;
  border: none;
  border-radius: var(--fluent-border-radius-md);
  font-size: var(--fluent-font-size);
  font-family: var(--fluent-font-family);
  font-weight: var(--fluent-font-weight-bold);
  padding: 8px 18px;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 1.2px 4px rgba(0,0,0,0.10);
}
button:hover, .email-item button:hover, .ios-alert button:hover, .back-button:hover, .actions .cancel:hover {
  background: var(--fluent-color-primary-hover);
}
button:active, .email-item button:active, .ios-alert button:active, .back-button:active, .actions .cancel:active {
  background: var(--fluent-color-primary-active);
}

/* ========== 导航栏（Fluent Nav） ========== */
.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  width: min(340px, calc(100vw - 32px));
  padding: 10px;
  border-radius: var(--fluent-border-radius-lg);
  background: var(--fluent-color-bg);
  border: 1px solid var(--fluent-color-border);
  box-shadow: var(--fluent-color-shadow);
  z-index: 2001;
}
.bottom-nav a {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  border-radius: var(--fluent-border-radius-md);
  font-size: 14px;
  font-weight: var(--fluent-font-weight-bold);
  color: var(--fluent-color-text);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}
.bottom-nav a.active {
  background: var(--fluent-color-primary);
  color: #fff;
}
.bottom-nav a:hover {
  background: var(--fluent-color-primary-hover);
  color: #fff;
}
.bottom-nav .nav-cn {
  font-size: 15px;
  font-weight: var(--fluent-font-weight-bold);
}
.bottom-nav .nav-en {
  font-size: 12px;
  opacity: 0.7;
}

@media (min-width: 768px) {
  .bottom-nav {
    /* 基础样式保持 */
    bottom: auto;
    top: 0;
    left: 0;
    transform: none;
    flex-direction: column;
    width: 80px; /* 固定宽度，确保导航栏范围明确 */
    height: 100vh;
    padding: 16px 4px; /* 左右内边距减小为4px，避免按钮超出 */
    padding-top: 40px; /* 顶部预留空间，避免选项被头像遮挡 */
    margin-top: 30px; /* 整体向下移动，给头像留出位置 */
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--fluent-color-border);
    box-shadow: none;
    background: var(--fluent-color-bg);
    box-sizing: border-box; /* 确保padding不影响整体宽度 */
  }

  /* 导航项样式 - 限制宽度并居中 */
  .bottom-nav a {
    flex: none;
    width: calc(100% - 8px); /* 宽度=导航栏宽度-左右margin，避免超出 */
    max-width: 80px; /* 限制最大宽度，防止过宽 */
    height: 36px;
    padding: 12px 0;
    margin: 0 4px; /* 左右各4px，确保在导航栏内居中 */
    border-radius: 8px; /* 圆角矩形 */
    font-size: 12px;
    justify-content: center;
    align-items: center; /* 内容水平居中 */
    position: relative;
  }

  /* 蓝色提示竖线调整 - 缩短并添加圆角 */
  .bottom-nav a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 30%; /* 距离顶部30% */
    height: 40%; /* 总高度40% */
    width: 4px;
    background: var(--fluent-color-primary);
    border-radius: 4px; /* 上下圆角 */
  }

  /* 保持中英文两行显示 */
  .bottom-nav .nav-cn {
    font-size: 13px;
    margin-bottom: 2px;
  }
  
  .bottom-nav .nav-en {
    font-size: 11px;
  }

  /* 当前页面样式保持 */
  .bottom-nav a.active {
    background: var(--fluent-color-bg-hover);
    color: var(--fluent-color-primary);
  }

  /* 悬停效果 */
  .bottom-nav a:hover:not(.active) {
    background: var(--fluent-color-bg-hover);
    color: var(--fluent-color-text);
  }

  /* 显示头像并调整位置至导航栏所有选项上方 */
  .nav-avatar {
    display: block;
    position: absolute; /* 相对于导航栏定位 */
    top: -20px; /* 向上超出导航栏，位于选项上方 */
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    margin: 0; /* 清除原有边距 */
    z-index: 2002; /* 确保在导航栏上方显示 */
  }

  /* 确保头像圆形显示 */
  .nav-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* 保持圆形 */
    border: 3px solid var(--fluent-color-bg); /* 边框与导航栏背景一致，增强分离感 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 增加阴影提升层次感 */
  }

  /* 确保主容器居中 */
  main {
    margin-left: 80px; /* 避开左侧导航栏 */
    max-width: calc(100% - 80px); /* 最大宽度为屏幕减去导航栏宽度 */
    padding: 0;
    margin-right: auto;
    margin-left: 80px;
    width: 100%;
    box-sizing: border-box;
  }

  /* 统一所有section居中 */
  section {
    max-width: 1140px; /* 与主内容最大宽度一致 */
    margin: 0 auto; /* 水平居中 */
    padding: 30px 24px; /* 统一内边距 */
    box-sizing: border-box;
  }

  /* Markdown文章容器居中 */
  .md-article {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* 调整段落和内容块的居中 */
  .md-body,
  section p,
  .contact-wrapper,
  .lang-wrapper {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* 图片等媒体元素居中 */
  .md-body img,
  section img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* 底部区域居中 */
  footer {
    max-width: calc(100% - 180px);
    margin-left: 80px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* 移动端底部导航当前页面标记样式调整 */
@media (max-width: 767px) {
  .bottom-nav a {
    position: relative; /* 为伪元素提供定位基准 */
    padding-bottom: 14px; /* 预留底部横条空间 */
  }

  /* 当前页面标记：灰色背景 + 底部蓝色横条 */
  .bottom-nav a.active {
    background: var(--fluent-color-bg-hover); /* 灰色背景 */
    color: var(--fluent-color-text); /* 文字颜色恢复默认 */
    border-radius: 8px; /* 保持圆角 */
  }

  /* 底部蓝色横条 */
  .bottom-nav a.active::after {
    content: '';
    position: absolute;
    bottom: 4px; /* 距离底部的距离 */
    left: 50%;
    transform: translateX(-50%);
    width: 24px; /* 横条宽度 */
    height: 4px; /* 横条高度 */
    background: var(--fluent-color-primary); /* 蓝色 */
    border-radius: 4px; /* 横条圆角 */
  }

  .nav-avatar {
    display: none;
  }

  /* 深色模式适配 */
  @media (prefers-color-scheme: dark) {
    .bottom-nav a.active {
      background: rgba(255, 255, 255, 0.18); /* 深色模式下的灰色背景 */
    }
  }
}

@media (max-width: 767px) {
  .bottom-nav {
    padding-top: 24px; /* 为提示线预留空间 */
  }
  
  /* 手势提示线样式 */
  .bottom-nav::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.2);
  }
  
  /* 深色模式适配 */
  @media (prefers-color-scheme: dark) {
    .bottom-nav::before {
      background: rgba(255, 255, 255, 0.2);
    }
  }

  /* 移动端专用更多菜单 */
  .mobile-more-menu {
    position: fixed;
    left: 50%;
    bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
    transform: translateX(-50%) translateY(20px) scale(0.95);
    width: min(90vw, 320px);
    max-height: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 22px;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.25), inset 0 0 30px rgba(255, 255, 255, 0.12);
    z-index: 5000;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* 确保内容不会在动画时被裁剪 */
    padding: 0;
  }

  /* 深色模式适配 */
  @media (prefers-color-scheme: dark) {
    .mobile-more-menu {
      background: rgba(30, 30, 30, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(255, 255, 255, 0.12);
    }
  }

  /* 菜单展开状态 - 流畅的弹出动画 */
  .mobile-more-menu.show {
    max-height: 80vh;
    padding: 16px 0;
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    /* 添加轻微的弹性效果 */
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1.2);
  }

  /* 移动端菜单项样式 - 添加入场动画 */
  .mobile-more-menu .dropdown-item {
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    /* 初始状态为透明并向下偏移 */
    opacity: 0;
    transform: translateY(10px);
  }

  .mobile-more-menu .dropdown-item:last-child {
    border-bottom: none;
  }

  /* 菜单项悬停效果 */
  .mobile-more-menu .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px) scale(1.02);
  }

  /* 菜单项动画 - 错开显示 */
  .mobile-more-menu.show .dropdown-item {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* 为每个菜单项设置不同的延迟，形成流畅的序列动画 */
  .mobile-more-menu.show .dropdown-item:nth-child(1) {
    transition-delay: 0.1s;
  }
  .mobile-more-menu.show .dropdown-item:nth-child(2) {
    transition-delay: 0.2s;
  }
  .mobile-more-menu.show .dropdown-item:nth-child(3) {
    transition-delay: 0.3s;
  }
  .mobile-more-menu.show .dropdown-item:nth-child(4) {
    transition-delay: 0.4s;
  }

  /* 深色模式菜单项 */
  @media (prefers-color-scheme: dark) {
    .mobile-more-menu .dropdown-item {
      color: #f0f0f0;
      border-bottom-color: rgba(255, 255, 255, 0.05);
    }
    
    .mobile-more-menu .dropdown-item:hover {
      background: rgba(255, 255, 255, 0.18);
    }
  }

  /* 添加背景遮罩，增强悬浮感 */
  .mobile-more-menu::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .mobile-more-menu.show::before {
    opacity: 1;
  }

  /* 确保原有三个点按钮在移动端保持隐藏 */
  .more-menu-container {
    display: none !important;
  }
}

/* 更多菜单项目显示在主导航下方 */
@media (min-width: 768px) {
  /* 调整导航栏布局为垂直排列并增加高度以容纳更多项目 */
  .bottom-nav {
    flex-direction: column;
    align-items: stretch;
    padding-top: 40px; /* 为头像预留空间 */
    padding-bottom: 20px;
    height: auto; /* 自动适应内容高度 */
    min-height: 100vh; /* 保持全屏高度 */
  }

  /* 隐藏原更多按钮 */
  .more-btn {
    display: none;
  }

  /* 显示更多菜单项目并整合到导航栏 */
  .more-dropdown {
    position: static; /* 取消绝对定位 */
    min-width: auto;
    margin-top: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* 添加分割线（在更多菜单项目上方） */
  .more-dropdown::before {
    content: '';
    display: block;
    height: 1px;
    background: var(--fluent-color-border);
    margin: 8px 4px;
  }

  /* 调整菜单项样式以匹配主导航 */
  .dropdown-item {
    padding: 12px 0;
    text-align: center;
    border-radius: 8px;
    margin: 0 4px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 保持深色模式一致性 */
  @media (prefers-color-scheme: dark) {
    .more-dropdown {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }
  }
}

/* ========== 弹窗与模态框 ========== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(60, 60, 60, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 9998;
}
.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.modal, .ios-alert, .wechat-qr {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--fluent-color-bg);
  border: 1px solid var(--fluent-color-border);
  border-radius: var(--fluent-border-radius-lg);
  box-shadow: var(--fluent-color-shadow);
  padding: 24px;
  text-align: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}
.modal.show, .ios-alert.show, .wechat-qr.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.ios-alert {
  width: 320px;
}
.ios-alert p {
  margin-bottom: 16px;
  color: var(--fluent-color-text);
  font-size: var(--fluent-font-size);
  font-weight: var(--fluent-font-weight-bold);
}
.ios-alert .actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.ios-alert button.cancel {
  background: #fff;
  color: #d13438;
  border: 1px solid var(--fluent-color-border);
}
.ios-alert button.confirm {
  background: var(--fluent-color-primary);
  color: #fff;
}
.ios-alert button:hover {
  filter: brightness(0.98);
}

.email-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0 18px;
}
.email-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--fluent-border-radius-md);
  background: var(--fluent-color-bg-hover);
  border: 1px solid var(--fluent-color-border);
}
.email-item span {
  font-size: 14px;
  font-weight: var(--fluent-font-weight-bold);
  word-break: break-all;
}
.email-item button {
  min-width: 60px;
  padding: 7px 16px;
  border-radius: var(--fluent-border-radius-md);
}

.actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.actions .cancel {
  background: #fff;
  color: #d13438;
  border: 1px solid var(--fluent-color-border);
}

.wechat-qr img {
  width: 240px;
  height: 240px;
  border-radius: var(--fluent-border-radius-md);
  border: 1px solid var(--fluent-color-border);
}
.wechat-qr p {
  margin-top: 14px;
  font-size: var(--fluent-font-size);
  font-weight: var(--fluent-font-weight-bold);
  color: var(--fluent-color-text);
}

/* ========== Copied Tip ========== */
.copied-tip {
  position: fixed;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 32px);
  left: 50%;
  transform: translateX(-50%) scale(0.98);
  padding: 12px 20px;
  border-radius: var(--fluent-border-radius-md);
  font-size: var(--fluent-font-size);
  font-weight: var(--fluent-font-weight-bold);
  background: var(--fluent-color-bg-hover);
  color: var(--fluent-color-text);
  box-shadow: var(--fluent-color-card-shadow);
  border: 1px solid var(--fluent-color-border);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.4s, transform 0.3s;
}
.copied-tip.show {
  opacity: 1;
  transform: translateX(-50%) scale(1.04);
}

/* ========== Footer ========== */
footer {
  text-align: center;
  padding: 32px 10px 20px;
  margin-top: 48px;
  font-size: 13px;
  color: var(--fluent-color-muted);
  background: var(--fluent-color-bg-hover);
  border-radius: var(--fluent-border-radius-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

footer a {
  color: #888; /* 灰色文字 */
  text-decoration: none; /* 去除下划线 */
  margin: 0 2px; /* 链接两侧间距 */
  position: relative;
}

/* 链接悬停效果优化 */
footer a:hover {
  color: #666; /* 略深灰色增强交互感 */
  text-decoration: none; /* 确保hover时也无下划线 */
}

/* ========== Markdown 样式 ========== */
.md-article {
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.md-article .post-meta { margin-bottom: 18px; }

.back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--fluent-color-border);
  background: var(--fluent-color-bg-hover);
  box-shadow: var(--fluent-color-card-shadow);
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 10px;
}
.back-button svg {
  width: 20px;
  height: 20px;
  stroke: var(--fluent-color-primary);
  stroke-width: 2.2;
  fill: none;
}
.back-button:hover {
  background: var(--fluent-color-bg-active);
}
.back-button:active {
  background: var(--fluent-color-bg);
}

.md-article .post-date {
  margin: 6px 0 16px;
  color: var(--fluent-color-muted);
  font-size: 0.97rem;
}

.md-body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--fluent-color-text);
}
.md-body h1, .md-body h2, .md-body h3, .md-body h4 {
  margin: 1.2em 0 0.6em;
  font-weight: var(--fluent-font-weight-bold);
  color: var(--fluent-color-primary);
}
.md-body h1 { font-size: 2rem; }
.md-body h2 { font-size: 1.6rem; }
.md-body h3 { font-size: 1.3rem; }
.md-body p { margin: 0.8em 0; }
.md-body a {
  color: var(--fluent-color-link);
  text-decoration: none;
  border-bottom: 1px dotted var(--fluent-color-link);
  transition: color 0.2s;
}
.md-body a:hover {
  color: var(--fluent-color-link-hover);
  text-decoration: underline;
}
.md-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--fluent-border-radius-md);
}
.md-body code {
  padding: 0.2em 0.4em;
  border-radius: var(--fluent-border-radius-sm);
  background: var(--fluent-color-bg-hover);
  font-family: "Consolas", "Menlo", "Monaco", monospace;
}
.md-body pre {
  overflow: auto;
  padding: 14px;
  border-radius: var(--fluent-border-radius-md);
  background: var(--fluent-color-bg-hover);
}
.md-body pre code {
  background: transparent;
  padding: 0;
}
.md-body ul, .md-body ol {
  padding-left: 1.4em;
  margin: 0.6em 0;
}
.md-body blockquote {
  margin: 1em 0;
  padding: 0.6em 1em;
  border-left: 3px solid var(--fluent-color-border-active);
  background: var(--fluent-color-bg-hover);
  border-radius: var(--fluent-border-radius-md);
  opacity: 0.93;
}

/* ===== 博客加载动画 ===== */
.loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fluent-color-bg-hover);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.loading-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--fluent-color-bg-active);
  border-top-color: var(--fluent-color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.style-switcher {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: 12px;
  padding: 6px 10px;
  border-radius: var(--fluent-border-radius-sm);
  background: var(--fluent-color-bg-hover);
}

.style-switcher label {
  cursor: pointer;
  font-size: var(--fluent-font-size);
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--fluent-color-text);
}

.style-switcher input[type="radio"] {
  width: 14px;
  height: 14px;
  accent-color: var(--fluent-color-primary);
}

.post-actions {
  margin: 40px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.post-actions .back-button {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 0 16px;
  border-radius: var(--fluent-border-radius-md);
}

#downloadArticle {
  margin-left: auto;
}

/* 样式提示工具 */
.style-switcher label {
  position: relative;
}

.style-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  padding: 6px 12px;
  border-radius: var(--md-radius-small, 8px);
  background-color: var(--md-surface, #fff);
  color: var(--md-on-surface, #333);
  font-size: 12px;
  white-space: nowrap;
  box-shadow: var(--md-elevation-2, 0 4px 6px rgba(0,0,0,0.1));
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  margin-bottom: 8px;
  z-index: 10;
}

/* 小三角指示器 */
.style-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: var(--md-surface, #fff) transparent transparent transparent;
}

.style-switcher label:hover .style-tooltip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* 图片画廊样式 */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 20px;
  padding: 10px;
}

.image-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.image-gallery img:hover {
  transform: scale(1.03);
}

.loading-indicator {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
  color: #666;
}

.image-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
  color: #ff4444;
}