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

@import url('https://cdn-cf.satinau.cn/fonts/cf.css');
@import url('https://font.sec.miui.com/font/css?family=MiSans:200,300,400,450,500,600,650,700:Chinese_Simplify,Latin&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200..900&display=swap');

/* ========== 全局基础 ========== */
:root{
  --nav-height: 68px; /* 底栏高度，用于预留滚动空间 */
  --primary-color: light-dark(#007aff, #0a84ff); /* 主色调 */
  --word-color: light-dark(#111, #f5f5f5); /* 文字颜色 */
  --filter-blur:blur(22px) saturate(180%); /* 背景模糊 */
  --border-radius-sm: 10px;
  --border-radius-md: 14px;
  --border-radius-lg: 20px;
  --border-radius-xl: 22px;
  --custom-cursor: url('/public/cursor.Daeq1_K3.cur') 12 4, auto;
  --font-sans: "Google Sans Flex", MiSans, sans-serif; /* 默认无衬线 */
  --font-serif: "Noto Serif SC", serif; /* 衬线体 */
  --global-font: var(--font-sans); /* 当前应用字体 */
}

/* 强制明亮模式 */
:root[data-theme="light"] {
  color-scheme: light;
}

/* 强制深色模式 */
:root[data-theme="dark"] {
  color-scheme: dark;
}

/* 默认隐藏深色 Logo，显示浅色 Logo */
.logo-dark { display: none; }
.logo-light { display: block; }

/* 当系统为深色，或手动设置为深色时 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: block; }
}

:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }

/* ========== 全局字体设置 ========== */
* {
  font-family: var(--global-font);
}

html, body {
  /* 使用 clip 代替 hidden，既能防止横向抖动，又不破坏粘性动画 */
  overflow-x: clip; 
  /* 确保宽度正确 */
  width: 100%;
  position: relative;
}

/* ========== 全局滚动条美化 ========== */

/* Webkit 核心浏览器 (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;  /* 调整为斜纹样式中的宽度 */
  height: 12px; /* 调整横向滚动条高度 */
}

::-webkit-scrollbar-thumb {
  /* 斜纹拼色样式 */
  background-color: var(--primary-color);
  background-image: -webkit-linear-gradient(
    45deg, 
    rgba(255, 255, 255, .4) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, .4) 50%, 
    rgba(255, 255, 255, .4) 75%, 
    transparent 75%, 
    transparent
  );
  border-radius: 2em; /* 胶囊圆角 */
  
  /* 保持原有边框和背景裁剪 */
  border: 2px solid light-dark(#f7f9fe, #212121); /* 边框颜色与轨道匹配 */
  background-clip: content-box; /* 让背景色仅填充在内盒，不覆盖边框区域 */
  
  transition: background-color 0.3s ease, border-width 0.2s ease;
}

/* 鼠标悬停在滚动条上时 */
::-webkit-scrollbar-thumb:hover {
  display: block !important;
  
  /* 边框变窄，视觉上滑块变粗 */
  border-width: 1px;
}

/* 正在拖拽滚动条时 */
::-webkit-scrollbar-thumb:active {
  background-color: var(--primary-color);
  border-width: 1px;
  background-color: color-mix(in srgb, var(--primary-color), black 20%);
  background-image: -webkit-linear-gradient(
    45deg, 
    rgba(255, 255, 255, .2) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, 
    transparent 75%, 
    transparent
  );
}

/* 横竖滚动条交接处 */
::-webkit-scrollbar-corner {
  background: light-dark(#f7f9fe, #212121);
}

/* 减少动效偏好设置 */
@media (prefers-reduced-motion: reduce) {
  ::-webkit-scrollbar-thumb {
    transition: none;
  }
}

/* ========== 全局文字选中美化 ========== */
::selection {
  background: var(--primary-color);
  color: #ffffff; /* 选中文字强制反白，提高对比度 */
  -webkit-text-fill-color: #ffffff;
  text-shadow: none; /* 去除可能存在的阴影，保持干净 */
}

/* 针对 Firefox 的兼容写法 */
::-moz-selection {
  background: var(--primary-color);
  color: #ffffff;
  text-shadow: none;
}

/* 替换手型光标 */
a,
button,
.more-btn,
.nav-avatar,
.dropdown-item,
.image-gallery img,
.contact-card,
.lang-wrapper a {
  cursor: var(--custom-cursor) !important;
}

body {
  margin: 0;
  padding: 0;
  color: var(--word-color);
  opacity: 0;
  transition: opacity 0.8s ease;
  box-sizing: border-box;
  background: transparent !important; /* 透明背景，让色块直接作为底层 */
}

/* 流光色块基础样式 */
.color-bg {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px); /* 边缘模糊扩散，过渡自然 */
  opacity: 0.32; /* 浅色模式色块透明度 */
  z-index: -1; /* 置于最底层，不遮挡原有内容 */
  transition: none;
}

/* 4个色块的颜色与位置 */
.color-bg-1 {
  width: 400px; height: 400px;
  background: #00FFCC;
  top: 60%; left: 40%;
  animation: color1Move 20s ease-in-out infinite alternate;
}
.color-bg-2 {
  width: 400px; height: 400px;
  background: #FFE92C;
  top: 0%; left: 20%;
  animation: color2Move 20s ease-in-out infinite alternate;
}
.color-bg-3 {
  width: 400px; height: 400px;
  background: #5E447B;
  top: 60%; left: 20%;
  animation: color3Move 20s ease-in-out infinite alternate;
}
.color-bg-4 {
  width: 400px; height: 400px;
  background: #FF9999;
  top: 0%; left: 40%;
  animation: color4Move 20s ease-in-out infinite alternate;
}

/* 色块运动关键帧 */
@keyframes color1Move {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-63%, 0%); }
  50% { transform: translate(-63%, -83%); }
  75% { transform: translate(0%, -83%); }
  100% { transform: translate(0, 0); }
}
@keyframes color2Move {
  0% { transform: translate(0, 0); }
  25% { transform: translate(63%, 0%); }
  50% { transform: translate(63%, 83%); }
  75% { transform: translate(0%, 83%); }
  100% { transform: translate(0, 0); }
}
@keyframes color3Move {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0%, -83%); }
  50% { transform: translate(63%, -83%); }
  75% { transform: translate(63%, 0%); }
  100% { transform: translate(0, 0); }
}
@keyframes color4Move {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0%, 83%); }
  50% { transform: translate(-63%, 83%); }
  75% { transform: translate(-63%, 0%); }
  100% { transform: translate(0, 0); }
}

/* ===================== iOS-like parallel page transitions (3 pages) ===================== */
.page { transform: translateZ(0); }

/* Exit current page */
@keyframes slideOutToLeft {
  from { transform: translateX(0); opacity: 1; filter: blur(0); }
  to   { transform: translateX(-22px); opacity: 0.01; filter: blur(6px); }
}
@keyframes slideOutToRight {
  from { transform: translateX(0); opacity: 1; filter: blur(0); }
  to   { transform: translateX(22px); opacity: 0.01; filter: blur(6px); }
}

/* Enter new page */
@keyframes slideInFromRight {
  from { transform: translateX(22px); opacity: 0.01; filter: blur(6px); }
  to   { transform: translateX(0); opacity: 1; filter: blur(0); }
}
@keyframes slideInFromLeft {
  from { transform: translateX(-22px); opacity: 0.01; filter: blur(6px); }
  to   { transform: translateX(0); opacity: 1; filter: blur(0); }
}

/* Classes used by JS */
.page.slide-out-left  { animation: slideOutToLeft 420ms cubic-bezier(0.22,0.61,0.36,1) both; }
.page.slide-out-right { animation: slideOutToRight 420ms cubic-bezier(0.22,0.61,0.36,1) both; }
.page.slide-in-right  { animation: slideInFromRight 420ms cubic-bezier(0.22,0.61,0.36,1) both; }
.page.slide-in-left   { animation: slideInFromLeft 420ms cubic-bezier(0.22,0.61,0.36,1) both; }

/* Disable fancy motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page.slide-out-left,
  .page.slide-out-right,
  .page.slide-in-right,
  .page.slide-in-left {
    animation: none !important;
    transition: opacity 240ms ease;
  }
}

/* ========== Header ========== */
header {
  text-align: center;
  padding: 100px 20px 60px;
  animation: blurScaleIn 1.2s ease-out forwards;
  opacity: 0;
}

body#index-page header {
  animation: blurScaleIn 2s ease-out forwards;
}

@keyframes blurScaleIn {
  from {
    opacity: 0;
    filter: blur(10px); /* 初始模糊 */
    transform: scale(0.8); /* 初始缩小 */
  }
  to {
    opacity: 1;
    filter: blur(0); /* 结束时清晰 */
    transform: scale(1); /* 结束时原大小 */
  }
}

.title-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 30px;

  img {
    max-height: 100px;
    width: auto;
  }
}

/* ========== 首屏全屏居中容器 ========== */
.intro-screen {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center;     /* 水平居中 */
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 300px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.intro-screen header {
  padding: 0; 
  margin: 0;
  margin-bottom: min(60px, 10vh); 
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}

.intro-screen section {
  margin: 0; 
  padding: 0 30px;
  flex: 0 0 auto;
}

/* ========== Section 通用 ========== */
section {
  padding: 30px;
  max-width: 960px;
  margin: auto;
  text-align: center;
  
  p { 
    font-size: 1.1rem; 
    line-height: 1.6; 
    margin: 8px 0; 
  }

  p, pre, .setting-item, .image-gallery {
    opacity: 0; 
    animation: blurFadeUp 1.2s ease forwards;
    animation-delay: 0.3s;
  }
}

/* 为文字设置递增延迟，在标题动画后依次出现 */
body#index-page section p {
  font-family: MiSans, sans-serif;
  font-weight: 500;
  &:nth-of-type(1) { animation-delay: 2s; }     /* 标题动画结束后立即 */
  &:nth-of-type(2) { animation-delay: 2.3s; }   /* 延迟0.3s */
  &:nth-of-type(3) { animation-delay: 2.6s; }   /* 延迟0.6s */
  &:nth-of-type(4) { animation-delay: 2.9s; }   /* 延迟0.9s */
}

@keyframes blurFadeUp {
  from {
    opacity: 0;
    filter: blur(8px); /* 初始模糊 */
    transform: translateY(30px); /* 初始位置靠下 */
  }
  to {
    opacity: 1;
    filter: blur(0); /* 结束时清晰 */
    transform: translateY(0); /* 结束时原位置 */
  }
}

h1 {
  margin: 0;
  font-size: 2.4rem;
}

h2 { 
  font-size: clamp(1.4rem, 4vw, 1.6rem); /* 字号将在 1.4rem 和 1.6rem 之间平滑缩放 */ 
  margin: 20px 0 30px; 
  opacity: 0; /* 初始隐藏 */

  &.visible {
    animation: blurFadeUp 1.2s ease forwards;
  }
}

@media (max-width: 768px) {
  header {
    padding: 120px 20px 70px;
  }
  
  .title-row img {
    max-height: 80px;
  }
}

h1, h2 { text-wrap: balance; }

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

/* 卡片液态玻璃效果 */
.contact-card {
  display: flex; align-items: center; gap: 14px; padding: 20px 18px;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  border: 1px solid light-dark(rgba(255, 255, 255, 0.25), rgba(255,255,255,0.12));
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12), inset 0 0 20px rgba(255,255,255,0.08);
  text-decoration: none;
  color: inherit;
  opacity: 0; transform: translateY(40px) translateX(-20px) scale(0.96);
  position: relative;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.5s ease;
  will-change: transform, box-shadow;
  isolation: isolate;
}

/* ========== 卡片进场动画逻辑 ========== */

/* 通用规则：任何页面只要卡片进入视野并获得 visible 类，就播放淡入动画 */
.contact-card.visible {
  animation: staggerFade 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 特例：仅在博客列表处于“已恢复”状态时，强制禁止动画并直接显示 */
/* 利用更高的优先级覆盖上面的通用规则 */
.contact-wrapper.list-restored .contact-card {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
  /* 保留 transition 以允许鼠标 Hover 效果 */
}

/* 3. 动画过程中的绝对静止 */
.contact-wrapper.disable-animation .contact-card {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
  filter: none !important;
}

@keyframes staggerFade {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
    filter: blur(8px); /* 初始轻微模糊 */
  }
  60% {
    opacity: 0.8;
    transform: translateY(-2px) scale(1.015); /* 轻微上冲 */
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 光泽扫过效果 */
.contact-card {
  &::after {
    content: "";
    position: absolute;
    top: 0; left: -150%;
    width: 150%; height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.05) 100%);
    transform: skewX(-20deg);
    transition: all 0.8s ease;
    opacity: 0;
  }
  
  &:hover::after {
    left: -20%;
    opacity: 1;
  }
  
  &:hover {
    box-shadow: 0 32px 70px rgba(0,0,0,0.2);
    background: light-dark(rgba(255,255,255,0.45), rgba(255,255,255,0.2));
    -webkit-backdrop-filter: blur(28px) saturate(220%);
    backdrop-filter: blur(28px) saturate(220%);
  }
  
  &:active { transform: scale(0.98) !important; }
}

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

.card-cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%; /* 图片占据卡片右侧 60% 的区域 */
  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* 层级控制：在背景之上，但在文字之下 */
  z-index: 0; 
  
  /* 视觉调整：降低不透明度，防止图片太花干扰文字阅读 */
  opacity: 0.5; 
  
  /* 从左(透明)到右(黑/可见)，实现图片边缘柔和消失 */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 80%);
  mask-image: linear-gradient(to right, transparent 0%, black 80%);
  
  /* 鼠标穿透，确保点击事件能传给卡片 */
  pointer-events: none;
  
  /* 悬停动画 */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

/* 文字层：提升层级，确保压在图片上面 */
.contact-card .text {
  position: relative;
  z-index: 1; /* 比 .card-cover 高 */
}

/* 交互：悬停时图片微动且变亮 */
.contact-card:hover .card-cover {
  transform: scale(1.05);
  opacity: 0.7; /* 悬停时稍微清晰一点 */
}

.card-cover {
  /* 深色模式适配 */
  @media (prefers-color-scheme: dark) {
    opacity: 0.4; /* 深色模式下图片稍微暗一点 */
  }
  
  /* 移动端适配 */
  @media (max-width: 768px) {
    width: 55%; /* 移动端稍微收窄图片区域 */
    opacity: 0.4;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 90%);
    mask-image: linear-gradient(to right, transparent 0%, black 90%);
  }
}

/* Icon */
.icon { 
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-sm);
  background: linear-gradient(135deg, #e8f0fe, #f5f5f5);
  box-shadow: inset 0 0 0 1px light-dark(rgba(255,255,255,0.4), rgba(255,255,255,0.1));
  flex-shrink: 0;
  transition: transform 0.4s ease, background 0.5s ease;
  scrollbar-gutter: stable both-edges;
  svg{width:22px;height:22px;}
  img{width:30px;height:30px;border-radius:6px;}
}

/* 针对强制深色模式的特殊处理 */
:root[data-theme="dark"] .contact-card .icon {
  background: linear-gradient(135deg, #333, #444);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}

/* 确保强制明亮模式时恢复 */
:root[data-theme="light"] .contact-card .icon {
  background: linear-gradient(135deg, #e8f0fe, #f5f5f5);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

.text{display:flex;flex-direction:column;text-align:left;}
.label{font-size:12px;color:light-dark(#666, #aaa);}
.value{font-size:15px;font-weight:600;color:var(--word-color);}

/* 渐变 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; }

@media (prefers-color-scheme: dark) {
  .contact-card {
    .icon {
      background: linear-gradient(135deg, #333, #444); /* 深色图标背景 */
    }
    
    &::after {
      background: linear-gradient(120deg, rgba(255,255,255,0.03) 0%, 
                                        rgba(255,255,255,0.2) 50%, 
                                        rgba(255,255,255,0.03) 100%);
    }
  }
}

@media (max-width: 768px) {
  body#index-page section:nth-of-type(2) {
    .contact-wrapper {
      grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
      gap: 12px;
      margin-top: 20px;
    }
    
    .contact-card {
      flex-direction: column;
      justify-content: center;
      padding: 16px 8px;
      min-width: auto;
      max-width: none;
    
      .text {
        display: none; /* 隐藏文本内容 */
      }
      
      .icon {
        background: none;
        backdrop-filter: none;
        box-shadow: none;
        width: 40px;
        height: 40px;
      
        img,
        svg {
          width: 32px;
          height: 32px;
        }
      }
      
      /* 调整交互效果适配小卡片 */
      &:active { transform: scale(0.95) !important; }

      &:hover {
        transform: translateY(-6px) scale(1.05);
      }
    }
  }

  /* 泽凌页面 - 设定总览卡片移动端定制 */
  body#zelynn-page .lang-wrapper {
    /* 强制一行显示三个，不换行 */
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  body#zelynn-page .lang-wrapper .contact-card {
    padding: 16px 4px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-height: auto;
  }

  /* 隐藏图标 */
  body#zelynn-page .lang-wrapper .contact-card .icon {
    display: none;
  }

  /* 隐藏 "语言/Language" 标签 */
  body#zelynn-page .lang-wrapper .contact-card .label {
    display: none;
  }

  /* 调整文本容器居中 */
  body#zelynn-page .lang-wrapper .contact-card .text {
    align-items: center;
    width: 100%;
  }

  /* 保持主要文字大小 */
  body#zelynn-page .lang-wrapper .contact-card .value {
    font-size: 15px;
    font-weight: 600;
  }
}

/* ========== Footer ========== */
footer{
  text-align:center;
  padding:20px;
  margin-top:60px;
  font-size:13px;
  color:light-dark(#888, #bbb);
  background:light-dark(rgba(255,255,255,0.6), rgba(255,255,255,0.1));
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);

  a {
    color: light-dark(#aaa, #888);
    text-decoration: none; /* 去除下划线 */
    margin: 0 8px; /* 链接两侧间距 */
    position: relative;

    /* 链接悬停效果优化 */
    &:hover {
      color: light-dark(#666, #ccc);
      text-decoration: none; /* 确保hover时也无下划线 */
    }
  }

  /* 竖线分隔符（通过相邻兄弟选择器实现，不影响第一个链接） */
  a + a::before {
    content: "|";
    color: light-dark(#ddd, #666); /* 浅灰色竖线 */
    position: absolute;
    left: -12px; /* 调整竖线位置 */
  }
}

/* ========== iOS 风格提示 & 弹窗 ========== */
.toast {
  position: fixed;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 30px);
  left: 50%;
  transform: translateX(-50%) translateY(20px) scale(0.95);
  padding: 12px 20px;
  border-radius: var(--border-radius-md);
  font-size: 15px;
  font-weight: 500;
  background: light-dark(rgba(255,255,255,0.5), rgba(30,30,30,0.5));
  color: var(--word-color);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 8px 28px rgba(0,0,0,0.2), inset 0 0 20px rgba(255,255,255,0.15);
  border: 1px solid light-dark(rgba(255,255,255,0.35),rgba(255,255,255,0.12));
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.4s ease, transform 0.4s ease;

  &.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); 
    &.done { transform: translateX(-50%) translateY(0) scale(1); }
  }
}

/* 通用遮罩 */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 9997;

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

/* 通用模态框 */
.modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: light-dark(rgba(255,255,255,0.3), rgba(255,255,255,0.1));
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25), inset 0 0 30px rgba(255,255,255,0.12);
  padding: 20px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.22, 1.4, 0.36, 1);
  z-index: 9998;
  color: var(--word-color);
  
  &.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
  }
}

/* iOS 弹窗（复用 .modal） */
.ios-alert {
  width: 300px;
  overflow: hidden;
  p { margin: 0 0 14px; font-size: 15px; font-weight: 500; color: var(--word-color); }

  /* iOS 弹窗按钮：竖直堆叠 + 胶囊形状 */
  .actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    border-top: none;
  }

  button {
    padding: 12px 0;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: var(--border-radius-md);
    background: light-dark(rgba(255,255,255,0.6), rgba(40,40,40,0.6));
    color: var(--primary-color);
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease, background 0.3s ease;
    &.cancel { color: light-dark(#ff3b30, #ff453a); }
    &.confirm { color: var(--primary-color); }
    &:hover { background: light-dark(rgba(255,255,255,0.75), rgba(60,60,60,0.75)); }
    &:active { transform: scale(0.96); filter: brightness(0.9); }
  }
}

body#index-page {
  /* 邮箱选择弹窗内部样式 */
  .email-list {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 10px 0 16px;
  }
  
  .email-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--border-radius-md);
    background: light-dark(rgba(255,255,255,0.35), rgba(30,30,30,0.45));
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);

    span { font-size: 14px; font-weight: 500; word-break: break-all; }
    button {
      min-width: 60px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border: none;
      border-radius: 999px;
      background: rgba(0,122,255,0.85);
      color: #f5f5f5;
      cursor: pointer;
      transition: all 0.3s ease;
      flex-shrink: 0;
      -webkit-backdrop-filter: blur(10px) saturate(180%);
      backdrop-filter: blur(10px) saturate(180%);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15), inset 0 0 8px rgba(255,255,255,0.15);

      &:hover {
        background: rgba(0,122,255,1);
        box-shadow: 0 6px 16px rgba(0,0,0,0.25), inset 0 0 12px rgba(255,255,255,0.2);
      }
      &:active { transform: scale(0.9); }
    }
  }

  /* 邮箱关闭按钮 */
  .actions {
    display: flex;
    justify-content: center;
    margin-top: 12px;

    .cancel {
      flex: 1;
      padding: 12px 0;
      font-size: 15px;
      font-weight: 600;
      color: light-dark(#ff3b30, #ff453a);
      background: light-dark(rgba(255,255,255,0.6), rgba(40,40,40,0.6));
      border: none;
      border-radius: var(--border-radius-md);
      cursor: pointer;
      transition: transform 0.2s ease, filter 0.2s ease, background 0.3s ease;

      &:hover {
        background: light-dark(rgba(255,255,255,0.75), rgba(60,60,60,0.75));
      }
      
      &:active {
        transform: scale(0.95);
        filter: brightness(0.9);
      }
    }
  }

  /* 微信二维码弹窗 */
  .wechat-qr {
    img { width: 240px; height: 240px; border-radius:var(--border-radius-md); }
    p { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--word-color); }
  }
}

/* ========== SatinAu Design 导航栏 ========== */
.bottom-nav{
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  box-sizing: border-box;
  width: min(90vw, 320px);
  padding: 10px;
  border-radius:var(--border-radius-xl);
  background: light-dark(rgba(255,255,255,0.5),rgba(30,30,30,0.5));
  -webkit-backdrop-filter: var(--filter-blur);
  backdrop-filter: var(--filter-blur);
  border: 1px solid light-dark(rgba(255,255,255,0.35),rgba(255,255,255,0.12));
  box-shadow: 0 18px 40px rgba(0,0,0,0.25), inset 0 0 30px rgba(255,255,255,0.12);
  z-index: 2001;
  /* 隔离动画 */
  animation: none !important;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform; /* 优化性能 */

  a {
    flex: 1;
    text-align: center;
    border-radius: var(--border-radius-md);
    font-size: 14px;
    font-weight: 600;
    color: light-dark(#333, #f5f5f5);
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    padding: 8px 0;

    &.active {
      background: light-dark(rgba(255,255,255,0.6), rgba(255,255,255,0.18));
      color: var(--primary-color);
    }

    &:hover {
      background: light-dark(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
    }

    &:active {
      background: light-dark(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
      transform: scale(0.96);
    }
  }

  /* === 底部导航栏（中英文分两行显示） === */
  .nav-cn {
    font-size: 15px;
  }

  .nav-en {
    font-size: 12px;
    opacity: 0.7;
  }
}

/* 移动端隐藏状态 (默认向下移出) */
.bottom-nav.nav-hidden {
  /* 这里的 160% 是为了确保连同阴影一起藏好，translateX(-50%) 是为了保持居中 */
  transform: translateX(-50%) translateY(160%);
}

/* 桌面端隐藏状态 (向上移出) */
@media (min-width: 768px) {
  .bottom-nav.nav-hidden {
    /* 桌面端导航栏通常在顶部或特定位置，根据要求向上移动 */
    transform: translateX(-50%) translateY(-200%);
  }
}

/* 桌面端导航栏调整 - 768px以上屏幕 */
@media (min-width: 768px) {
  .bottom-nav {
    /* 从底部移到顶部 */
    bottom: auto;
    top: 20px;
    /* 保持悬浮效果 */
    position: fixed;
    /* 调整宽度和内边距 */
    width: min(90vw, 600px);
    padding: 8px 20px;
    /* 减小阴影强度：降低模糊半径和不透明度 */
    box-shadow: 0 0 16px rgba(0,0,0,0.12), inset 0 0 30px rgba(255,255,255,0.12);
  
    /* 中英文在一行显示 */
    a {
      flex-direction: row;
      gap: 8px;
      padding: 8px 16px;
      justify-content: center; /* 水平居中 */
      align-items: center;     /* 垂直居中 */
      text-align: center;      /* 文字居中 */

      &.dropdown-item:hover {
        background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2));
      }
    }
    
    .nav-cn,
    .nav-en {
      display: inline-block;
    }
    
    /* 调整英文字体大小以适应横向布局 */
    .nav-en {
      font-size: 13px;
    }
  }

  .mobile-more-menu {
    display: none;
  }
}

/* 头像基础样式 */
.nav-avatar {
  display: none; /* 默认隐藏 */
  
  /* 桌面端显示头像 */
  @media (min-width: 768px) {
    display: block;
    margin: 0 8px -3px 0;
  
    img {
      width: 36px;
      height: 36px;
      border-radius: 50%; /* 圆形头像 */
      object-fit: cover;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    &:hover {
      transform: scale(1.08);
      filter: brightness(1.05);
    }

    &:active {
      transform: scale(0.96);
      filter: brightness(0.95);
    }
  }
  
  /* 调整导航栏布局以容纳头像 */
  .bottom-nav {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 更多按钮基础样式 - 仅在SatinAu Design显示 */
.more-menu-container {
  position: relative;
}

.more-btn {
  /* 圆形SatinAu Design材质承托 */
  width: 36px;
  height: 36px;
  color: var(--word-color);
  border-radius: 50%;
  background: light-dark(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2)); /* 半透明背景 */
  backdrop-filter: var(--filter-blur);
  -webkit-backdrop-filter: var(--filter-blur);
  border: 1px solid light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12));
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 0 -3px 8px;
  transition: background 0.2s ease;

  &:hover {
    transform: scale(1.08);
    filter: brightness(1.05);
  }

  &:active {
    transform: scale(0.96);
    filter: brightness(0.95);
  }
  
  /* 桌面端：更多按钮激活状态 */
  &.active {
    /* 背景色变为激活态背景 (与主导航项 active 保持一致) */
    background: light-dark(rgba(255,255,255,0.6), rgba(255,255,255,0.18));
    border-color: transparent;
    
    .more-btn-svg {
      /* 图标变为主题色 */
      fill: var(--primary-color);
    }
  }
}

/* --- 移动端：手势提示线激活状态 --- */
@media (max-width: 767px) {
  .bottom-nav {
    /* 当 bottom-nav 拥有 more-active 类时，修改伪元素样式 */
    &.more-active::before {
      /* 变为主题色 */
      background: var(--primary-color);
      /* 添加高亮边框 */
      border: 1px solid light-dark(rgba(255,255,255,0.8), rgba(255,255,255,0.4));
      /* 添加微弱的发光效果 */
      box-shadow: 0 0 8px var(--primary-color);
      /* 稍微加宽一点点以示强调 */
      width: 40px; 
    }

    /* 确保当菜单打开变成箭头时，颜色也保持主题色 */
    &.more-active.menu-open::before {
      background: transparent;
      border-color: var(--primary-color);
      box-shadow: none;
      width: 12px; 
    }
  }
}

/* 下拉菜单样式 */
.more-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 160px;
  margin-top: 24px;
  background: light-dark(rgba(255, 255, 255), rgba(30, 30, 30));
  border: 1px solid light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12));
  border-radius: var(--border-radius-lg);
  box-shadow: 0 16px 40px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
  padding: 6px;
  
  /* 动画初始状态 */
  transform-origin: top right; /* 从按钮位置扩散 */
  transform: scale(0.7) skewX(-2deg) translateY(-15px); /* 初始缩小并带一点微小的斜切 */
  opacity: 0;
  filter: blur(12px); /* 初始状态是模糊的 */
  pointer-events: none;
  
  /* 复合过渡：弹簧效果 transform，线性透明度 */
  transition: 
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease,
    filter 0.3s ease;
  z-index: 3000;

  /* 菜单显示状态 */
  &.show {
    transform: scale(1) skewX(0) translateY(0);
    opacity: 1;
    filter: blur(0); /* 变得清晰 */
    pointer-events: auto;
  }
}

/* 菜单项样式 - 带错落进场动画 */
.more-dropdown .dropdown-item {
  display: block;
  padding: 10px 14px;
  margin-bottom: 2px;
  color: var(--word-color);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--border-radius-md); /* 子菜单项也是圆角 */
  
  /* 初始进场状态 */
  opacity: 0;
  transform: translateX(10px); 
  
  transition: 
    background 0.2s ease, 
    transform 0.2s ease,
    opacity 0.2s ease;
    
  transition-delay: 0s;
}

/* 当菜单显示时，内部项的进场动画 */
.more-dropdown.show .dropdown-item {
  opacity: 1;
  transform: translateX(0);
  transition: 
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), /* 丝滑移动 */
    background 0.2s ease; /* 背景色保持快速响应 */
}

/* 错落延迟 (Stagger Delay) */
.more-dropdown.show .dropdown-item:nth-child(1) { transition-delay: 0.05s; }
.more-dropdown.show .dropdown-item:nth-child(2) { transition-delay: 0.1s; }
.more-dropdown.show .dropdown-item:nth-child(3) { transition-delay: 0.15s; }
.more-dropdown.show .dropdown-item:nth-child(4) { transition-delay: 0.2s; }
.more-dropdown.show .dropdown-item:nth-child(5) { transition-delay: 0.25s; }

/* 菜单项悬停效果 */
.more-dropdown .dropdown-item:hover {
  background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.15));
}

.more-dropdown .dropdown-item:active {
  transform: scale(0.96);
}

@media (max-width: 767px) {
  body {
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 36px);
  }

  .more-menu-container {
    display: none !important;
  }

  /* 移动端导航栏手势提示线 */
  .bottom-nav {
    padding-top: 20px; /* 为提示线预留空间 */
  }
  
  /* 手势提示线样式 */
  .bottom-nav::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%) rotate(0deg); /* 初始化旋转 */
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
    /* 添加弹性过渡动画，与菜单弹出节奏一致 */
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box; /* 确保边框计算在内 */
    border-top: 0 solid transparent;
    border-left: 0 solid transparent;
  }

  /* 当菜单打开时，提示线变形为向上箭头 */
  .bottom-nav.menu-open::before {
    width: 12px;
    height: 12px;
    background: transparent; /* 背景透明 */
    
    /* 利用边框绘制箭头形状 */
    border-top: 3px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
    border-left: 3px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
    border-radius: 2px;
    
    /* 旋转45度构成向上箭头 */
    transform: translateX(-50%) translateY(-20px) rotate(45deg);
  }

  /* 移动端专用更多菜单 */
  .mobile-more-menu {
    position: fixed;
    left: 50%;
    bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 40px);
    transform: translateX(-50%) translateY(20px) scale(0.95);
    width: min(90vw, 320px);
    max-height: 0;
    overflow: hidden;
    background: light-dark(rgba(255, 255, 255, 0.3), rgba(30, 30, 30, 0.5));
    -webkit-backdrop-filter: var(--filter-blur);
    backdrop-filter: var(--filter-blur);
    border: 1px solid light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12));
    border-radius:var(--border-radius-xl);
    box-shadow: 0 0 40px light-dark(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)), inset 0 0 30px light-dark(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* 确保内容不会在动画时被裁剪 */
    padding: 12px; /* 给容器加一点内边距 */
    box-sizing: border-box;
    display: grid; /* 启用网格布局 */
    grid-template-columns: repeat(2, 1fr); /* 强制分为两列，等宽 */
    gap: 10px; /* 两个按钮之间的间距 */
    align-content: start; /* 内容靠上对齐 */

    a{
      flex: 1;
      text-align: center;
      padding: 12px 0;
      border-radius:var(--border-radius-md);
      font-size: 14px;
      font-weight: 600;
      color: #333;
      text-decoration: none;
      transition: background 0.3s ease, color 0.3s ease;

      &.active{
        background: light-dark(rgba(255,255,255,0.6), rgba(255,255,255,0.18));
        color: var(--primary-color);
      }
    }

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

    /* 移动端菜单项样式 - 添加入场动画 */
    .dropdown-item {
      padding: 12px 4px;
      font-size: 15px;
      font-weight: 600;
      color: light-dark(#333, #f5f5f5);
      text-decoration: none;
      display: flex;
      transition: all 0.3s ease;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-bottom: none;
      border-radius: var(--border-radius-md);
      background: light-dark(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
      border: 1px solid transparent;
      /* 初始状态为透明并向下偏移 */
      opacity: 0;
      transform: translateY(10px);

      /* 菜单项悬停效果 */
      &:hover {
        background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      }
    }

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

      /* 为每个菜单项设置不同的延迟，形成流畅的序列动画 */
      &:nth-child(1) {
        transition-delay: 0.1s;
      }
      &:nth-child(2) {
        transition-delay: 0.2s;
      }
      &:nth-child(3) {
        transition-delay: 0.3s;
      }
      &:nth-child(4) {
        transition-delay: 0.4s;
      }
      &:nth-child(5) {
        transition-delay: 0.5s;
      }
      &:nth-child(6) {
        transition-delay: 0.6s;
      }
    }

    .nav-separator {
      grid-column: 1 / -1; /* 从第一根网格线跨到最后一根 */
      width: 100%;
      margin: 4px 0;
      height: 1px;
      background: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.1));
    }

    .nav-user-card {
      grid-column: 1 / -1; /* 跨两列 */
      width: auto;
      margin: 0; /* 重置边距，由 grid gap 控制 */
      background: light-dark(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    }
  }

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

/* ======== 博客 Markdown 正文排版（轻量） ======== */
.md-article { max-width: 860px; margin: 0 auto; text-align: left; 
  .post-meta { margin-bottom: 18px; }}

/* 返回按钮样式 */
.back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid light-dark(rgba(255,255,255,0.35), rgba(255,255,255,0.2));
  background: light-dark(rgba(255,255,255,0.25), rgba(40,40,40,0.4));
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2), inset 0 0 20px rgba(255,255,255,0.15);
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 10px;
  svg {
    width: 20px;
    height: 20px;
    stroke: var(--primary-color);
    stroke-width: 2.2;
    fill: none;
  }
  &:hover {
    transform: scale(1.08);
    background: rgba(255,255,255,0.45);
  }
  &:active {
    transform: scale(0.9);
  }
}

.md-article .post-date { margin: 6px 0 16px; color: #666; font-size: clamp(0.8rem, 3vw, 1rem); }

.md-body { font-size: clamp(0.8rem, 3vw, 1rem); line-height: 1.8; 
  h1, h2, h3, h4 { margin: 1.2em 0 0.6em; }
  h1 { font-size: clamp(1.6rem, 4vw, 1.8rem); }
  h2 { font-size: clamp(1.4rem, 4vw, 1.6rem); }
  h3 { font-size: clamp(1.2rem, 4vw, 1.4rem); }
  p { margin: 0.8em 0; font-size: clamp(0.95rem, 3vw, 1rem); }
  a { color: var(--primary-color); text-decoration: none; 
    &:hover { text-decoration: underline; }}
  img {
    max-width: 100%;
    height: auto;
    border-radius:var(--border-radius-md);
    cursor: zoom-in;
    &:active {
      transform: scale(0.98);
    }
  }
  code { padding: 0.2em 0.4em; border-radius:var(--border-radius-sm); background: light-dark(rgba(0,0,0,0.06), rgba(255,255,255,0.12)); }
  pre { overflow: auto; padding: 14px; border-radius:var(--border-radius-md); background: light-dark(rgba(0,0,0,0.06), rgba(255,255,255,0.08)); 
    code { background: transparent; padding: 0; }}
  /* 列表 */
  ul, ol { padding-left: 1.4em; margin: 0.6em 0; }
  /* 引用 */
  blockquote {
    margin: 1em 0; padding: 0.6em 1em; border-left: 3px solid light-dark(#ccc, #666); opacity: 0.9;
    background: light-dark(rgba(255,255,255,0.5), rgba(40,40,40,0.4)); border-radius:var(--border-radius-sm);
  }
  /* 表格容器 (JS生成) - 负责滚动、边框、背景和圆角 */
  .table-wrapper {
    width: 100%;
    margin: 1.5em 0;
    overflow-x: auto; /* 允许横向滚动 */
    border-radius: var(--border-radius-md);
    border: 1px solid light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.1));
    background: light-dark(rgba(255,255,255,0.5), rgba(40,40,40,0.4));
    -webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
  }

  /* 表格本体 - 恢复标准表格布局 */
  table {
    width: 100%;
    min-width: 600px; /* 设置最小宽度，确保内容不换行，宽度不够时触发wrapper滚动 */
    border-collapse: separate;
    border-spacing: 0;
    margin: 0; /* margin 交给 wrapper */
    border: none; /* 边框交给 wrapper */
    background: transparent; /* 背景交给 wrapper */
    
    thead {
      background: light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.1));
    }
    
    th, td {
      padding: 12px 15px;
      line-height: 1.5;
      text-align: left;
      border-bottom: 1px solid light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.05));
    }
    
    th {
      font-weight: 600;
      white-space: nowrap; /* 表头文字不换行 */
      color: var(--word-color);
    }
    
    tr:last-child td {
      border-bottom: none;
    }
    
    tbody tr:hover {
      background: light-dark(rgba(0,0,0,0.03), rgba(255,255,255,0.05));
    }
  }
}

/* 二级页面淡入动画 */
.md-article {
  animation: blurFadeUp 0.5s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

/* ===== 加载动画 ===== */
.loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: light-dark(rgba(255,255,255,0.6), rgba(0,0,0,0.55));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  &.show {
    opacity: 1;
    pointer-events: auto;
  }
}

.spinner{
    /* css变量 环的宽度 */
    --s:4px;
    width: calc(16 * var(--s));
    height: calc(16 * var(--s));
    border-radius: 50%;
    /* 网格布局 */
    display: grid;
    /* 渐变蒙版 */
    -webkit-mask: radial-gradient(50% 50%,
    #0000 calc(99% - 2 * var(--s)),
    #000 calc(100% - 2 * var(--s)));
    mask: radial-gradient(50% 50%,
    #0000 calc(99% - 2 * var(--s)),
    #000 calc(100% - 2 * var(--s)));
    /* 执行动画：动画名 时长 线性 循环播放 */
    animation: spin 3s linear infinite;
}
.spinner::before{
    content: "";
    /* 圆锥渐变 */
    background: conic-gradient(
        from 25deg,
        #FFE92C 25%,
        #FF9999 0 50%,
        #00FFCC 0 75%,
        #5E447B 0
    );
    /* 渐变蒙版 */
    -webkit-mask: repeating-conic-gradient(#0000 0 25deg,#000 23% 25%),
    radial-gradient(var(--s) at var(--s) 50%,#000 97%,#0000) left/calc(100% - 2 * var(--s)) 100% repeat-x,
    radial-gradient(var(--s) at 50% var(--s),#000 97%,#0000) top/100% calc(100% - 2 * var(--s)) repeat-y;
    mask: repeating-conic-gradient(#0000 0 25deg,#000 23% 25%),
    radial-gradient(var(--s) at var(--s) 50%,#000 97%,#0000) left/calc(100% - 2 * var(--s)) 100% repeat-x,
    radial-gradient(var(--s) at 50% var(--s),#000 97%,#0000) top/100% calc(100% - 2 * var(--s)) repeat-y;
}

/* 定义动画 */
@keyframes spin {
    to{
        /* 旋转一周 */
        transform: rotate(1turn);
    }
}

/* 登录按钮 - SatinAu Design 风格 */
#loginBtn {
  background: light-dark(rgba(255, 255, 255, 0.3), rgba(40, 40, 40, 0.6));
  -webkit-backdrop-filter: var(--filter-blur);
  backdrop-filter: var(--filter-blur);
  border: 1px solid light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12));
  border-radius:var(--border-radius-md);
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  color: light-dark(#333, #f5f5f5);
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease, background 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  &:hover {
    background: light-dark(rgba(255, 255, 255, 0.4), rgba(60, 60, 60, 0.75));
  }

  &:active {
    transform: scale(0.95);
    filter: brightness(0.9);
  }
}

#logoutBtn {
  background: light-dark(rgba(255, 255, 255, 0.3), rgba(40, 40, 40, 0.6));
  -webkit-backdrop-filter: var(--filter-blur);
  backdrop-filter: var(--filter-blur);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius:var(--border-radius-md);
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  color: light-dark(#333, #f5f5f5);
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease, background 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: inline-block; /* 确保按钮正确显示 */

  &:hover {
    background: rgba(255, 255, 255, 0.4);
  }

  &:active {
    transform: scale(0.95);
    filter: brightness(0.9);
  }
}

/* 登录弹窗内按钮样式 */
#authModal .tab-btn,
#emailLoginBtn,
#signupBtn,
#githubLoginBtn,
#googleLoginBtn,
#closeAuthModal {
  background: light-dark(rgba(255, 255, 255, 0.6), rgba(40, 40, 40, 0.6));
  border: none;
  border-radius:var(--border-radius-md);
  padding: 12px 0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  /* 过渡动画 */
  transition: transform 0.2s ease, filter 0.2s ease, background 0.3s ease;
  width: 100%;
  margin-bottom: 10px;
}

/* hover效果 */
#authModal .tab-btn:hover,
#emailLoginBtn:hover,
#signupBtn:hover,
#githubLoginBtn:hover,
#googleLoginBtn:hover,
#closeAuthModal:hover {
  background: light-dark(rgba(255, 255, 255, 0.75), rgba(60, 60, 60, 0.75));
}

/* 点击效果 */
#authModal .tab-btn:active,
#emailLoginBtn:active,
#signupBtn:active,
#githubLoginBtn:active,
#googleLoginBtn:active,
#closeAuthModal:active {
  transform: scale(0.95);
  filter: brightness(0.9);
}

/* 输入框样式 */
#authModal input[type="email"],
#authModal input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  margin-bottom: 12px;
  max-width: 100%;
  border: 1px solid light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15));
  border-radius:var(--border-radius-md);
  background: light-dark(rgba(255, 255, 255, 0.2), rgba(40, 40, 40, 0.5));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 15px;
  color: light-dark(#333, #f5f5f5);
}

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

/* ========== 设置页面 - 功能开关 ========== */
.settings-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  border: 1px solid light-dark(rgba(255, 255, 255, 0.25), rgba(255,255,255,0.12));
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12), inset 0 0 20px rgba(255,255,255,0.08);
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  box-sizing: border-box;
  scroll-margin-top: 50vh;
}

.setting-label {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 4px;
  font-weight: 500;
}

/* Core styles for the toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  flex-shrink: 0; /* Prevents the switch from shrinking */
  margin-left: 16px;

  /* Hide the default HTML checkbox */
  input {
    opacity: 0;
    width: 0;
    height: 0;
  }
}

/* The track of the switch */
.switch-slider {
  position: absolute;
  cursor: var(--custom-cursor, pointer) !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.15));
  border-radius: 999px; /* Capsule shape */
  transition: background-color 0.3s ease;

  /* The thumb (the sliding circle) */
  &::before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 2px;
    bottom: 2px;
    background-color: #f5f5f5;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* Styles for the "On" state */
input:checked + .switch-slider {
  background-color: var(--primary-color);

  &::before {
    transform: translateX(22px); /* Sliding distance */
  }
}

/* ========== 主题色选择器 ========== */
.theme-selector-wrapper {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end; /* 靠右对齐，与Toggle Switch保持一致 */
}

.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: var(--custom-cursor, pointer);
  position: relative;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border: 2px solid rgba(255,255,255,0.2); /* 默认微弱描边 */
}

/* 悬停效果 */
.color-swatch:hover {
  transform: scale(1.15);
  z-index: 2;
}

/* 选中状态：外圈光环 */
.color-swatch.selected {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--word-color), 0 4px 12px rgba(0,0,0,0.2);
  border-color: transparent;
}

/* 选中状态下的对勾 (可选，这里用纯CSS画一个小点或对勾) */
.color-swatch.selected::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popIn {
  from { transform: translate(-50%, -50%) scale(0); }
  to { transform: translate(-50%, -50%) scale(1); }
}

/* ================= Viewer.js 自定义主题 ================= */

/* 覆盖 Viewer.js 的全局背景和遮罩 */
.viewer-container,
.viewer-overlay {
  background: transparent !important;
}

.viewer-overlay {
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(16px) saturate(180%);
  transition: opacity 0.35s ease !important;
  z-index: 9997 !important;
}

/* Viewer 画布容器 */
.viewer-canvas {
  background: light-dark(rgba(255, 255, 255, 0.3), rgba(30, 30, 30, 0.6));
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25), inset 0 0 30px rgba(255,255,255,0.12);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

/* 图片主体 */
.viewer-image {
  border-radius:var(--border-radius-md);
  box-shadow: 0 8px 28px rgba(0,0,0,0.2), inset 0 0 16px rgba(255,255,255,0.1);
  transition: transform 0.35s ease, filter 0.35s ease;
}

/* 图片加载动画 */
.viewer-canvas.loading .viewer-image {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
}
.viewer-canvas.loaded .viewer-image {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* 工具栏 */
.viewer-toolbar {
  background: light-dark(rgba(255, 255, 255, 0.3), rgba(30, 30, 30, 0.5));
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-radius:var(--border-radius-md);
  padding: 6px 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.2), inset 0 0 20px rgba(255,255,255,0.12);
  z-index: 2000;
  transition: background 0.3s ease;
  width: 320px;
  margin: 0 auto;
}

:root[data-theme="light"] .viewer-toolbar > ul > li::before,
:root[data-theme="light"] .viewer-button::before {
  filter: invert(0.85);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .viewer-toolbar > ul > li::before,
  :root:not([data-theme="dark"]) .viewer-button::before {
    filter: invert(0.85);
  }
}

.viewer-toolbar>ul {
  margin: 0 !important;
}

.viewer-toolbar>ul>li {
  background-color: light-dark(rgba(255, 255, 255, 0.3), rgba(40, 40, 40, 0.3)) !important;
  border: 1px solid light-dark(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.viewer-navbar {
  background: none !important;
  margin: 10px 0;
}

.viewer-list {
  background: light-dark(rgba(255, 255, 255, 0.3), rgba(30, 30, 30, 0.5));
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  padding: 1px !important;
  border-radius: 7px;
}

.viewer-list>li {
  border-radius: 6px;
}

.viewer-button.viewer-close {
  width: 44px;
  height: 44px;
  top: 30px;
  right: 30px;
  border-radius: 50%;
  background-color: light-dark(rgba(255, 255, 255, 0.5), rgba(40, 40, 40, 0.5));
  border: 1px solid light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: var(--custom-cursor, pointer);
}

.viewer-button.viewer-close::before {
  bottom: auto;
  left: auto;
  position: relative;
  transform: scale(0.9);
}

.viewer-button.viewer-close:hover {
  background-color: light-dark(#ff3b30, #ff453a); /* 悬停变红 */
  border-color: transparent;
  transform: rotate(90deg) scale(1.1);
}
.viewer-button.viewer-close:hover::before {
  filter: invert(0) !important; /* 悬停变红后图标变白 */
}
.viewer-button.viewer-close:active {
  transform: scale(0.9);
}

.viewer-tooltip {
  background-color: light-dark(rgba(255,255,255,0.5), rgba(30,30,30,0.5)) !important;
  color: var(--word-color) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 8px 28px rgba(0,0,0,0.2), inset 0 0 20px rgba(255,255,255,0.15);
  border: 1px solid light-dark(rgba(255,255,255,0.25), rgba(60,60,60,0.25));
}

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

  img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius:var(--border-radius-md);
    cursor: pointer;
    transition: transform 0.3s ease;

    &:hover {
      transform: scale(1.03);

    &:active {
      transform: scale(0.96);
    }
    }
  }
}

/* 图片外层容器 */
.gallery-item {
  position: relative;
  display: inline-block;
}

/* HDR 角标 */
.hdr-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color), black 30%));
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  user-select: none;
  z-index: 1;
}

/* Hover 时更明显 */
.gallery-item:hover .hdr-badge {
  transform: scale(1.05);
}

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

/* 提示气泡 */
.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  padding: 6px 12px;
  border-radius:var(--border-radius-sm);
  background-color: light-dark(#f5f5f5, #111);
  color: var(--word-color);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  margin-bottom: 8px;
  z-index: 10;
}

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

/* 使所有带 tooltip 的父容器能定位 */
.setting-item {
  position: relative;

  /* 悬停时显示提示气泡 */
  &:hover .tooltip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

/* ========== 下拉菜单 ========== */
.setting-item:has(.custom-select-wrapper.open) {
  z-index: 100;
  position: relative; /* 确保 z-index 生效 */
}
/* 容器定位 */
.custom-select-wrapper {
  position: relative;
  user-select: none;
  width: 160px; /* 控制宽度 */
}

/* 1. 触发器 (模拟原本的 Select 框) */
.custom-select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--word-color);
  line-height: 1.3;
  
  background: light-dark(rgba(255, 255, 255, 0.3), rgba(40, 40, 40, 0.6));
  -webkit-backdrop-filter: var(--filter-blur);
  backdrop-filter: var(--filter-blur);
  border: 1px solid light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12));
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  
  cursor: var(--custom-cursor, pointer);
  transition: all 0.2s ease;
}

/* 触发器悬停 */
.custom-select-trigger:hover {
  background: light-dark(rgba(255, 255, 255, 0.4), rgba(60, 60, 60, 0.75));
}

/* 箭头图标 (CSS绘制) */
.custom-select-trigger .arrow {
  width: 8px;
  height: 8px;
  border-bottom: 2px solid var(--word-color);
  border-right: 2px solid var(--word-color);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.3s ease;
  margin-left: 12px;
  opacity: 0.7;
}

/* 菜单展开时箭头旋转 */
.custom-select-wrapper.open .custom-select-trigger .arrow {
  transform: rotate(225deg) translateY(-2px);
}

/* 2. 选项列表容器 (默认隐藏) */
.custom-options {
  position: absolute;
  top: calc(100% + 8px); /* 下方留出间距 */
  left: 0;
  right: 0;
  z-index: 3000;
  
  background: light-dark(rgba(255, 255, 255), rgba(40, 40, 40));
  border: 1px solid light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12));
  border-radius: var(--border-radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  
  /* 动画初始状态 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.96);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden; /* 圆角裁切 */
}

/* 列表展开状态 */
.custom-select-wrapper.open .custom-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* 3. 单个选项 */
.custom-option {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--word-color);
  cursor: var(--custom-cursor, pointer);
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 选项悬停 */
.custom-option:hover {
  background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1));
  color: var(--primary-color);
}

/* 选中状态 */
.custom-option.selected {
  background: light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.05));
  font-weight: 600;
  color: var(--primary-color);
}

/* 选中的选项后面加个小对勾 */
.custom-option.selected::after {
  content: '';
  width: 6px;
  height: 10px;
  border-bottom: 2px solid var(--primary-color);
  border-right: 2px solid var(--primary-color);
  transform: rotate(45deg);
  margin-left: 8px;
}

/* ========== 评论区样式 ========== */
.comments-section {
  margin-top: 60px;
  animation: blurFadeUp 0.8s ease forwards;
}

.comments-title {
  font-size: 1.4rem;
  margin-bottom: 20px;
  border-left: 4px solid var(--primary-color);
  padding-left: 12px;
}

/* 评论输入框容器 */
.comment-input-wrapper {
  background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid light-dark(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
  border-radius: var(--border-radius-lg);
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

.comment-textarea {
  width: 100%;
  min-height: 80px;
  background: light-dark(rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.2));
  border: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
  border-radius: var(--border-radius-sm);
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--word-color);
  resize: vertical;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.comment-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  background: light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.4));
}

.comment-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-tip {
  font-size: 13px;
  color: light-dark(#666, #aaa);
}

.comment-submit-btn {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: var(--border-radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.3s;
}

.comment-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #ccc;
}

/* 评论列表 */
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: light-dark(rgba(255, 255, 255, 0.4), rgba(30, 30, 30, 0.3));
  border-radius: var(--border-radius-lg);
  border: 1px solid light-dark(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

.comment-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover;
  background: #ddd;
  flex-shrink: 0;
}

.comment-body {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.comment-user {
  font-weight: 600;
  font-size: 14px;
  color: var(--word-color);
}

.comment-date {
  font-size: 12px;
  color: light-dark(#888, #777);
}

.comment-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--word-color);
  white-space: pre-wrap; /* 保留换行 */
}

/* ========== 楼中楼样式 ========== */

/* 子评论容器：左侧缩进 */
.comment-children {
  margin-left: 48px; /* 缩进距离 */
  margin-top: 10px;
  border-left: 2px solid light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.05)); /* 左侧连接线 */
  padding-left: 12px;
}

/* 移动端缩进减小 */
@media (max-width: 768px) {
  .comment-children {
    margin-left: 20px;
    padding-left: 8px;
  }
}

/* 操作栏（回复按钮等） */
.comment-actions-bar {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
}

.comment-reply-btn,
.comment-delete {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.2s ease;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

/* 独立颜色设置 */
.comment-reply-btn {
  color: var(--primary-color);
}

.comment-delete {
  color: light-dark(#ff3b30, #ff453a);
}

.comment-reply-btn:hover,
.comment-delete:hover {
  opacity: 1;
  text-decoration: none;
}

/* ========== 评论审核状态样式 ========== */
.comment-status {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  width: fit-content;
}

.comment-status.pending {
  background: light-dark(rgba(255, 165, 0, 0.15), rgba(255, 165, 0, 0.25));
  color: light-dark(#d97706, #fbbf24);
  border: 1px solid light-dark(rgba(255, 165, 0, 0.2), rgba(255, 165, 0, 0.1));
}

.comment-status.rejected {
  background: light-dark(rgba(255, 59, 48, 0.1), rgba(255, 69, 58, 0.2));
  color: light-dark(#c02b20, #ff453a);
  border: 1px solid light-dark(rgba(255, 59, 48, 0.2), rgba(255, 69, 58, 0.1));
}

/* 审核未通过或待审核的整体样式 */
.comment-item.audit-filtered {
  background: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.03));
  border-style: dashed;
}

/* 内嵌回复框容器 */
.reply-form-wrapper {
  margin-top: 12px;
  padding: 12px;
  background: light-dark(rgba(0,0,0,0.03), rgba(255,255,255,0.05));
  border-radius: var(--border-radius-md);
  animation: blurFadeUp 0.3s ease;
}

.reply-form-wrapper textarea {
  width: 100%;
  min-height: 60px;
  margin-bottom: 8px;
  padding: 8px;
  border-radius: var(--border-radius-sm);
  border: 1px solid light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.1));
  background: light-dark(rgba(255,255,255,0.5), rgba(0,0,0,0.2));
  color: var(--word-color);
  font-family: inherit;
  resize: vertical;
}

.reply-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.reply-cancel-btn {
  padding: 6px 12px;
  font-size: 13px;
  border: 1px solid light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.2));
  background: transparent;
  color: var(--word-color);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
}

.reply-submit-btn {
  padding: 6px 16px;
  font-size: 13px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
}

/* ========== AI Summary Card Style ========== */
.ai-summary-card {
  margin: 0 0 40px 0;
  padding: 20px 24px;
  border-radius: var(--border-radius-lg);
  /* 适配你的玻璃拟态风格 */
  background: light-dark(rgba(255, 255, 255, 0.45), rgba(40, 40, 40, 0.4));
  border: 1px solid light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.12));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  animation: blurFadeUp 0.8s ease forwards;
  transition: all 0.3s ease;
}

/* 顶部 Gemini 品牌色流光条 */
.ai-summary-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #4285f4, #9b72cb, #d96570);
  z-index: 2;
}

.ai-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 15px;
  /* 使用渐变文字 */
  background: linear-gradient(90deg, #4285f4, #d96570);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ai-icon {
  width: 20px;
  height: 20px;
  animation: starPulse 2s infinite ease-in-out;
  color: initial;
}

.ai-content {
  font-size: 15px;
  line-height: 1.7;
  color: var(--word-color);
  opacity: 0.95;
}

/* 生成按钮 */
.ai-generate-btn {
  background: light-dark(rgba(255,255,255,0.8), rgba(60,60,60,0.6));
  border: 1px solid light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.1));
  padding: 8px 18px;
  border-radius: 20px;
  color: var(--word-color);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.ai-generate-btn:hover {
  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
  color: #333; /* 悬停时文字变黑 */
  transform: translateY(-2px) scale(1.02);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(142, 197, 252, 0.3);
}

.ai-generate-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* 加载转圈 */
.ai-loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0,0,0,0.1);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes starPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(66, 133, 244, 0)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 5px rgba(66, 133, 244, 0.5)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(66, 133, 244, 0)); }
}

/* ========== AI 打字机特效 ========== */

/* 单个字符的基础样式 */
.ai-char {
  display: inline-block; /* 必须是 inline-block 才能应用 transform */
  opacity: 0;            /* 初始隐藏 */
  filter: blur(4px);     /* 初始模糊 */
  transform: translateY(4px); /* 初始微下沉 */
  animation: charBlurIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  white-space: pre-wrap; /* 保留空格和换行 */
  will-change: opacity, filter, transform;
}

/* 字符进入动画关键帧 */
@keyframes charBlurIn {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(4px) scale(0.95);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

/* 点赞按钮样式 */
.comment-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 8px;
  margin: 0;
  border-radius: var(--border-radius-sm);
  color: light-dark(#666, #aaa); /* 默认灰色 */
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.comment-like-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.comment-like-btn:hover {
  background: light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.1));
}

/* 已点赞状态 (Active) */
.comment-like-btn.liked {
  color: var(--primary-color); /* 使用主色调 */
}

.comment-like-btn.liked svg {
  fill: var(--primary-color); /* 填充颜色 */
  transform: scale(1.2) rotate(-12deg); /* 俏皮的跳动效果 */
}

.comment-like-count {
  font-size: 12px;
  font-weight: 600;
  min-width: 14px;
  text-align: center;
}

/* ========== 操作栏样式 ========== */

/* 外层容器：材质衬托 (Material Backing) */
.post-actions-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 40px;
  margin: 40px auto; /* 上下间距 */
  padding: 20px 40px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  
  /* 玻璃拟态/材质背景 */
  background: light-dark(rgba(255, 255, 255, 0.45), rgba(40, 40, 40, 0.4));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.12));
  border-radius: var(--border-radius-xl);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), inset 0 0 20px rgba(255, 255, 255, 0.1);
  
  /* 进场动画 */
  animation: blurFadeUp 0.8s ease forwards;
}

/* 单个操作项容器 (垂直排列) */
.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* 按钮和文字的间距 */
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent; /* 移动端点击不高亮背景 */
}

/* 圆形按钮样式 */
.action-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 按钮背景材质 */
  background: light-dark(rgba(255, 255, 255, 0.6), rgba(60, 60, 60, 0.6));
  border: 1px solid light-dark(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  color: var(--word-color);
  
  cursor: var(--custom-cursor, pointer);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.action-btn svg {
  width: 24px;
  height: 24px;
  fill: none; /* 确保SVG是线条风格 */
  stroke: currentColor;
  transition: transform 0.3s ease;
}

/* 下方文字标签 */
.action-label {
  font-size: 13px;
  font-weight: 500;
  color: light-dark(#555, #ccc);
  transition: color 0.3s ease;
}

/* 交互效果 (Hover & Active) */
/* 当鼠标悬停在整个item上时 */
.action-item:hover .action-btn {
  background: var(--primary-color);
  color: white;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
  border-color: transparent;
}

.action-item:hover .action-label {
  color: var(--word-color);
}

/* 点击时的缩放 */
.action-item:active .action-btn {
  transform: scale(0.92);
}

/* 让回到顶部按钮在悬停时有个向上的小动画 */
.action-item:hover #backToTopBtn svg {
  transform: translateY(-2px);
}

.chime-modal h2 {
  background: linear-gradient(90deg, #FF9999, #FFE92C);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 分享图片生成的临时容器 (移出屏幕) */
#share-card-container {
  position: fixed;
  top: 0;
  left: -9999px;
  width: 375px; /* 朋友圈标准宽度 */
  background: #fff;
  z-index: -1;
  padding: 30px;
  box-sizing: border-box;
  font-family: var(--font-sans);
  color: #333;
  overflow: hidden;
  border-radius: 0; /* 生成图片不需要圆角，或者由容器决定 */
}

/* 生成图片的装饰背景 */
#share-card-container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #00FFCC, #007aff, #FF9999);
}

.share-card-title {
  font-size: 22px;
  font-weight: 700;
  margin: 20px 0 12px;
  line-height: 1.4;
  color: #111;
}

.share-card-date {
  font-size: 13px;
  color: #888;
  margin-bottom: 20px;
}

.share-card-excerpt {
  font-size: 15px;
  line-height: 1.7;
  color: #555;
  background: #f8f9fa;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 24px;
  border-left: 4px solid #ddd;
}

.share-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.share-info {
  display: flex;
  flex-direction: column;
}

.share-site-name {
  font-weight: 700;
  font-size: 16px;
  color: #333;
}

.share-site-url {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.share-qr img {
  width: 80px;
  height: 80px;
  display: block;
}

/* 弹窗内的图片展示 */
.modal.share-modal img.generated-share-img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 16px;
  display: block;
}

/* 分享弹窗的按钮组 */
.share-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}
.share-actions button {
  flex: 1;
}

/* ========== 统一的分段控制器 (Unified Segmented Control) ========== */

.segmented-control {
  position: relative;
  display: inline-flex; /* 改为 inline-flex 以便自适应内容 */
  background: light-dark(rgba(118, 118, 128, 0.12), rgba(118, 118, 128, 0.24));
  border-radius: 9px;
  padding: 2px;
  box-sizing: border-box;
  isolation: isolate; /* 建立层叠上下文 */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* 默认高度较小 (设置页风格) */
  min-height: 32px; 
}

/* 滑动的背景块 (Glider) */
.segment-glider {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0; 
  width: 0; /* 由 JS 计算 */
  background: light-dark(#ffffff, #636366);
  border-radius: 7px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
  z-index: 1; 
  pointer-events: none; /* 确保点击能穿透到按钮 */
  
  transition: 
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 按钮选项 */
.segmented-control button {
  flex: 1;
  position: relative;
  z-index: 2; /* 文字在滑块之上 */
  border: none;
  background: transparent;
  color: var(--word-color);
  font-family: inherit;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  border-radius: 7px;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  
  /* 默认尺寸 */
  padding: 4px 12px;
  font-size: 13px;
  min-width: 60px;
}

/* 悬停非激活项 */
.segmented-control button:hover:not(.active) {
  opacity: 0.6;
}

/* 激活状态 */
.segmented-control button.active {
  font-weight: 600;
  opacity: 1;
}

/* ========== 大尺寸 ========== */
.segmented-control.large {
  display: flex; /* 登录页通常需要撑满容器 */
  width: 100%; 
  padding: 4px; 
  border-radius: var(--border-radius-md);
  margin-bottom: 24px;
  height: auto;
  background: light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.1));
}

.segmented-control.large .segment-glider {
  top: 4px; 
  bottom: 4px;
  border-radius: var(--border-radius-sm);
  background: light-dark(#fff, #444);
}

.segmented-control.large button {
  padding: 10px 0; 
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--border-radius-sm);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .segmented-control button {
    padding: 6px 10px;
  }
}

/* ========== 博客搜索框样式 ========== */
.search-container {
  margin: 10px 0 30px;
  width: 100%;
  opacity: 0;
  /* 复用现有的进场动画 */
  animation: blurFadeUp 1.2s ease forwards; 
}

.search-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.search-wrapper input {
  width: 100%;
  box-sizing: border-box; /* 确保 padding 不会撑大宽度 */
  padding: 14px 16px 14px 48px; /* 左侧留出图标空间 */
  font-family: var(--global-font);
  font-size: 16px;
  color: var(--word-color);
  
  /* SatinAu Design 玻璃拟态背景 */
  background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  border: 1px solid light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12));
  border-radius: var(--border-radius-lg);
  backdrop-filter: var(--filter-blur);
  -webkit-backdrop-filter: var(--filter-blur);
  
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  
  /* 移除默认外观 */
  -webkit-appearance: none;
  appearance: none;
}

/* 聚焦状态：轻微放大、提亮、主色描边 */
.search-wrapper input:focus {
  outline: none;
  background: light-dark(rgba(255, 255, 255, 0.45), rgba(60, 60, 60, 0.4));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: scale(1.02);
  border-color: var(--primary-color);
}

.search-wrapper input::placeholder {
  color: light-dark(#888, #aaa);
  font-weight: 500;
}

/* 搜索图标样式 */
.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: light-dark(#666, #aaa);
  pointer-events: none; /* 让点击穿透图标到 input */
  transition: color 0.3s ease;
  fill: none;
}

/* 当输入框聚焦时，高亮图标 */
.search-wrapper:focus-within .search-icon {
  color: var(--primary-color);
}

/* ========== 设置页面 - 顶部操作区 ========== */
.action-container {
  max-width: 960px;
  margin: 0 auto 10px;
  display: flex;
  justify-content: center;
  /* 进场动画复用 */
  opacity: 0;
  animation: blurFadeUp 1.2s ease forwards;
  animation-delay: 0.1s;
}

.reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  
  /* 红色半透明玻璃态背景 */
  background: light-dark(rgba(255, 59, 48, 0.1), rgba(255, 69, 58, 0.15));
  border: 1px solid light-dark(rgba(255, 59, 48, 0.2), rgba(255, 69, 58, 0.2));
  color: light-dark(#ff3b30, #ff453a);
  
  border-radius: 99px; /* 全圆角胶囊形 */
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.1);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.reset-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.4s ease;
}

.reset-btn:hover {
  background: light-dark(rgba(255, 59, 48, 0.2), rgba(255, 69, 58, 0.3));
  box-shadow: 0 6px 16px rgba(255, 59, 48, 0.2);
  transform: translateY(-2px);
}

.reset-btn:hover svg {
  transform: rotate(-180deg);
}

.reset-btn:active {
  transform: scale(0.96);
}

/* ========== Hero Animation (卡片放大转场) ========== */

/* ========== 列表动画冲突 (强制静止) ========== */
/* 当列表容器有 disable-animation 类时，强制所有卡片瞬间显示且无动画 */
.contact-wrapper.disable-animation .contact-card {
  animation: none !important;       /* 禁止关键帧动画 */
  transition: none !important;      /* 禁止过渡效果 */
  opacity: 1 !important;            /* 强制不透明 */
  transform: translate(0, 0) scale(1) !important; /* 强制归位 */
  filter: none !important;          /* 去除模糊 */
}

/* Hero Overlay 基础样式微调 */
.hero-overlay {
  position: fixed;
  z-index: 9000;
  background: light-dark(rgba(255,255,255,0.5),rgba(30,30,30,0.5));
  backdrop-filter: blur(28px) saturate(220%);
  -webkit-backdrop-filter: blur(28px) saturate(220%);
  border: 1px solid light-dark(rgba(255, 255, 255, 0.25), rgba(255,255,255,0.12));
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  transform-origin: top left;
  pointer-events: none;
  overflow: hidden;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 确保收起状态下文字左对齐，与卡片一致 */
  align-items: flex-start; 
  /* 这里的 padding 对应卡片的 padding: 20px 18px */
  padding: 20px 18px; 
  box-sizing: border-box;

  transition: 
    top 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease,
    padding-top 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 替身层内的文字样式 */
.hero-overlay .text-container {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.hero-overlay .hero-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--word-color);
  margin-bottom: 4px;
}
.hero-overlay .hero-date {
  font-size: 12px;
  color: light-dark(#666, #aaa);
}

/* 确保 Hero 展开后的样式与上面完全一致，避免跳动 */
.hero-overlay.expanded {
  border-radius: 0;
  background: light-dark(rgba(255,255,255,0.5),rgba(30,30,30,0.5));
  box-shadow: none;
  justify-content: flex-start;
  /* 关键：必须与 #postView 的 padding-top 完全一致 */
  padding-top: max(30px, calc(env(safe-area-inset-top) + 20px)) !important;
  padding-left: 20px;
  padding-right: 20px;
}

/* 展开时隐藏替身层内的文字（因为文章页原本有标题） */
.hero-overlay.expanded .text-container {
  opacity: 0; 
}

/* 原卡片在动画时隐藏 */
.contact-card.is-animating {
  opacity: 0 !important;
}

.md-article.hero-enter {
  animation: none;
  opacity: 0;
  transition: opacity 0.4s ease 0.3s; /* 延迟等待 Hero 动画完成 */
}
.md-article.hero-enter.show {
  opacity: 1;
}

body.hero-open {
  overflow: hidden; /* 锁住滚动条，防止动画期间用户乱滚 */
}

/* 优化 Modal 基础样式，使其默认居中 */
.modal {
  /* 保持原有样式... */
  transform-origin: center center; /* 关键：确保缩放从中心开始 */
  will-change: transform, opacity; /* 性能优化 */
}

/* Hero 动画激活时的状态 */
.modal.hero-animating {
  /* 移除默认的 transition，改由 JS 控制 */
  transition: none; 
  /* 确保 overflow hidden，防止内容在缩放时溢出容器圆角 */
  overflow: hidden; 
}

/* 内容容器 */
.modal-content-wrapper {
  width: 100%;
  height: 100%;
  /* 确保内容也能平滑淡入 */
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* ========== 首页 Featured 布局 ========== */

/* 桌面端布局：左侧两小卡，右侧一大卡 */
.featured-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr; /* 左侧占1份，右侧占1.6份 */
  gap: 18px;
  margin-top: 30px;
}

.featured-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.featured-left .contact-card {
  flex: 1;
  margin-top: 0 !important;
}

/* 泽凌大卡片样式 */
.big-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 内容靠下 */
  align-items: flex-start;
  padding: 30px !important;
  min-height: 200px;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* 增加阴影，保证文字在图片上可见 */
}

/* 强制白色文字 */
.big-card .label, 
.big-card .value {
  color: #fff !important;
  z-index: 2;
  position: relative;
}
.big-card .label { opacity: 0.9; }

.big-card .icon {
  z-index: 2;
  background: rgba(255,255,255,0.2) !important;
  backdrop-filter: blur(10px);
  margin-bottom: auto; /* 图标顶到上面 */
}

/* 背景轮播层 */
.card-bg-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  transition: background-image 1s ease-in-out, transform 8s ease;
  transform: scale(1);
}

.card-bg-slideshow.zooming {
  transform: scale(1.1); /* 缓慢放大效果 */
}

/* 遮罩层 */
.card-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
  z-index: 1;
}

/* ========== 移动端适配 ========== */
@media (max-width: 768px) {
  .featured-grid {
    grid-template-columns: 1fr; /* 改为单列布局 */
    gap: 12px;
  }
  
  /* 左侧变为第一行，两个小卡片并排显示 */
  .featured-left {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 12px;
  }

  /* 泽凌大卡片变为第二行 */
  .big-card {
    min-height: 160px;
  }
  
  /* 极窄屏幕下小卡片也改为堆叠 */
  @media (max-width: 400px) {
    .featured-left {
      grid-template-columns: 1fr;
    }
  }
}

/* ========== 通用网页/Iframe 弹窗样式 ========== */

/* 弹窗容器基础样式 */
.modal.web-modal {
  /* 基础尺寸：使用 dvh 适配移动端动态高度 */
  width: 90vw;
  height: 85vh; 
  height: 85dvh; /* 适配移动端浏览器工具栏 */
  
  max-width: 1200px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border-radius: var(--border-radius-lg);
  
  /* 确保过渡动画包含所有变化的属性 */
  transition: 
    width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.4s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), /* 关键：平滑过渡 transform */
    opacity 0.4s ease;
}

/* 内部 iframe */
.doc-container {
  width: 100%;
  height: 100%;
  position: relative;
}

iframe#webFrame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #fff; /* 避免加载时透明 */
}

/* 悬浮按钮组 */
.doc-controls {
  position: absolute;
  /* 适配 iPhone 底部横条 */
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  right: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 20; /* 保证在 iframe 之上 */
}

.doc-float-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.2));
  background: light-dark(rgba(255,255,255,0.8), rgba(40,40,40,0.8));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: var(--word-color);
  padding: 0;
  /* 防止触摸时产生高亮背景块 */
  -webkit-tap-highlight-color: transparent;
}

.doc-float-btn:hover {
  transform: scale(1.1);
  background: var(--primary-color);
  color: white;
  border-color: transparent;
}

.doc-float-btn:active {
  transform: scale(0.95);
}

.doc-float-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.doc-float-btn.close-btn:hover {
  background: light-dark(#ff3b30, #ff453a);
}

/* 全屏模式样式 (覆盖默认 Modal 样式) */
.modal.web-modal.fullscreen-mode {
  /* 强制铺满屏幕 */
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important; /* 解决移动端遮挡 */
  max-width: none !important;
  
  /* 强制定位到左上角 */
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  transform: none !important; 
  border-radius: 0 !important;
  border: none !important;
  z-index: 10000; /* 极高层级，覆盖导航栏 */
}

/* 移动端适配微调 */
@media (max-width: 768px) {
  .modal.web-modal {
    /* 非全屏状态下，稍微留点边距 */
    width: 92vw;
    height: 80dvh; 
  }
  
  .doc-controls {
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

/* ========== 网站应用内通知 (In-App Notification) ========== */
.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 0; 
  z-index: 10000;
  width: 320px;
  max-width: calc(100vw - 40px);
  pointer-events: none;
}

.satin-notify-card {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  
  /* === 初始状态 (折叠) === */
  /* 高度与边距设为 0，实现“新卡片挤开旧卡片”的效果 */
  max-height: 0;
  padding: 0 16px; /* 上下内边距为0 */
  margin-bottom: 0;
  opacity: 0;
  border-width: 0; /* 初始无边框，防止出现一条细线 */
  transform: translateX(30px) scale(0.95);
  
  /* 基础样式 */
  border-style: solid;
  border-color: light-dark(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  border-radius: var(--border-radius-lg);
  background: light-dark(rgba(255, 255, 255, 0.65), rgba(30, 30, 30, 0.65));
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: var(--word-color);
  overflow: hidden; /* 必须隐藏溢出，否则折叠时内容会露出来 */
  cursor: default;
  box-shadow: 0 0 0 rgba(0,0,0,0); /* 初始无阴影 */
  
  /* 所有布局属性都要参与过渡 */
  transition: 
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), /* 弹性位移 */
    max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), /* 高度展开 */
    padding 0.4s ease,
    margin-bottom 0.4s ease,
    border-width 0.1s ease, /* 边框快速出现 */
    box-shadow 0.4s ease;
}

/* === 显示状态 (展开) === */
.satin-notify-card.show {
  opacity: 1;
  transform: translateX(0) scale(1);
  
  /* 恢复正常布局尺寸 */
  max-height: 200px; /* 设置一个足够大的值以容纳内容 */
  padding: 16px;
  margin-bottom: 12px; /* 卡片之间的间距 */
  border-width: 1px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 0 10px rgba(255, 255, 255, 0.1);
}

/* === 隐藏/离场状态 (再次折叠) === */
/* 这样当通知消失时，下方的通知会自动滑上来填补空位 */
.satin-notify-card.hiding {
  opacity: 0;
  transform: translateX(30px) scale(0.95);
  max-height: 0;
  padding: 0 16px;
  margin-bottom: 0;
  border-width: 0;
  box-shadow: none;
}

/* 装饰性光条 */
.satin-notify-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--primary-color);
  opacity: 0.8;
}

.notify-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: cover;
  background: light-dark(#f0f0f0, #444);
  /* 防止在高度缩放时图片变形 */
  min-height: 36px; 
}

.notify-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0; 
  /* 确保文字在动画过程中不换行跳动 */
  width: 100%; 
}

.notify-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notify-body {
  font-size: 13px;
  opacity: 0.8;
  line-height: 1.4;
  word-wrap: break-word;
}

.notify-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--word-color);
  opacity: 0.4;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  padding: 0;
  z-index: 2;
}

.notify-close:hover {
  opacity: 1;
  background: light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.1));
}

.notify-close svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .notification-container {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: 92vw;
  }
  
  .satin-notify-card {
    /* 移动端从上方淡入，而不是侧滑 */
    transform: translateY(-20px) scale(0.95);
  }
  
  .satin-notify-card.show {
    transform: translateY(0) scale(1);
  }
  
  .satin-notify-card.hiding {
    transform: translateY(-20px) scale(0.9);
  }
}