/*
  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://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&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); /* 当前应用字体 */
}

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

/* 替换手型光标 */
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;
  overflow-x: hidden; /* 禁止横向滚动 */
  width: 100%;
  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); }
}

/* ========== 页面切换动画（作用于 .page） ========== */
.page {
  min-width: 100vw; /* 确保页面宽度正确 */
  box-sizing: border-box;
  will-change: transform, opacity;
  transform: translateZ(0); /* 触发GPU加速 */

  &.slide-out-left,
  &.slide-out-right,
  &.slide-in-left,
  &.slide-in-right {
    will-change: transform; /* 提前优化 */

    &.finished {
      will-change: auto; /* 动画结束后释放资源 */
    }
  }

  &.slide-out-left  { animation: slideOutLeft  0.5s ease forwards; }
  &.slide-out-right { animation: slideOutRight 0.5s ease forwards; }
  &.slide-in-left   { animation: slideInLeft   0.5s ease forwards; }
  &.slide-in-right  { animation: slideInRight  0.5s ease forwards; }
}

@keyframes slideOutLeft  { from{transform:translateX(0);   opacity:1;} to{transform:translateX(-30%); opacity:0;} }
@keyframes slideOutRight { from{transform:translateX(0);   opacity:1;} to{transform:translateX(30%);  opacity:0;} }
@keyframes slideInLeft   { from{transform:translateX(-30%);opacity:0;} to{transform:translateX(0);    opacity:1;} }
@keyframes slideInRight  { from{transform:translateX(30%); opacity:0;} to{transform:translateX(0);    opacity:1;} }

/* ========== 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.28), 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;

  &.visible {
    animation: staggerFade 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
}

@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;
}
.contact-card:hover::after {
  left: -20%;
  opacity: 1;
}

.contact-card: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%);
}
.contact-card:active { transform: scale(0.98) !important; }

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

/* Icon */
.icon { 
  width: 40px;
  height: 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--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;}
}
.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); /* 深色图标背景 */
  }
  .contact-card::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;
        }
      }
      
      /* 调整交互效果适配小卡片 */
      &:hover {
        transform: translateY(-6px) scale(1.05);
      }
    }
  }
}

/* ========== Footer ========== */
footer{
  text-align:center;
  padding:30px 10px;
  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 风格提示 & 弹窗 ========== */
.copied-tip {
  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.25), 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.25), rgba(60,60,60,0.25));
  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.28),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;

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

/* 桌面端导航栏调整 - 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) {
  .nav-avatar {
    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);
  }
}

/* 下拉菜单样式 */
.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.28), 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;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* 确保内容不会在动画时被裁剪 */
    padding: 0;

    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{
        padding: 16px 24px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        text-decoration: none;
        display: block;
        transition: all 0.3s ease;
        text-align: center;
        background: light-dark(rgba(255,255,255,0.6), rgba(255,255,255,0.18));
        color: var(--primary-color);
      }
    }

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

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

      &:last-child {
        border-bottom: none;
      }

      /* 菜单项悬停效果 */
      &:hover {
        background: light-dark(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.18));
        transform: translateY(-2px) scale(1.02);
      }
    }

    /* 菜单项动画 - 错开显示 */
    &.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;
      }
    }
  }

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

/* ===================== iOS-like parallel page transitions (3 pages) ===================== */
.page { will-change: transform, opacity; 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;
  }
}

/* ======== 博客 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);
  }
}

/* 二级页面淡入动画 */
.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.28), 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.28), 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.28), 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;
}

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

/* ================= 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.28), 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;
}

/* 图片画廊样式 */
.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);
    }
    }
  }
}

.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.28), 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.28), 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;
}

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

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

/* 1. 外层容器：材质衬托 (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;
}

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

/* 3. 圆形按钮样式 */
.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;
}

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

/* 5. 交互效果 (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);
}