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

/* ========== 全局字体设置 ========== */
@font-face {
  font-family: 'MiSans';
  src: url('../source/font/MiSans VF.ttf') format('truetype');
  font-weight: 100 900; /* 支持可变字重 */
  font-style: normal;
  font-display: swap;
}

/* 强制全站使用 MiSans */
* {
  font-family: 'MiSans', sans-serif !important;
  font-size-adjust: 0.54;
}

/* ========== 全局基础 ========== */
:root{
  --nav-height: 68px; /* 底栏高度，用于预留滚动空间 */
  --primary-color: #007aff;
  --primary-dark: #0a84ff;
  --bg-light: rgba(255,255,255,0.6);
  --bg-dark: rgba(40,40,40,0.4);
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;
  --transition-standard: 0.3s ease;
  --custom-cursor: url('../source/image/cursor.Daeq1_K3.cur') 12 4, auto;
}

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

body {
  margin: 0;
  padding: 0;
  color: light-dark(#111, #f5f5f5);
  opacity: 0;
  transition: opacity 0.8s ease;
  overflow-x: hidden; /* 禁止横向滚动 */
  width: 100%;
  box-sizing: border-box;
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 18px);
  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); /* 结束时原大小 */
  }
}

/* 标题和 Logo 一行显示 */
.title-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 30px;

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

  img {
    max-height: 90px;
    width: auto;
    margin: 0;
    margin-top: 5px;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.15));
  }
}

/* ========== Section 通用 ========== */
section {
  padding: 30px;
  max-width: 960px;
  margin: auto;
  text-align: center;
  
  p { 
    font-size: 1.1rem; 
    line-height: 1.6; 
    margin: 8px 0; 
    opacity: 0; 
    animation: blurFadeUp 1.2s ease forwards;
    animation-delay: 0.3s;
  }
}

/* 为四行文字设置递增延迟，在标题动画后依次出现 */
body#index-page section p {
  &: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); /* 结束时原位置 */
  }
}

body#index-page section:nth-of-type(2) h2 {
  margin-top: 100px;
}

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 30px;
  }
  
  section:first-of-type {
    margin-top: 40px;
    padding-bottom: 60px;
  }
  
  body#index-page section:nth-of-type(2) h2 {
    margin-top: 120px;
  }
}

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;
  min-width: 260px; max-width: 420px; 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: 18px;
  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 {
  transform: translateY(-10px) scale(1.03) rotate3d(1,1,0,0.8deg);
  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.96); }

.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:12px;
  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:rgb(230, 227, 227);}
  img{width:22px;height:22px;}
}
.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:light-dark(#111, #f5f5f5);}

/* 渐变 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(3) {
    .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: 16px;
  font-size: 15px;
  font-weight: 500;
  background: light-dark(rgba(255,255,255,0.25), rgba(30,30,30,0.5));
  color: light-dark(#111, #f5f5f5);
  -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-radius: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  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: light-dark(#111, #f5f5f5);

  &.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
  }
}

/* iOS 弹窗（复用 .modal） */
.ios-alert {
  width: 300px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25), inset 0 0 30px rgba(255,255,255,0.12);
  p { margin: 0 0 14px; font-size: 15px; font-weight: 500; color: light-dark(#111, #f5f5f5); }

  /* 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: 14px;
    background: light-dark(rgba(255,255,255,0.6), rgba(40,40,40,0.6));
    color: light-dark(#007aff, #0a84ff);
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease, background 0.3s ease;
    &.cancel { color: light-dark(#ff3b30, #ff453a); }
    &.confirm { color: #007aff; }
    &: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: 12px;
    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: 14px;
      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: 12px; }
    p { margin-top: 12px; font-size: 15px; font-weight: 600; color: light-dark(#111, #f5f5f5); }
  }
}

/* ========== 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: 22px;
  background: light-dark(rgba(255,255,255,0.28),rgba(30,30,30,0.5));
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  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: 14px;
    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: light-dark(#007aff, #0a84ff);
    }

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

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

  .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 8px 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;
    }
    
    .nav-cn,
    .nav-en {
      display: inline-block;
    }
    
    /* 调整字体大小以适应横向布局 */
    .nav-cn {
      font-size: 16px;
    }
    
    .nav-en {
      font-size: 14px;
    }
  }
}

/* 头像基础样式 */
.nav-avatar {
  display: none; /* 默认隐藏 */
}

/* 桌面端显示头像 */
@media (min-width: 768px) {
  .nav-avatar {
    display: block;
    margin-right: 12px; /* 与导航项保持间距 */
  
    img {
      width: 36px;
      height: 36px;
      border-radius: 50%; /* 圆形头像 */
      object-fit: cover;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
  }
  
  /* 调整导航栏布局以容纳头像 */
  .bottom-nav {
    padding-left: 16px;
    padding-right: 16px;
  }
}

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

.more-btn {
  /* 圆形SatinAu Design材质承托 */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: light-dark(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.2)); /* 半透明背景 */
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  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: 2px 0 0 12px; /* 靠右对齐 */
  /* 移除上下移动效果，仅保留必要过渡 */
  transition: background 0.2s ease;

  :hover {
    background: light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.3));
  }

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

/* 下拉菜单样式 */
.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: 16px; /* 与导航栏风格统一的圆角 */
  box-shadow: 0 12px 32px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
  padding: 8px 0;
  transform-origin: top right;
  transform: scale(0.8) translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
  z-index: 3000;

  /* 菜单显示状态 */
  &.show {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* 菜单项样式优化 */
.dropdown-item {
  display: block;
  padding: 12px 16px;
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s ease;

  &:hover {
    background: light-dark(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08)); /* 半透明高亮 */
  }
}

@media (max-width: 767px) {
  .more-menu-container {
    display: none !important;
  }
}

/* 移动端导航栏手势提示线 */
@media (max-width: 767px) {
  .bottom-nav {
    padding-top: 24px; /* 为提示线预留空间 */
  }
  
  /* 手势提示线样式 */
  .bottom-nav::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
  }

  /* 移动端专用更多菜单 */
  .mobile-more-menu {
    position: fixed;
    left: 50%;
    bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
    transform: translateX(-50%) translateY(20px) scale(0.95);
    width: min(90vw, 320px);
    max-height: 0;
    overflow: hidden;
    background: light-dark(rgba(255, 255, 255, 0.28), rgba(30, 30, 30, 0.5));
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12));
    border-radius: 22px;
    box-shadow: 0 -18px 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: 14px;
      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: rgba(255,255,255,0.6);
        color: #007aff;
      }
    }

    /* 菜单展开状态 - 流畅的弹出动画 */
    &.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;
      }
    }

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

    &.show::before {
      opacity: 1;
    }
  }

  /* 确保原有三个点按钮在移动端保持隐藏 */
  .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;
  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: light-dark(#007aff, #0a84ff);
    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: #007aff; text-decoration: none; 
    &:hover { text-decoration: underline; }}
  img { max-width: 100%; height: auto; border-radius: 12px; }
  code { padding: 0.2em 0.4em; border-radius: 6px; background: light-dark(rgba(0,0,0,0.06), rgba(255,255,255,0.12)); }
  pre { overflow: auto; padding: 14px; border-radius: 12px; 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: 8px;
  }
}

/* 二级页面淡入动画 */
.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风格样式选择器 */
.style-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  margin: 12px auto 0;
  border-radius: 22px;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  background: light-dark(rgba(255, 255, 255, 0.28),rgba(30, 30, 30, 0.5));
  border: 1px solid light-dark(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.12));
  box-shadow: 0 12px 32px rgba(0,0,0,0.12), inset 0 0 20px rgba(255,255,255,0.08);

  /* 隐藏原生单选按钮圆圈 */
  input[type="radio"] {
    display: none;

    /* 选中状态 - 半透明白色遮罩效果 */
    &:checked + label {
      background: light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.18)); /* 半透明白色遮罩 */
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      color: light-dark(#007aff, #0a84ff);
      box-shadow: 0 4px 12px light-dark(rgba(0, 122, 255, 0.15), rgba(10, 132, 255, 0.2));
    }
  }

  /* 选项标签基础样式 */
  label {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 16px;
    color: light-dark(#333, #f5f5f5);
    transition: all 0.3s ease;

    /* 未选中状态悬停效果 */
    &:hover:not(:has(~ input:checked)) {
      background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08));
    }
  }
}

/* 登录按钮 - SatinAu Design 风格 */
#loginBtn {
  background: light-dark(rgba(255, 255, 255, 0.28), rgba(40, 40, 40, 0.6));
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12));
  border-radius: 14px;
  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: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  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);
  }
}

/* 登录弹窗 - SatinAu Design 风格 */
#authModal.overlay {
  /* 保持现有遮罩样式，与.overlay类一致 */
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#authModal .modal {
  /* 统一背景和模糊效果 */
  background: light-dark(rgba(255, 255, 255, 0.3), rgba(30, 30, 30, 0.45)); /* 与首页.modal一致 */
  -webkit-backdrop-filter: blur(24px) saturate(180%); /* 统一模糊参数 */
  backdrop-filter: blur(24px) saturate(180%);
  border-radius: 20px; /* 保持一致的圆角 */
  border: 1px solid light-dark(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.12)); /* 统一边框 */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); /* 统一阴影 */
  padding: 24px;
  min-width: 300px;
  max-width: 500px;
  /* 统一动画过渡 */
  transition: all 0.4s cubic-bezier(0.22, 1.4, 0.36, 1); /* 与首页弹窗动画曲线一致 */
  /* 初始状态与其他弹窗一致 */
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9); /* 初始缩放 */
}

#authModal .modal.show {
  /* 显示状态与其他弹窗一致 */
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1); /* 显示时的缩放 */
}

/* 弹窗内按钮样式统一 */
#authModal .tab-btn,
#emailLoginBtn,
#signupBtn,
#githubLoginBtn,
#googleLoginBtn,
#closeAuthModal {
  background: rgba(255, 255, 255, 0.6); /* 与iOS弹窗按钮背景一致 */
  border: none;
  border-radius: 14px; /* 统一圆角 */
  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: rgba(255, 255, 255, 0.75); /* 与iOS弹窗按钮hover一致 */
}

/* 统一点击效果 */
#authModal .tab-btn:active,
#emailLoginBtn:active,
#signupBtn:active,
#githubLoginBtn:active,
#googleLoginBtn:active,
#closeAuthModal:active {
  transform: scale(0.95); /* 与iOS弹窗按钮点击缩放一致 */
  filter: brightness(0.9);
}

/* 深色模式下弹窗样式统一 */
@media (prefers-color-scheme: dark) {
  /* 弹窗内按钮深色模式样式统一 */
  #authModal .tab-btn,
  #emailLoginBtn,
  #signupBtn,
  #githubLoginBtn,
  #googleLoginBtn,
  #closeAuthModal {
    background: rgba(40, 40, 40, 0.6); /* 与iOS弹窗按钮深色模式一致 */
    color: #f5f5f5;
  }
  
  #authModal .tab-btn.active {
    background: rgba(60, 60, 60, 0.75); /* 与活跃状态统一 */
    color: #0a84ff;
  }
  
  #authModal .tab-btn:hover,
  #emailLoginBtn:hover,
  #signupBtn:hover,
  #githubLoginBtn:hover,
  #googleLoginBtn:hover,
  #closeAuthModal:hover {
    background: rgba(60, 60, 60, 0.75); /* 与hover状态统一 */
  }
}

/* 输入框样式与首页弹窗统一 */
#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 rgba(255, 255, 255, 0.3); /* 统一边框 */
  border-radius: 12px; /* 与其他输入框圆角一致 */
  background: rgba(255, 255, 255, 0.2); /* 统一背景 */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 15px;
  color: light-dark(#333, #f5f5f5);
}

/* 深色模式输入框统一 */
@media (prefers-color-scheme: dark) {
  #authModal input[type="email"],
  #authModal input[type="password"] {
    background: rgba(40, 40, 40, 0.5); /* 与深色模式下其他输入框一致 */
    border-color: rgba(255, 255, 255, 0.15);
  }
}

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

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

#downloadArticle {
  margin-left: auto;
}

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

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

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

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

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

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

    &:hover {
      transform: scale(1.03);
    }
  }
}

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

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

/* ========== 设置页面 - 功能开关 ========== */
.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;
  border-radius: var(--border-radius-md, 12px);
  background: light-dark(rgba(255, 255, 255, 0.2), rgba(30, 30, 30, 0.4));
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid light-dark(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.12));
}

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

  .style-tooltip {
    position: static; /* Reset tooltip positioning */
    opacity: 1;
    transform: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    font-size: 12px;
    font-weight: 400;
    color: light-dark(#666, #aaa);
    pointer-events: none;
    white-space: normal;

    &::after {
      display: none; /* Hide tooltip arrow */
    }
  }
}

/* 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 var(--transition-standard, 0.3s ease);

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

/* Styles for the "On" state */
input:checked + .switch-slider {
  background-color: light-dark(var(--primary-color, #007aff), var(--primary-dark, #0a84ff));

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