/*
  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.
*/

/* ========== Material Design 3 Expressive CSS Tokens ========== */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

/* 基础颜色系统 - 符合Material Design 3 Expressive规范 */
:root {
  /* 主色调 - 更鲜明的表达 */
  --md-primary: #7c3aed; /* 更饱和的紫色 */
  --md-primary-container: #f3e8ff;
  --md-on-primary: #ffffff;
  --md-on-primary-container: #2e1065;
  
  /* 次级色 - 更丰富的对比 */
  --md-secondary: #0ea5e9; /* 明亮的蓝色作为次级色 */
  --md-secondary-container: #dbf4ff;
  --md-on-secondary: #003344;
  --md-on-secondary-container: #001e2b;
  
  /*  tertiary色 - 新增第三色调增强表达 */
  --md-tertiary: #f97316; /* 橙色作为第三色调 */
  --md-tertiary-container: #fff1e0;
  --md-on-tertiary: #ffffff;
  --md-on-tertiary-container: #431400;
  
  /* 中性色 - 更明确的层次 */
  --md-background: #fffbff;
  --md-surface: #fffbff;
  --md-surface-variant: #f3edf7;
  --md-surface-bright: #ffffff;
  --md-surface-dim: #e6e1e6;
  --md-on-background: #1c1b1f;
  --md-on-surface: #1c1b1f;
  --md-on-surface-variant: #4a454e;
  
  /* 功能色 - 更鲜明的提示 */
  --md-error: #dc2626;
  --md-error-container: #fee2e2;
  --md-on-error: #ffffff;
  --md-on-error-container: #410002;
  
  /* 阴影层级 - 增强深度感 */
  --md-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
  --md-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --md-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --md-elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* 圆角规范 - 更圆润的边角 */
  --md-radius-small: 8px;
  --md-radius-medium: 12px;
  --md-radius-large: 24px;
  --md-radius-full: 999px;
  
  /* 排版 - 增强层级感 */
  --md-font: 'Google Sans', sans-serif;
  --md-body-large: 16px/24px;
  --md-body-medium: 14px/20px;
  --md-headline-small: 24px/32px;
  --md-headline-medium: 28px/36px;
  --md-title-large: 20px/28px;
  --md-title-medium: 16px/24px;
  --md-label-medium: 12px/16px;
  
  /* 其他基础变量 */
  --md-outline: 1px solid #d9cdf7;
  --md-nav-height: 56px;
  --md-transition-standard: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --md-transition-emphasized: 300ms cubic-bezier(0.2, 0, 0, 1);
}

/* 深色模式适配 - 增强对比度 */
@media (prefers-color-scheme: dark) {
  :root {
    --md-primary: #c4b5fd;
    --md-primary-container: #4a337e;
    --md-on-primary: #3b1e80;
    --md-on-primary-container: #eaddff;
    
    --md-secondary: #7dd3fc;
    --md-secondary-container: #0369a1;
    --md-on-secondary: #003344;
    --md-on-secondary-container: #dbf4ff;
    
    --md-tertiary: #ffb070;
    --md-tertiary-container: #7c2d12;
    --md-on-tertiary: #7c2d12;
    --md-on-tertiary-container: #fff1e0;
    
    --md-background: #1c1b1f;
    --md-surface: #1c1b1f;
    --md-surface-variant: #38353d;
    --md-surface-bright: #38353d;
    --md-surface-dim: #141414;
    --md-on-background: #e6e1e5;
    --md-on-surface: #e6e1e5;
    --md-on-surface-variant: #cac4cf;
    
    --md-error: #f87171;
    --md-error-container: #7f1d1d;
    --md-on-error: #7f1d1d;
    --md-on-error-container: #fee2e2;
    
    --md-outline: 1px solid #57535e;
  }
}

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--md-background);
  color: var(--md-on-background);
  font-family: var(--md-font);
  font-size: 16px;
  font-size-adjust: 0.54;
  line-height: 24px;
  transition: background-color var(--md-transition-standard),
              color var(--md-transition-standard);
  min-height: 100vh;
  padding-bottom: calc(var(--md-nav-height) + env(safe-area-inset-bottom, 0px) + 16px);
}

/* 头部样式 - 增强视觉焦点 */
header {
  text-align: center;
  padding: 80px 24px 56px;
  position: relative;
  overflow: hidden;
}

header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 240px;
  background: radial-gradient(ellipse at center, var(--md-primary-container) 0%, transparent 70%);
  z-index: -1;
  opacity: 0.6;
}

header h1 {
  font-size: 28px;
  line-height: 36px; /* 匹配--md-headline-medium */
  font-weight: 700;
  color: var(--md-primary);
  margin: 0;
  letter-spacing: 0.5px;
}

.title-row {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.title-row img {
  max-height: 80px;
  width: auto;
  margin: 0;
  box-shadow: var(--md-elevation-2);
  border-radius: var(--md-radius-medium);
  transition: transform var(--md-transition-emphasized);
}

.title-row:hover img {
  transform: scale(1.05) rotate(2deg);
}

/* 章节样式 - 增强内容区层次感 */
section {
  padding: 24px;
  max-width: 840px;
  margin: 0 auto 40px;
  text-align: center;
  background-color: var(--md-surface);
  border-radius: var(--md-radius-large);
  box-shadow: var(--md-elevation-1);
  position: relative;
  overflow: hidden;
}

section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--md-primary), var(--md-secondary));
  border-radius: var(--md-radius-small) var(--md-radius-small) 0 0;
}

section p {
  font: var(--md-body-large);
  color: var(--md-on-surface-variant);
  margin: 8px 0;
}

h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  margin: 32px 0 24px;
  color: var(--md-primary);
  position: relative;
  display: inline-block;
}

h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background-color: var(--md-primary);
  border-radius: 2px;
  transition: width var(--md-transition-standard);
}

h2:hover::after {
  width: 60px;
}

/* 卡片容器 - 增强网格布局 */
.contact-wrapper, .lang-wrapper {
  display: grid;
  gap: 24px;
  margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* 卡片样式 - 增强表现力 */
.contact-card, .lang-wrapper a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background-color: var(--md-surface);
  border-radius: var(--md-radius-large);
  box-shadow: var(--md-elevation-1);
  text-decoration: none;
  color: inherit;
  transition: all var(--md-transition-emphasized);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}

/* 卡片交互效果 - 更丰富的反馈 */
.contact-card:hover, .lang-wrapper a:hover {
  box-shadow: var(--md-elevation-3);
  background-color: var(--md-surface-variant);
  transform: translateY(-4px) scale(1.01);
}

.contact-card:active, .lang-wrapper a:active {
  box-shadow: var(--md-elevation-1);
  transform: translateY(0) scale(0.99);
}

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

/* 图标容器 - 增强视觉识别 */
.icon {
  width: 56px; /* 增大图标容器 */
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--md-radius-full);
  background-color: var(--md-primary-container);
  flex-shrink: 0;
  transition: transform var(--md-transition-standard),
              background-color var(--md-transition-standard);
}

.contact-card:hover .icon, .lang-wrapper a:hover .icon {
  transform: scale(1.15);
  background-color: var(--md-primary);
}

.icon svg {
  width: 28px; /* 增大图标 */
  height: 28px;
}

.icon img {
  width: 28px;
  height: 28px;
}

/* 文本区域 */
.text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.label {
  font: var(--md-label-medium);
  color: var(--md-on-surface-variant);
  letter-spacing: 0.5px;
}

.value {
  font: var(--md-title-large);
  font-weight: 500;
  color: var(--md-on-surface);
}

/* 渐变文本 - 增强表达 */
.paw-pink { background: linear-gradient(135deg, #f472b6, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
.paw-purple { background: linear-gradient(135deg, #a855f7, #7e22ce); -webkit-background-clip: text; background-clip: text; color: transparent; }
.paw-cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 页脚样式 - 增强层次感 */
footer {
  text-align: center;
  padding: 32px 16px;
  margin-top: 64px;
  font-size: 14px;
  color: var(--md-on-surface-variant);
  background-color: var(--md-surface-variant);
  border-radius: var(--md-radius-large) var(--md-radius-large) 0 0;
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--md-primary);
  border-radius: 2px;
}

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

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

/* 复制提示 - 增强反馈 */
.copied-tip {
  position: fixed;
  bottom: calc(var(--md-nav-height) + env(safe-area-inset-bottom, 0px) + 24px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  padding: 12px 24px;
  border-radius: var(--md-radius-full);
  font-size: 14px;
  font-weight: 500;
  background-color: var(--md-surface);
  color: var(--md-on-surface);
  box-shadow: var(--md-elevation-4);
  border: none;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: all var(--md-transition-emphasized);
}

.copied-tip.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1.05);
}

.copied-tip.show.done {
  transform: translateX(-50%) scale(1);
}

/* 遮罩层 */
.overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-transition-standard);
  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%) scale(0.95);
  background-color: var(--md-surface);
  border-radius: var(--md-radius-large);
  box-shadow: var(--md-elevation-4);
  padding: 24px;
  text-align: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: all var(--md-transition-emphasized);
  min-width: 320px;
  max-width: 560px;
  width: calc(100% - 48px);
}

.modal.show, .ios-alert.show, .wechat-qr.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* 按钮样式 - 增强交互 */
.ios-alert button {
  padding: 10px 24px;
  border-radius: var(--md-radius-full);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--md-transition-standard);
  cursor: pointer;
  min-height: 40px;
  margin: 0 8px;
}

.ios-alert button.cancel {
  background-color: transparent;
  color: var(--md-error);
  border: none;
}

.ios-alert button.cancel:hover {
  background-color: rgba(220, 38, 38, 0.1);
  transform: translateY(-2px);
}

.ios-alert button.confirm {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  border: none;
}

.ios-alert button.confirm:hover {
  background-color: var(--md-primary-container);
  color: var(--md-on-primary-container);
  transform: translateY(-2px);
  box-shadow: var(--md-elevation-2);
}

.ios-alert button:active {
  transform: translateY(0);
}

/* 邮件列表 */
.email-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 24px;
}

.email-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--md-radius-medium);
  background-color: var(--md-surface-variant);
  transition: background-color var(--md-transition-standard);
}

.email-item:hover {
  background-color: var(--md-primary-container);
}

.email-item span {
  font-size: 14px;
  font-weight: 500;
  word-break: break-all;
  color: var(--md-on-surface-variant);
}

.email-item button {
  padding: 6px 16px;
  border-radius: var(--md-radius-full);
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--md-transition-standard);
  min-height: 36px;
}

.email-item button:hover {
  background-color: var(--md-primary-container);
  color: var(--md-on-primary-container);
  transform: translateY(-2px);
  box-shadow: var(--md-elevation-1);
}

.email-item button:active {
  transform: translateY(0);
}

/* 底部导航 */
.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  width: min(360px, calc(100vw - 32px));
  padding: 8px;
  border-radius: var(--md-radius-full);
  background-color: var(--md-surface);
  box-shadow: var(--md-elevation-3);
  z-index: 2001;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bottom-nav a {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  border-radius: var(--md-radius-full);
  font-size: 12px;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  transition: all var(--md-transition-standard);
}

.bottom-nav a.active {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--md-elevation-1);
}

.bottom-nav a:hover:not(.active) {
  background-color: var(--md-surface-variant);
  transform: translateY(-2px);
}

.nav-cn {
  font-size: 14px;
  font-weight: 500;
}

.nav-en {
  font-size: 10px;
  opacity: 0.8;
}

@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: 0;
    right: 0;
    bottom: 0;
    max-height: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 5000;
    transition: max-height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* 深色模式适配 */
  @media (prefers-color-scheme: dark) {
    .mobile-more-menu {
      background: rgba(30, 30, 30, 0.95);
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    }
  }

  /* 菜单展开状态 */
  .mobile-more-menu.show {
    max-height: 80vh;
    padding-top: 24px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  }

  /* 移动端菜单项样式 */
  .mobile-more-menu .dropdown-item {
    padding: 16px 24px;
    font-size: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  @media (prefers-color-scheme: dark) {
    .mobile-more-menu .dropdown-item {
      border-bottom-color: rgba(255, 255, 255, 0.05);
    }
  }

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

@media (min-width: 768px) {
  .more-menu-container {
    display: block !important;
    position: relative;
    margin-left: auto; /* 推到右侧 */
    display: flex;
    align-items: center; /* 垂直居中 */
  }

  .more-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease;
    margin: 9px;
  }

  .more-btn:hover {
    background: rgba(0, 0, 0, 0.08);
  }

  .more-btn svg {
    width: 24px;
    height: 24px;
  }

  .more-btn svg circle {
    r: 2;
    fill: var(--md-on-surface);
  }

  .more-btn svg circle:nth-child(1) { cx: 6; cy: 12; }
  .more-btn svg circle:nth-child(2) { cx: 12; cy: 12; }
  .more-btn svg circle:nth-child(3) { cx: 18; cy: 12; }

  /* 向上弹出的菜单 */
  .more-dropdown {
    position: absolute;
    bottom: 100%; /* 定位到按钮上方 */
    right: 0;
    margin-bottom: 8px; /* 与按钮保持距离 */
    min-width: 160px;
    background: var(--md-surface);
    border-radius: var(--md-radius-large);
    box-shadow: var(--md-elevation-4);
    padding: 8px 0;
    transform-origin: bottom right; /* 从右下角向上展开 */
    transform: scale(0.9) translateY(10px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
    z-index: 3000;
  }

  .more-dropdown.show {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .dropdown-item {
    display: block;
    padding: 12px 16px;
    color: var(--md-on-surface);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s ease;
  }

  .dropdown-item:hover {
    background: var(--md-surface-variant);
  }
}

/* 博客正文排版 - 增强层级 */
.md-article {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
  transform: translateY(20px);
  padding: 0 24px;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.md-article .post-meta {
  margin-bottom: 24px;
}

/* 返回按钮 */
.back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background-color: var(--md-surface);
  box-shadow: var(--md-elevation-2);
  cursor: pointer;
  transition: all var(--md-transition-standard);
  margin-bottom: 16px;
}

.back-button svg {
  width: 24px;
  height: 24px;
  stroke: var(--md-primary);
  stroke-width: 2;
  fill: none;
  transition: transform var(--md-transition-standard);
}

.back-button:hover {
  background-color: var(--md-surface-variant);
  transform: translateY(-4px) rotate(-5deg);
  box-shadow: var(--md-elevation-3);
}

.back-button:hover svg {
  transform: scale(1.1);
}

.back-button:active {
  background-color: var(--md-primary-container);
  transform: translateY(0) rotate(0);
  box-shadow: var(--md-elevation-1);
}

.md-article .post-date {
  margin: 8px 0 24px;
  color: var(--md-on-surface-variant);
  font-size: 14px;
}

.md-body {
  font: var(--md-body-large);
}

.md-body h1, .md-body h2, .md-body h3, .md-body h4 {
  margin: 1.5em 0 0.75em;
  color: var(--md-primary);
  font-weight: 500;
  position: relative;
  padding-bottom: 8px;
}

.md-body h1::after, .md-body h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--md-primary);
  border-radius: 2px;
}

.md-body h1 {
  font-size: 32px;
  line-height: 40px;
}

.md-body h2 {
  font-size: 26px;
  line-height: 34px;
}

.md-body h3 {
  font-size: 22px;
  line-height: 30px;
}

.md-body p {
  margin: 1em 0;
  transition: color var(--md-transition-standard);
}

.md-body a {
  color: var(--md-primary);
  text-decoration: none;
  position: relative;
  font-weight: 500;
}

.md-body a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--md-primary);
  transition: all var(--md-transition-standard);
  transform-origin: left;
}

.md-body a:hover::after {
  height: 3px;
  transform: scaleX(1.05);
}

.md-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--md-radius-medium);
  margin: 24px 0;
  box-shadow: var(--md-elevation-2);
  transition: transform var(--md-transition-emphasized),
              box-shadow var(--md-transition-emphasized);
}

.md-body img:hover {
  transform: scale(1.02);
  box-shadow: var(--md-elevation-3);
}

/* 代码样式 - 增强可读性 */
.md-body code {
  padding: 0.2em 0.4em;
  border-radius: var(--md-radius-small);
  background-color: var(--md-surface-variant);
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
}

.md-body pre {
  overflow: auto;
  padding: 16px;
  border-radius: var(--md-radius-medium);
  background-color: var(--md-surface-variant);
  margin: 24px 0;
  box-shadow: inset 0 0 0 1px var(--md-outline);
  transition: box-shadow var(--md-transition-standard);
}

.md-body pre:hover {
  box-shadow: var(--md-elevation-1), inset 0 0 0 1px var(--md-outline);
}

.md-body pre code {
  background: transparent;
  padding: 0;
}

/* 列表样式 */
.md-body ul, .md-body ol {
  padding-left: 24px;
  margin: 1em 0;
}

.md-body li {
  margin: 8px 0;
  position: relative;
  padding-left: 4px;
}

.md-body ul li::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--md-primary);
}

/* 引用样式 - 增强视觉效果 */
.md-body blockquote {
  margin: 24px 0;
  padding: 16px 24px;
  border-left: 4px solid var(--md-primary);
  background-color: var(--md-surface-variant);
  border-radius: 0 var(--md-radius-medium) var(--md-radius-medium) 0;
  opacity: 0.9;
  position: relative;
  transition: transform var(--md-transition-standard),
              box-shadow var(--md-transition-standard);
}

.md-body blockquote:hover {
  transform: translateX(4px);
  box-shadow: var(--md-elevation-1);
}

/* 加载动画 - 增强视觉反馈 */
.loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--md-background);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-transition-standard);
}

.loading-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--md-surface-variant);
  border-top-color: var(--md-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: relative;
}

.spinner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 3px solid transparent;
  border-top-color: var(--md-secondary);
  border-radius: 50%;
  animation: spinReverse 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes spinReverse {
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* 样式切换器 - 增强交互 */
.style-switcher {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-left: 16px;
  padding: 8px 16px;
  border-radius: var(--md-radius-full);
  background-color: var(--md-surface-variant);
  box-shadow: var(--md-elevation-1);
  transition: box-shadow var(--md-transition-standard);
}

.style-switcher:hover {
  box-shadow: var(--md-elevation-2);
}

.style-switcher label {
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--md-on-surface-variant);
  transition: color var(--md-transition-standard);
}

.style-switcher label:hover {
  color: var(--md-primary);
}

.style-switcher input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--md-primary);
  transition: transform var(--md-transition-standard);
}

.style-switcher input[type="radio"]:checked {
  transform: scale(1.2);
}

/* 波纹效果 - 增强交互反馈 */
.contact-card::after, .lang-wrapper a::after, button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.2;
  transition: width var(--md-transition-emphasized),
              height var(--md-transition-emphasized),
              opacity var(--md-transition-emphasized);
  pointer-events: none;
}

.contact-card:active::after, .lang-wrapper a:active::after, button:active::after {
  width: 300px;
  height: 300px;
  opacity: 0;
}

.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(--md-radius-full);
}

.nav-avatar {
  display: none;
}

#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;
}