/* Make Online/在线游戏 the first item in navbar links without editing each page */
.nav-center a[data-i18n="nav.online"] {
  order: -1;
}
/* ========================================
   GROW A GARDEN - 布局结构优化
   ========================================
   
   布局结构：
   1. <body> - flexbox垂直布局容器
   2. <header> - 固定导航栏
   3. <main> - 主要内容区域 (flex: 1)
   4. <footer> - 页脚 (margin-top: auto)
   
   主要区块：
   - .hero - 英雄区域
   - .live-stats-section - 实时统计
   - .stats-section - 里程碑统计
   - .map-section - 地图区域
   - .tips-section - 提示区域
   - .community-section - 社区区域
   ======================================== */

/* 基础布局结构 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #ffffff;
    background: var(--bg-dark);
    overflow-x: hidden;
    width: 100%;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* 主要内容区域占据剩余空间 */
.hero, .live-stats-section, .stats-section, .map-section, .tips-section, .online-section, .community-section {
    flex: 1 0 auto;
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
    z-index: 1;
    /* 添加section之间的视觉分隔 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 最后一个section不需要底部边框 */
.online-section {
    border-bottom: none;
}

/* 增强section之间的视觉层次 */
.hero + .live-stats-section,
.live-stats-section + .stats-section,
.stats-section + .map-section,
.map-section + .tips-section,
.tips-section + .online-section,
.online-section + .community-section {
    margin-top: 1rem; /* 添加额外的顶部间距 */
}

/* 优化section内部元素的间距一致性 */
.hero-glass > * + *,
.tip-card > * + *,
.milestone-card > * + *,
.stat-item > * + * {
    margin-top: 1rem; /* 统一内部元素的间距 */
}

/* 确保标题和内容之间有足够的呼吸空间 */
.hero h1 + .hero h2,
.hero h2 + .hero-subtitle,
.tip-card h3 + ul,
.milestone-card .milestone-date + .milestone-count {
    margin-top: 1.5rem;
}

/* 统一section间距 - 一致的布局 */
.hero {
    padding: 3rem 2rem 2rem 2rem; /* Hero section 顶部多一些空间 */
}

.live-stats-section {
    padding: 2.5rem 2rem 2.5rem 2rem; /* 上下一致 */
}

.stats-section {
    padding: 2.5rem 2rem;
}

.map-section {
    padding: 2.5rem 2rem;
}

.tips-section {
    padding: 2.5rem 2rem;
}

.online-section {
    padding: 2.5rem 2rem;
}

.community-section {
    padding: 2.5rem 2rem 3rem 2rem; /* 底部多一些空间 */
}

/* Footer自动贴在底部 */
footer {
    flex-shrink: 0;
    margin-top: auto;
    width: 100%;
}

/* 移动端视口适配 */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* 确保移动端滚动流畅 */
html, body {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* 移动端触摸优化 */
button, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 防止移动端缩放 */
input[type="number"] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

/* 移动端按钮优化 */
.action-btn, .tab, .mutation-chip {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

/* 层级管理 */
header {
    position: fixed;
    top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(35, 39, 42, 0.95);
  backdrop-filter: blur(10px);
}

/* 攻略页面导航栏样式 */
.nav-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: rgba(35, 39, 42, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* 攻略页面主体样式 */
.guide-page {
    position: relative !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
}

.guide-page .bg-blur {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0 !important;
    background: url('grow-bg.jpg') center center/cover no-repeat !important;
    opacity: 0.3 !important;
    filter: blur(2px) !important;
}

.guide-page .content-wrapper {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 60px !important; /* 为固定导航栏留出空间 */
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    text-decoration: none;
    transition: var(--transition);
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.logo:hover {
    transform: scale(1.05);
}

nav a {
    color: var(--text-light);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
    margin: 0 0.25rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

nav a:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateY(-2px);
}

.discord-btn {
    background: var(--primary-blue);
    color: white !important;
}

.discord-btn:hover {
    background: #404eed !important;
}

/* 英雄区域 */
.hero {
  position: relative;
  z-index: 1; /* 降低z-index，避免覆盖其他区块 */
  margin-top: 60px; /* 为固定导航栏留出空间 */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 2rem 2rem 2rem; /* 统一上下内边距，移除多余大空白 */
  min-height: auto; /* 使用自动高度 */
  margin-bottom: 2rem; /* 统一区块间距，避免超大空白 */
  overflow: visible; /* 确保内容可见 */
  border-bottom: none; /* 移除底部边框 */
  isolation: isolate; /* 创建新的层叠上下文 */
  flex: 1 !important;
}

.hero-blur-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 0;
  background: none; /* 去掉毛玻璃背景 */
  backdrop-filter: none; /* 去掉模糊效果 */
  border-radius: 20px;
}

.hero-content {
  position: relative;
  z-index: 100;
    width: 100%;
  max-width: 1200px;
}

.hero-glass, .calculator-card {
    position: relative;
    z-index: 2; /* 降低z-index，但保持在背景之上 */
    width: 100%;
    min-height: auto; /* 使用自动高度，让内容决定高度 */
    background: rgba(255, 255, 255, 0.95); /* 增加不透明度，减少背景干扰 */
    backdrop-filter: blur(20px); /* 添加毛玻璃效果 */
    -webkit-backdrop-filter: blur(20px); /* Safari支持 */
    border-radius: 20px;
    padding: 2rem 1.5rem 2rem 1.5rem; /* 减少底部padding */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); /* 增强阴影效果 */
    border: 1px solid rgba(255, 255, 255, 0.4); /* 更明显的边框 */
    max-width: 1600px; /* 增加最大宽度 */
    margin: 0 auto 2rem auto; /* 减少底部margin */
    overflow: visible; /* 允许内容自然流动 */
}

.hero h1 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 0.6rem 0; /* 更紧凑的下间距 */
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.02em;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hero h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--accent-green);
    margin: 0 0 1rem 0; /* 缩小与下面内容的间距 */
    text-align: center;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    text-align: center;
    margin: 0 0 1rem 0; /* 与下方控件更紧凑 */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 计数器样式 */
.counter-container {
    background: none !important;
    box-shadow: none;
    border-radius: 1.2rem;
    padding: 0;
    margin-top: 2.2rem;
    width: 100%;
    max-width: 340px;
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.counter {
    background: none !important;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    text-align: center;
}

.counter h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--primary-blue);
    text-align: center;
}

.player-count {
    font-size: 4rem;
    font-weight: bold;
    color: var(--primary-blue);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    margin: 1rem 0;
    animation: pulse 2s infinite;
    text-align: center;
}

.update-time {
    color: var(--primary-dark);
    font-size: 0.9rem;
    text-align: center;
}

.trend-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

#trend-arrow {
    font-size: 1.2rem;
    color: var(--accent-yellow);
}

#trend-text {
    color: var(--accent-yellow);
    font-weight: bold;
}



.timeline-container {
    max-width: 800px;
    margin: 4rem auto 6rem;
    background: none !important;
    text-align: center;
}

.milestone-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem; /* 减少卡片之间的间距，让布局更紧凑 */
    max-width: 1200px;
    margin: 4rem auto 3rem auto; /* 减少上下margin，让布局更协调 */
    position: relative;
    z-index: 1;
    text-align: center;
}

.milestone-card {
    background: linear-gradient(135deg, var(--primary-blue), #404eed);
    color: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.milestone-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.milestone-date {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.milestone-count {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.milestone-desc {
    font-size: 1rem;
    opacity: 0.9;
}

/* 地图区域 */
.map-section {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    flex: 1 !important;
}

.map-section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2.5rem; /* 统一间距 */
    color: #23272a !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px;
    text-shadow: none !important;
    background: none !important;
    opacity: 1 !important;
}

.map-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

#heatmap {
    height: 500px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    background: white;
}

.map-stats {
    display: flex;
    justify-content: space-around;
    margin-top: 2.5rem; /* 增加顶部间距 */
    gap: 2.5rem; /* 增加统计项之间的间距 */
}

.stat-item {
    padding: 1.5rem;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--shadow);
    flex: 1;
    background: rgba(255,255,255,0.9) !important; /* 浅色背景，配合深色文字 */
    box-shadow: 0 8px 32px rgba(31,38,135,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,0.06);
}

.stat-item * {
    color: #23272a !important; /* 深色文本更易读 */
    text-shadow: none;
}

.stat-label {
    display: block;
    color: var(--primary-blue);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-blue);
}

/* 攻略区域 */
.tips-section {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    flex: 1 !important;
}

.tips-section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2.5rem; /* 统一间距 */
    color: #23272a !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px;
    text-shadow: none !important;
    background: none !important;
    opacity: 1 !important;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem; /* 增加卡片之间的间距 */
    max-width: 1200px;
    margin: 0 auto;
}

.tip-card {
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 2px solid transparent;
}

.tip-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-blue);
}

.tip-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.tip-card h3 {
    color: #ffffff;
    margin: 0 0 1rem 0;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tip-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.tip-card li {
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tip-card li:last-child {
    margin-bottom: 0;
}

.tip-link {
    display: inline-block;
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tip-link:hover {
    color: #404eed;
}

/* 在线游戏区域 */
.online-section {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    flex: 1 !important;
}

.online-section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
    color: #23272a !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px;
    text-shadow: none !important;
    background: none !important;
    opacity: 1 !important;
}

.online-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem;
    text-align: center;
}

.game-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.game-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
}

.game-preview h3 {
    color: #ffffff;
    font-size: 2.5rem;
    margin: 0;
    font-weight: 700;
}

.game-description {
    color: #e0e0e0;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0;
}

.game-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
    max-width: 600px;
}

.game-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.game-feature:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.feature-icon {
    font-size: 2rem;
}

.game-feature span:last-child {
    color: #ffffff;
    font-weight: 500;
    font-size: 0.9rem;
}

.game-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.play-btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.play-btn:first-child {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
}

.play-btn:first-child:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.play-btn.secondary {
    background: transparent;
    color: #ffffff;
    border-color: #667eea;
}

.play-btn.secondary:hover {
    background: #667eea;
    color: white;
    transform: translateY(-3px);
}

/* 社区区域 */
.community-section {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    flex: 1 !important;
}

.community-section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2.5rem; /* 统一间距 */
    color: #23272a !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px;
    text-shadow: none !important;
    background: none !important;
    opacity: 1 !important;
}

.community-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.community-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-shadow:
        0 2px 8px rgba(255,255,255,0.85),
        0 1px 0 #fff,
        0 0 2px #fff;
    color: #23272a !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
    font-weight: 800;
    letter-spacing: 0.5px;
}

.community-content p {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    opacity: 0.9;
}

.community-stats {
  display: flex !important;
  justify-content: space-around !important;
  margin-bottom: 3rem !important;
  gap: 2.5rem !important; /* 增加统计项之间的间距 */
}

.community-stat {
  text-align: center !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 确保统计数字和标签样式清晰 */
.stat-number {
  display: block !important;
  font-size: 2rem !important;
  font-weight: bold !important;
  color: var(--accent-yellow) !important;
  text-shadow: none !important;
}

.stat-label {
  font-size: 0.9rem !important;
  opacity: 0.8 !important;
  color: var(--text-dark) !important;
  text-shadow: none !important;
}

.discord-join-btn {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    background: var(--primary-blue);
    color: white;
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: var(--border-radius);
    font-size: 1.2rem;
    font-weight: bold;
    transition: var(--transition);
    box-shadow: var(--shadow);
}

.discord-join-btn:hover {
    background: #404eed;
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* 计算器内容容器 */
.calculator-content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* 统一区块间距管理 */
#stats-hero {
  margin-top: 2rem; /* 与上一区块保持一致 */
  position: relative;
  z-index: 10;
  padding-top: 0;
  border-top: none;
  clear: both;
}

.live-stats-section,
.stats-section,
.map-section,
.tips-section,
.community-section {
  position: relative;
  z-index: 1;
  margin-top: 0;
  margin-bottom: 2.5rem; /* 统一的下间距 */
  background: transparent; /* 去掉额外背景避免色块 */
  padding-top: 0; /* 去掉额外顶部内边距 */
  border-top: none; /* 去掉分隔线 */
  box-shadow: none; /* 去掉阴影 */
}

/* 移动端统一区块间距管理 */
@media (max-width: 768px) {
  .live-stats-section,
  .stats-section,
  .map-section,
  .tips-section,
  .community-section {
    margin-top: 0;
    margin-bottom: 2rem; /* 移动端统一下间距 */
    padding-top: 0;
  }
}

/* 页脚 */
/* ========================================
   页脚样式优化
   ======================================== */

/* 页脚美化 - 优化版本 */
footer {
    background: linear-gradient(135deg, rgba(35, 39, 42, 0.95), rgba(45, 49, 52, 0.95)) !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: none !important;
    position: relative !important;
    z-index: 2 !important;
    font-weight: 400 !important;
    font-size: 0.9rem !important;
    text-align: center !important;
    padding: 0.8rem 2rem !important;
    margin-top: 1.5rem !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    min-height: auto !important;
}

.footer-content {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.footer-content p {
    margin: 0.3rem 0 !important;
    opacity: 0.9 !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
}

.footer-content p {
    margin: 0.5rem 0;
    opacity: 0.8;
}

.footer-content h2 {
    color: #23272a !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* 动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .player-count {
        font-size: 2.5rem;
    }
    
    nav {
        flex-direction: column;
        gap: 1rem;
    }
    
    .milestone-cards {
        grid-template-columns: 1fr;
    }
    
    .tips-grid {
        grid-template-columns: 1fr;
    }
    
    .community-stats {
        flex-direction: column;
    }
    
    .map-stats {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 100px 1rem 2rem;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .player-count {
        font-size: 2rem;
    }
    
    .counter {
        padding: 1.5rem;
        text-align: center !important;
    }
    
    .stats-section,
    .map-section,
    .tips-section,
    .community-section {
        padding: 4rem 1rem 2rem 1rem; /* 增加上下padding */
    }
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-blue);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #404eed;
}

/* 植物列表和变异列表的滚动条样式 */
.plant-list::-webkit-scrollbar,
.mutation-list::-webkit-scrollbar {
  width: 6px;
}

.plant-list::-webkit-scrollbar-track,
.mutation-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.plant-list::-webkit-scrollbar-thumb,
.mutation-list::-webkit-scrollbar-thumb {
  background: rgba(88, 101, 242, 0.4);
  border-radius: 3px;
}

.plant-list::-webkit-scrollbar-thumb:hover,
.mutation-list::-webkit-scrollbar-thumb:hover {
  background: rgba(88, 101, 242, 0.6);
}

.milestone-card,
.stat-item,
.map-container,
.tip-card,
.community-card,
.timeline-container {
  background: rgba(255,255,255,0.65) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 18px;
  border: 1.5px solid rgba(255,255,255,0.25);
}

.milestone-card *,
.stat-item *,
.map-container *,
.tip-card *,
.community-card *,
.timeline-container * {
  color: #23272a !important;
  text-shadow: 0 2px 8px #fff, 0 1px 2px rgba(0,0,0,0.18);
}

.bg-blur {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -2; /* 进一步降低背景模糊层的z-index，确保它在所有内容之下 */
    background: url('grow-bg.jpg') center center/cover no-repeat;
    opacity: 0.3; /* 稍微增加透明度 */
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

/* 植物标签页 */
.plant-tabs {
  display: flex;
  justify-content: center;
  gap: 0.3rem; /* 进一步减少间距 */
  margin: 0 0 0.4rem 0; /* 进一步减少底部间距 */
  padding: 0;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px; /* 增加最大宽度 */
  margin-left: auto;
  margin-right: auto;
}

.tab {
  padding: 0.3em 1em; /* 进一步减少padding */
  border-radius: 1.2em; /* 减小圆角 */
  background: #23272a;
  color: #fff;
  border: none;
  font-size: 0.85em; /* 进一步减少字体大小 */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0.1em; /* 减少margin */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.tab.active, .tab:focus {
  background: #5865f2;
  color: #fff;
  box-shadow: 0 4px 16px rgba(88,101,242,0.3);
  transform: translateY(-2px);
}

.tab:hover {
  background: #404eed;
  transform: translateY(-1px);
}

/* 植物搜索 */
.plant-search {
     width: 100%;
     max-width: 500px;
     padding: 0.8rem 1.2rem;
     border: 2px solid #e1e5e9;
     border-radius: var(--border-radius);
     font-size: 1rem;
     font-weight: 400;
     letter-spacing: 0.01em;
     background: white;
     color: #333333;
     transition: var(--transition);
     margin: 0 auto 1.5rem auto;
     display: block;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}

.plant-search:focus {
  outline: none;
  border-color: #5865f2;
  box-shadow: 0 0 0 3px rgba(88,101,242,0.1);
}

/* 植物列表 */
 .plant-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* 放大卡片 */
  gap: 0.8rem;
  margin: 0.8rem 0;
  width: 100%;
  padding: 0;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  max-height: 340px; /* 显示更多行 */
  overflow-y: auto;
  padding-right: 0.5rem;
}

.plant-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 130px; /* 放大卡片高度 */
  height: auto;
  background: #23272a;
  color: #fff;
  border-radius: 6px; /* 进一步减小圆角 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  padding: 0.5rem 0.4rem; /* 合理的内边距 */
  position: relative;
}

.plant-item.selected, .plant-item:focus {
  background: #5865f2;
  color: #fff;
  border: 2px solid #f1c40f;
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(88,101,242,0.3);
}

.plant-item:hover {
  background: #404eed;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.plant-icon {
  margin-bottom: 0.4rem;
  line-height: 1;
}

.plant-icon img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 6px;
}

.plant-item span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  font-size: 0.9rem; /* 显示名称 */
  font-weight: 600;
  margin-top: 0.25rem; 
  text-align: center;
  line-height: 1.2;
  color: #ffffff;
}

.plant-value {
  font-size: 0.8rem; /* 显示数值 */
  font-weight: 500;
  color: #43b581;
  margin-top: 0.2rem;
  opacity: 0.9;
}

/* 变异工具栏 */
.mutation-toolbar {
    display: flex;
    flex-direction: column;
  gap: 0.3rem; /* 进一步减少间距 */
  margin: 0.6rem 0; /* 进一步减少上下间距 */
  width: 100%;
  max-width: 1200px; /* 增加最大宽度 */
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.mutation-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
    align-items: center;
    justify-content: center;
  padding: 0.8rem;
  background: rgba(255,255,255,0.6); /* 稍微增加透明度 */
  backdrop-filter: blur(10px); /* 添加毛玻璃效果 */
  -webkit-backdrop-filter: blur(10px); /* Safari支持 */
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.05);
}

.mutation-title {
  font-weight: bold;
  color: #23272a;
  margin-right: 1rem;
  font-size: 1em;
}

.mutation-help-btn,
.mutation-sort-btn,
.mutation-hide-btn {
  padding: 0.4em 0.8em;
  border-radius: 0.8em;
  background: #f1f3fa;
  color: #23272a;
  border: none;
  font-size: 0.85em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.mutation-help-btn:hover,
.mutation-sort-btn:hover,
.mutation-hide-btn:hover {
  background: #e0e7ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.mutation-sort-btn.active {
  background: #5865f2;
  color: #fff;
  box-shadow: 0 4px 12px rgba(88,101,242,0.3);
}

.mutation-search {
  width: 100%;
  max-width: 500px;
  padding: 0.6em 1em;
  border-radius: 12px;
  border: 2px solid #d1d5db;
  font-size: 1em;
  background: rgba(255,255,255,0.8); /* 稍微减少透明度 */
  backdrop-filter: blur(10px); /* 添加毛玻璃效果 */
  -webkit-backdrop-filter: blur(10px); /* Safari支持 */
  margin: 0 auto;
  display: block;
  transition: border-color 0.3s ease;
}

.mutation-search:focus {
  outline: none;
  border-color: #5865f2;
  box-shadow: 0 0 0 3px rgba(88,101,242,0.1);
}

/* 变异列表 */
.mutation-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.4rem; /* 减少间距 */
  justify-content: center;
  margin: 0.8rem 0; /* 减少上下间距 */
  width: 100%;
  padding: 1rem; /* 增加内边距 */
  max-width: 1400px; /* 增加最大宽度 */
  margin-left: auto;
  margin-right: auto;
  max-height: 200px; /* 增加高度 */
  overflow-y: auto;
  padding-right: 1rem;
  /* 确保变异列表可见 */
  min-height: 80px;
  background: rgba(255, 255, 255, 0.15); /* 更明显的背景 */
  border: 2px solid rgba(255, 255, 255, 0.3); /* 更明显的边框 */
  border-radius: 12px;
  /* 确保正确的定位 */
  position: relative;
  z-index: 10;
  /* 强制显示 */
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}

.mutation-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.8rem;
    margin: 0.2rem;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #e1e5e9;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #23272a !important; /* 强制深色文字 */
    backdrop-filter: blur(10px);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mutation-chip:hover {
  background: #e0e7ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.mutation-chip.selected {
  background: #5865f2;
  color: #ffffff !important; /* 选中态白字 */
  transform: scale(1.05);
  font-weight: bold;
  box-shadow: 0 6px 20px rgba(88,101,242,0.3);
}

/* 公式显示区 */
.formula-display {
  margin: 1.5rem auto; /* 减少上下间距 */
  padding: 1.2rem; /* 减少padding */
  background: rgba(88,101,242,0.25); /* 增加不透明度 */
  backdrop-filter: blur(10px); /* 添加毛玻璃效果 */
  -webkit-backdrop-filter: blur(10px); /* Safari支持 */
  border-radius: 12px; /* 增加圆角 */
  border: 2px solid rgba(88,101,242,0.5); /* 更明显的边框 */
  width: 100%;
  max-width: 700px; /* 调整最大宽度 */
  text-align: center;
  box-shadow: 0 8px 20px rgba(88,101,242,0.2); /* 增强阴影 */
  position: relative; /* 添加相对定位 */
  z-index: 3; /* 提高层级 */
}

.formula-text {
   font-size: 1rem;
   font-weight: 600;
   color: #23272a !important; /* 深色文字，确保可读 */
   text-align: center;
   padding: 0.8rem;
   background: #ffffff; /* 纯白底 */
   border-radius: var(--border-radius);
   border: 2px solid #d1d5db; /* 更柔和的边框 */
   letter-spacing: 0.02em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* 输入区 */
.input-section {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 减少间距 */
  margin: 1.5rem auto; /* 减少上下间距 */
  width: 100%;
  max-width: 600px; /* 增加最大宽度 */
  padding: 1.5rem; /* 减少padding */
  background: rgba(255,255,255,0.85); /* 增加不透明度 */
  border-radius: 12px; /* 适当增加圆角 */
  border: 1px solid rgba(255,255,255,0.5); /* 更明显的边框 */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* 增强阴影效果 */
  backdrop-filter: blur(15px); /* 增强毛玻璃效果 */
  -webkit-backdrop-filter: blur(15px); /* Safari支持 */
  position: relative; /* 添加相对定位 */
  z-index: 3; /* 提高层级 */
}

.input-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.input-row label {
    display: block;
    margin-bottom: 0.3rem;
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.input-row input[type="number"] {
    width: 100%;
    padding: 0.6rem;
    border: 2px solid #e1e5e9;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: var(--transition);
    background: white;
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.input-row input[type="number"]:focus {
  outline: none;
  border-color: #5865f2;
  box-shadow: 0 0 0 3px rgba(88,101,242,0.1), 0 4px 16px rgba(88,101,242,0.1);
  background: rgba(255,255,255,0.9); /* 保持毛玻璃效果 */
  backdrop-filter: blur(15px); /* 增强毛玻璃效果 */
  -webkit-backdrop-filter: blur(15px); /* Safari支持 */
}

.input-row input[type="range"] {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #d1d5db 0%, #d1d5db 50%, #5865f2 50%, #5865f2 100%);
  outline: none;
  -webkit-appearance: none;
  margin-top: 0.3rem;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.input-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #5865f2;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(88,101,242,0.4);
  border: 2px solid #fff;
  transition: all 0.3s ease;
}

.input-row input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(88,101,242,0.5);
}

/* 结果区 */
.result-section {
  margin: 1.5rem auto; /* 减少上下间距 */
  text-align: center;
  width: 100%;
  max-width: 700px; /* 增加最大宽度 */
  padding: 1.5rem; /* 减少padding */
  background: rgba(67,181,129,0.25); /* 增加不透明度 */
  backdrop-filter: blur(10px); /* 添加毛玻璃效果 */
  -webkit-backdrop-filter: blur(10px); /* Safari支持 */
  border-radius: 12px; /* 增加圆角 */
  border: 2px solid rgba(67,181,129,0.3); /* 更明显的边框 */
  box-shadow: 0 8px 20px rgba(67,181,129,0.15); /* 添加阴影 */
  position: relative; /* 添加相对定位 */
  z-index: 3; /* 提高层级 */
}

.result-main {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-green);
    text-align: center;
    margin: 0.8rem 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.result-unit {
  font-size: 1.3em;
  color: #666;
  font-weight: 500;
}

/* 操作按钮区 */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem; /* 进一步减少间距 */
  margin: 0.5rem auto; /* 进一步减少上下间距 */
  justify-content: center;
  width: 100%;
  max-width: 900px; /* 增加最大宽度 */
}

.action-btn {
    background: linear-gradient(135deg, var(--primary-blue), #404eed);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: var(--transition);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.action-btn:hover::before {
  left: 100%;
}

.action-btn:hover {
  background: linear-gradient(135deg, #404eed 0%, #5865f2 100%);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(88,101,242,0.4);
}

.action-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(88,101,242,0.3);
}

/* 反向计算区 */
.reverse-calc-section {
  margin: 1rem auto; /* 减少上下间距 */
  padding: 1.2rem; /* 减少padding */
  background: rgba(255,255,255,0.7); /* 更透明的背景 */
  backdrop-filter: blur(15px); /* 添加毛玻璃效果 */
  -webkit-backdrop-filter: blur(15px); /* Safari支持 */
  border-radius: 10px; /* 进一步减小圆角 */
  border: 2px solid #e0e7ff;
  width: 100%;
  max-width: 700px; /* 增加最大宽度 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* 历史记录区 */
.history-section {
  margin: 1.5rem auto; /* 减少上下间距 */
  width: 100%;
  max-width: 900px;
  padding: 1rem; /* 增加padding */
}

.history-section h3 {
  text-align: center;
  color: #23272a;
  margin-bottom: 1.2rem;
  font-size: 1.6em;
  font-weight: bold;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-height: 250px; /* 进一步减少最大高度 */
  overflow-y: auto;
  padding: 0.8rem;
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.05);
  min-height: 80px; /* 设置最小高度 */
}

/* 空历史记录时的样式 */
.history-list:empty::after {
  content: "No history yet";
  text-align: center;
  color: #23272a; /* 统一为深色 */
  font-style: italic;
  padding: 1.5rem;
  display: block;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: rgba(255,255,255,0.9);
  border-radius: 12px;
  border-left: 4px solid #43b581;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.history-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.history-item .history-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.history-item .history-plant {
  font-weight: bold;
  color: #23272a;
  font-size: 1.1em;
}

.history-item .history-mutations {
  font-size: 0.9em;
  color: #666;
}

.history-item .history-value {
  font-weight: bold;
  color: #43b581;
  font-size: 1.2em;
}

.history-item .history-delete {
  background: #e74c3c;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 1.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(231,76,60,0.3);
}

.history-item .history-delete:hover {
  background: #c0392b;
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(231,76,60,0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  /* 英雄区域移动端调整 */
  .hero {
    padding: 1rem 1rem 2rem 1rem;
    margin-top: 50px;
    min-height: 100vh; /* 使用最小高度 */
    margin-bottom: 2rem;
  }
  
  .hero-glass {
    z-index: 3;
    padding: 1.5rem 1rem;
  margin: 0;
    width: 100%;
    min-height: 80vh; /* 使用最小高度而不是固定高度 */
    border-radius: 15px;
    overflow: visible; /* 允许内容自然流动 */
  }
  
  /* 标题移动端调整 */
  .hero-glass h1 {
    font-size: 2rem;
    margin-bottom: 0.8rem;
  }
  
  .hero-glass h2 {
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 2rem;
  }
  
  /* 植物标签页移动端 */
  .plant-tabs {
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  
  .tab {
    padding: 0.5em 1.2em;
    font-size: 0.9em;
  }
  
  /* 植物搜索移动端 */
  .plant-search {
    max-width: 100%;
    padding: 0.8em 1em;
    margin: 1rem 0;
  }
  
  /* 植物列表移动端 */
  .plant-list {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 放大卡片 */
    gap: 0.6rem;
    margin: 1rem 0;
    max-width: 100%;
    max-height: 320px; /* 显示更多行 */
    overflow-y: auto;
    padding-right: 0.3rem;
  }
  
  .plant-item {
    min-height: 120px;
    height: auto;
    padding: 0.6rem 0.5rem;
  }
  
  .plant-icon {
    font-size: 2em;
    margin-bottom: 0.2em;
  }
  
  .plant-item span {
    font-size: 0.8em;
  }
  
  .plant-value {
    font-size: 0.7em;
  }
  
  /* 变异工具栏移动端 */
  .mutation-toolbar {
    margin: 1.5rem 0; /* 减少上下间距 */
    max-width: 100%;
  }
  
  .mutation-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 0.8rem;
  }
  
  .mutation-title {
    margin-right: 0;
    margin-bottom: 0.5rem;
    text-align: center;
  }
  
  .mutation-help-btn,
  .mutation-sort-btn,
  .mutation-hide-btn {
    padding: 0.6em 1em;
    font-size: 0.85em;
    width: 100%;
  }
  
  .mutation-search {
    max-width: 100%;
    padding: 0.7em 1em;
  }
  
  /* 变异列表移动端 */
  .mutation-list {
    gap: 0.4rem; /* 适中的间距 */
    margin: 1rem 0; /* 保持合理的上下间距 */
    max-width: 100%;
    max-height: 180px; /* 增加高度以显示更多内容 */
    overflow-y: auto;
    padding-right: 0.3rem;
  }
  
  .mutation-chip {
    padding: 0.5em 1em;
    font-size: 0.85em;
    margin: 0.2em;
  }
  
  /* 公式显示移动端 */
  .formula-display {
    margin: 1.5rem 0;
    padding: 1rem 1.2rem;
    max-width: 100%;
  }
  
  .formula-text {
    font-size: 1em;
  }
  
  /* 输入区移动端 */
  .input-section {
    margin: 2rem 0;
    max-width: 100%;
    padding: 1.5rem;
  }
  
  .input-row input[type="number"] {
    padding: 0.8em 1em;
    font-size: 1em;
  }
  
  /* 结果区移动端 */
  .result-section {
    margin: 2rem 0;
    max-width: 100%;
    padding: 1.5rem;
  }
  
  .result-main {
    font-size: 2.2em;
  }
  
  .result-unit {
    font-size: 1.1em;
  }
  
  /* 操作按钮移动端 */
  .action-buttons {
    flex-direction: column;
    gap: 0.8rem;
    margin: 2rem 0;
    max-width: 100%;
  }
  
  .action-btn {
    width: 100%;
    padding: 1em 1.5em;
    min-width: auto;
    font-size: 0.95em;
  }
  
  /* 反向计算区移动端 */
  .reverse-calc-section {
    margin: 2rem 0;
    padding: 1.5rem;
    max-width: 100%;
  }
  
  /* 历史记录移动端 */
  .history-section {
    margin: 2rem 0;
    max-width: 100%;
  }
  
  .history-section h3 {
    font-size: 1.5em;
    margin-bottom: 1rem;
  }
  
  .history-list {
    max-height: 250px;
    padding: 0.8rem;
  }
  
  .history-item {
    padding: 1rem;
  }
  
  .history-item .history-plant {
    font-size: 1em;
  }
  
  .history-item .history-value {
    font-size: 1.1em;
  }
  
  .history-item .history-delete {
    width: 32px;
    height: 32px;
    font-size: 1.2em;
  }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
  .hero {
    padding: 80px 0.5rem 2rem 0.5rem;
  }
  
  .hero-glass {
    padding: 1.5rem 0.8rem 2.5rem 0.8rem;
  }
  
  .hero-glass h1 {
    font-size: 1.8rem;
  }
  
  .hero-glass h2 {
    font-size: 1.2rem;
  }
  
  .plant-list {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.8rem;
  }
  
  .plant-item {
    min-height: 130px;
    height: auto;
  }
  
  .plant-icon {
    font-size: 1.8em;
  }
  
  .plant-item span {
    font-size: 0.75em;
  }
  
  .mutation-chip {
    padding: 0.4em 0.8em;
    font-size: 0.8em;
  }
  
  .input-section {
    padding: 1.2rem;
  }
  
  .result-main {
    font-size: 1.8em;
  }
}

/* 隐藏管理员变异 */
.mutation-chip.admin-hidden {
  display: none;
}

/* 选中状态 */
.mutation-chip.selected {
  background: #5865f2;
  color: #fff;
  transform: scale(1.08);
  font-weight: bold;
}

.plant-item.selected {
  background: #5865f2;
  color: #fff;
  border: 2px solid #f1c40f;
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(88,101,242,0.10);
} 

/* 滚动行为控制 */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* 为固定导航栏留出空间 */
}

body {
  overflow-x: hidden;
  width: 100%;
  scroll-behavior: smooth;
}

/* 防止页面自动滚动到锚点 */
html:not([data-scroll-behavior="smooth"]) {
  scroll-behavior: auto;
}

/* 确保英雄区域不会被自动滚动到 */
.hero {
  scroll-margin-top: 0;
  scroll-padding-top: 0;
}

/* 其他section的滚动边距 */
#stats, #map, #tips, #community {
  scroll-margin-top: 80px;
  scroll-padding-top: 80px;
}

/* 移动端滚动边距调整 */
@media (max-width: 768px) {
  html {
    scroll-padding-top: 60px;
  }
  
  #stats, #map, #tips, #community {
    scroll-margin-top: 60px;
    scroll-padding-top: 60px;
  }
} 

/* Live Stats区域样式 */
.live-stats-section {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 1;
  display: block !important; /* 确保显示 */
  visibility: visible !important; /* 确保可见 */
  min-height: 200px; /* 确保有最小高度 */
}

/* 统计区域样式 */
.stats-section {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 1;
  display: block !important; /* 确保显示 */
  visibility: visible !important; /* 确保可见 */
  min-height: 200px; /* 确保有最小高度 */
  text-align: center !important;
}

.stats-container {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 2rem;
  margin: 0 auto;
  max-width: 700px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center !important;
  position: relative;
  z-index: 1;
  display: block !important; /* 确保显示 */
  visibility: visible !important; /* 确保可见 */
}

.stats-container h1 {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
  color: #23272a;
  text-align: center;
}

.stats-subtitle {
  font-size: 1.1rem;
  color: #23272a;
  opacity: 0.92;
  margin-bottom: 2.2rem;
  text-align: center;
}

/* 确保统计区域的计数器容器不会与计算器重叠 */
.stats-section .counter-container {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(88,101,242,0.10);
  margin: 2rem auto 0 auto;
  max-width: 480px;
  padding: 2rem 1.5rem 1.5rem 1.5rem;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.stats-section .counter h2 {
  color: #3b4cca;
  text-shadow: 0 2px 8px rgba(0,0,0,0.08);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

.stats-section .player-count {
  color: #3b4cca;
  text-shadow: 0 2px 8px rgba(0,0,0,0.08);
  font-size: 3.5rem;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 1rem;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

.stats-section .update-time {
  color: #666;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

.stats-section .trend-indicator {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  width: 100% !important;
}

.stats-section .trend-indicator span:first-child {
  color: #43b581;
}

.stats-section .trend-indicator span:last-child {
  color: #43b581;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .live-stats-section {
    padding: 4rem 1rem 2rem 1rem; /* 移动端增加上下padding */
    margin: 0 auto;
  }
  
  .stats-section {
    padding: 4rem 1rem 2rem 1rem; /* 移动端增加上下padding */
    margin: 0 auto;
  }
  
  .stats-container {
    padding: 1.5rem;
  }
  
  .stats-container h1 {
    font-size: 1.8rem;
  }
  
  .stats-subtitle {
    font-size: 1rem;
  }
  
  .stats-section .counter-container {
    padding: 1.2rem 0.5rem;
  }
  
  .stats-section .player-count {
    font-size: 2.2rem;
  }
  
  .milestone-cards {
    gap: 3rem;
    margin: 4rem auto 3rem auto;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  
  .timeline-container {
    margin: 3rem auto 4rem;
  }
} 

.hero.hide-after-scroll {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: height 0.5s, padding 0.5s;
} 

/* 统一所有主要section区块的毛玻璃背景 */
.live-stats-section,
.stats-section,
.map-section,
.tips-section,
.community-section {
  background: rgba(255,255,255,0.65) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 18px;
  border: 1.5px solid rgba(255,255,255,0.25);
} 

/* 攻略页面样式 */
.guides-hero {
  text-align: center;
  padding: 120px 20px 60px;
  background: linear-gradient(135deg, var(--primary-blue), var(--accent-green));
  color: var(--text-light);
  margin-bottom: 40px;
}

.guides-hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

.guides-hero p {
  font-size: 1.2rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

.breadcrumb-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
}

.breadcrumb {
  background: rgba(255, 255, 255, 0.96)!important;
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.4);
}

.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  font-weight: 700;
  color: #111827!important;
  font-size: 1.05rem;
}

.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin: 0 0.75rem;
  color: #374151!important;
  font-weight: 800;
}

.breadcrumb a {
  color: #1d4ed8!important;
  text-decoration: none;
  font-weight: 700;
}

.breadcrumb a:hover {
  color: #1d4ed8!important;
  text-decoration: underline;
}

.breadcrumb li[aria-current="page"] {
  color: #111827;
  font-weight: 800;
}

.guides-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

.guides-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius);
  padding: 30px;
  margin-bottom: 30px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.guides-card h2 {
  color: var(--text-light);
  font-size: 1.8rem;
  margin-bottom: 20px;
  font-weight: bold;
}

.search-filter-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.guide-search-input {
  width: 100%;
  padding: 15px 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-light);
  font-size: 1rem;
  transition: var(--transition);
}

.guide-search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.guide-search-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  background: rgba(255, 255, 255, 0.15);
}

.filter-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 10px 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-light);
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.9rem;
  font-weight: 500;
}

.filter-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--primary-blue);
}

.filter-btn.active {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: var(--text-light);
}

.guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 25px;
  margin-top: 25px;
}

.guide-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius);
  padding: 25px;
  text-decoration: none;
  color: var(--text-light);
  transition: var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.guide-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-blue), var(--accent-green));
  transform: scaleX(0);
  transition: var(--transition);
}

.guide-item:hover::before {
  transform: scaleX(1);
}

.guide-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  background: rgba(255, 255, 255, 0.1);
}

.featured-guide {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.2), rgba(67, 181, 129, 0.2));
  border: 2px solid var(--primary-blue);
}

.featured-badge, .trending-badge, .new-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  z-index: 1;
}

.featured-badge {
  background: var(--accent-yellow);
  color: var(--text-dark);
}

.trending-badge {
  background: var(--accent-red);
  color: var(--text-light);
}

.new-badge {
  background: var(--accent-green);
  color: var(--text-light);
}

.guide-item h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
  font-weight: bold;
  color: var(--text-light);
}

.guide-item p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 20px;
}

.guide-meta {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;
}

.guide-difficulty, .guide-read-time, .guide-views {
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 500;
}

.guide-difficulty {
  background: var(--accent-green);
  color: var(--text-dark);
}

.guide-read-time {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-light);
}

.guide-views {
  background: var(--accent-red);
  color: var(--text-light);
}

.category-section {
  margin-top: 40px;
}

.category-title {
  color: var(--text-light);
  font-size: 1.6rem;
  margin-bottom: 25px;
  font-weight: bold;
  text-align: center;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .guides-hero {
    padding: 100px 15px 40px;
  }
  
  .guides-hero h1 {
    font-size: 2rem;
  }
  
  .guides-hero p {
    font-size: 1rem;
  }
  
  .guides-section {
    padding: 0 15px 40px;
  }
  
  .guides-card {
    padding: 20px;
  }
  
  .guides-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .filter-buttons {
    justify-content: center;
  }
  
  .guide-meta {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .guides-hero h1 {
    font-size: 1.8rem;
  }
  
  .guides-card {
    padding: 15px;
  }
  
  .guide-item {
    padding: 20px;
  }
  
  .guide-item h3 {
    font-size: 1.1rem;
  }
  
  .guide-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
} 

/* 卡片标题和描述文本优化 */
.guides-card h2,
.tip-card h3,
.guide-item h3,
.category-title {
    color: #ffffff !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 卡片描述文本 */
.tip-card p,
.guide-item p,
.guide-item .guide-meta,
.breadcrumb a {
    color: #ffffff !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 导航和链接文本 */
nav a,
.breadcrumb a,
.tip-link {
    color: #ffffff !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 按钮文本保持清晰 */
.action-btn,
.filter-btn,
.discord-btn {
    color: #ffffff !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} 

/* 强制居中对齐live-stats-section的统计数据 */
.live-stats-section .counter-container {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.live-stats-section .counter h2 {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

.live-stats-section .player-count {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

.live-stats-section .update-time {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

.live-stats-section .trend-indicator {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

/* 保留live-stats-section的卡片样式，去掉毛玻璃效果 */
.live-stats-section {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  border-radius: 20px !important;
  padding: 3rem 2rem !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.live-stats-section .stats-container {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.live-stats-section .stats-container h1 {
  color: var(--text-dark) !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.live-stats-section .stats-subtitle {
  color: var(--text-dark) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) !important;
} 

/* 强制居中统计数据 - 最高优先级 */
.live-stats-section .counter-container,
.live-stats-section .counter,
.live-stats-section .counter h2,
.live-stats-section .player-count,
.live-stats-section .update-time,
.live-stats-section .trend-indicator {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.live-stats-section .counter-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.live-stats-section .trend-indicator {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 确保所有子元素都居中 */
.live-stats-section .counter-container * {
  text-align: center !important;
} 

/* 统一区域间距和样式 */
.live-stats-section,
.stats-section,
.map-section,
.tips-section,
.community-section {
  margin-top: 2rem !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  border-radius: 20px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 调整tips-grid的间距 */
.tips-grid {
  gap: 2rem !important;
  margin-top: 2rem !important;
}

/* 调整tip-card的样式 */
.tip-card {
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 调整milestone-cards的样式 */
.milestone-cards {
  gap: 2rem !important;
  margin-top: 2rem !important;
}

.milestone-card {
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 调整timeline-container的样式 */
.timeline-container {
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 调整map-container的样式 */
.map-container {
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 调整community-card的样式 */
.community-card {
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
} 

/* 调整页面布局，让内容区域两边留空 */
.live-stats-section,
.stats-section,
.map-section,
.tips-section,
.community-section {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 90% !important;
}

/* 调整tips-grid的布局 */
.tips-grid {
  gap: 2rem !important;
  margin-top: 2rem !important;
  justify-content: center !important;
}

/* 调整milestone-cards的布局 */
.milestone-cards {
  gap: 2rem !important;
  margin-top: 2rem !important;
  justify-content: center !important;
}

/* 调整community-stats的布局 */
.community-stats {
  display: flex !important;
  justify-content: space-around !important;
  margin-bottom: 3rem !important;
  gap: 2rem !important;
}

.community-stat {
  text-align: center !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 确保统计数字和标签样式清晰 */
.stat-number {
  display: block !important;
  font-size: 2rem !important;
  font-weight: bold !important;
  color: var(--accent-yellow) !important;
  text-shadow: none !important;
}

.stat-label {
  font-size: 0.9rem !important;
  opacity: 0.8 !important;
  color: var(--text-dark) !important;
  text-shadow: none !important;
}

/* 确保移动端也有合适的边距 */
@media (max-width: 768px) {
  .live-stats-section,
  .stats-section,
  .map-section,
  .tips-section,
  .community-section {
    width: 95% !important;
    padding: 2rem 1rem !important;
  }
  
  .tips-grid,
  .milestone-cards {
    gap: 1rem !important;
  }
} 

/* 统一guides-card之间的间距 */
.guides-card {
  margin-bottom: 30px !important;
}

.guides-card:last-child {
  margin-bottom: 0 !important;
}

/* 统一category-section之间的间距 */
.category-section {
  margin-bottom: 30px !important;
}

.category-section:last-child {
  margin-bottom: 0 !important;
}

/* 调整tips-grid的顶部间距，使其与标题更紧密 */
.tips-grid {
  margin-top: 15px !important;
}

/* ========================================
   CSS变量和基础样式
   ======================================== */

/* Global color variables for Roblox-like style */
:root {
    --primary-dark: #23272a;
    --primary-blue: #5865f2;
    --accent-green: #43b581;
    --accent-yellow: #f1c40f;
    --accent-red: #e74c3c;
    --text-dark: #23272a;
    --text-light: #f5f6fa;
    --bg-light: #f5f6fa;
    --bg-dark: #23272a;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.2);
    --border-radius: 12px;
    --transition: all 0.3s ease;
}

/* 字体渲染优化 */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    font-kerning: normal;
}

* {
    box-sizing: border-box;
} 

/* 返回链接容器样式 */
.back-link-container {
  text-align: center;
  padding: 20px 0;
}

.back-btn {
  display: inline-block;
  padding: 15px 30px;
  background: linear-gradient(135deg, var(--primary-blue), var(--accent-green));
  color: var(--text-light);
  text-decoration: none;
  border-radius: var(--border-radius);
  font-weight: 600;
  font-size: 1.1rem;
  transition: var(--transition);
  border: 2px solid transparent;
}

.back-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-yellow);
  background: linear-gradient(135deg, var(--accent-green), var(--primary-blue));
}

/* 提示项目卡片样式 */
.tip-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius);
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.tip-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-yellow), var(--accent-green));
  transform: scaleX(0);
  transition: var(--transition);
}

.tip-item:hover::before {
  transform: scaleX(1);
}

.tip-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-yellow);
}

.tip-item h4 {
  color: var(--text-light);
  font-size: 1.1rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.tip-item p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* 调整tips-grid布局 */
.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
} 

/* 强制覆盖simple.css的样式 */
.guide-page header.nav-container {
    background: rgba(35, 39, 42, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: none !important;
    box-shadow: none !important;
}

.guide-page header.nav-container nav {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.guide-page header.nav-container nav a {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
}

.guide-page header.nav-container nav a:hover {
    background: rgba(88, 101, 242, 0.8) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

.guide-page header.nav-container .discord-btn {
    background: #5865f2 !important;
    color: white !important;
    border-radius: 6px !important;
    padding: 0.5rem 1rem !important;
}

.guide-page header.nav-container .discord-btn:hover {
    background: #4752c4 !important;
    transform: translateY(-2px) !important;
}

/* 确保攻略页面的背景图片正确显示 */
.guide-page .bg-blur {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0 !important;
    background: url('grow-bg.jpg') center center/cover no-repeat !important;
    opacity: 0.3 !important;
    filter: blur(2px) !important;
}

/* 确保攻略页面的内容有正确的间距 */
.guide-page .content-wrapper {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 60px !important; /* 为固定导航栏留出空间 */
}

/* 确保攻略页面的hero区域有正确的样式 */
.guide-page .salad-hero,
.guide-page .pizza-hero,
.guide-page .cake-hero,
.guide-page .bread-hero,
.guide-page .donut-hero,
.guide-page .cookies-hero,
.guide-page .pie-hero,
.guide-page .sandwich-hero,
.guide-page .smoothie-hero,
.guide-page .spaghetti-hero,
.guide-page .ice-cream-hero {
    background: linear-gradient(135deg, #43b581, #2ecc71) !important;
    color: white !important;
    padding: 4rem 2rem !important;
    text-align: center !important;
    margin-top: 0 !important; /* 移除顶部间距，因为content-wrapper已经有了 */
    margin-bottom: 2rem !important;
    position: relative !important;
    border-radius: 12px !important;
    margin-left: 2rem !important;
    margin-right: 2rem !important;
}

.guide-page .salad-hero h1,
.guide-page .pizza-hero h1,
.guide-page .cake-hero h1,
.guide-page .bread-hero h1,
.guide-page .donut-hero h1,
.guide-page .cookies-hero h1,
.guide-page .pie-hero h1,
.guide-page .sandwich-hero h1,
.guide-page .smoothie-hero h1,
.guide-page .spaghetti-hero h1,
.guide-page .ice-cream-hero h1 {
    font-size: 3rem !important;
    margin-bottom: 1rem !important;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.8) !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

.guide-page .salad-hero p,
.guide-page .pizza-hero p,
.guide-page .cake-hero p,
.guide-page .bread-hero p,
.guide-page .donut-hero p,
.guide-page .cookies-hero p,
.guide-page .pie-hero p,
.guide-page .sandwich-hero p,
.guide-page .smoothie-hero p,
.guide-page .spaghetti-hero p,
.guide-page .ice-cream-hero p {
    font-size: 1.2rem !important;
    color: white !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.7) !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
} 

/* 国旗语言切换器样式 */
.flag-language-switcher {
    position: relative;
    display: inline-block;
    margin-left: 1rem;
}

.current-flag {
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.current-flag:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.current-flag img {
	width: 24px !important;
	height: 18px !important;
	border-radius: 3px !important;
	object-fit: cover !important;
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.flag-dropdown {
	position: absolute;
	top: calc(100% + 16px) !important;
	right: 0;
	background: rgba(20, 20, 20, 0.98) !important;
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 10px !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
	min-width: 40px !important;
	width: auto !important;
	padding: 6px 6px !important;
	max-height: 420px !important;
	overflow-y: auto;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.2s ease;
	/* 保留滚动功能但隐藏滚动条 */
	-ms-overflow-style: none; /* IE/Edge */
	scrollbar-width: none; /* Firefox */
	padding-top: 6px !important;
	pointer-events: none;
}
.flag-dropdown::-webkit-scrollbar { /* Chrome/Safari */
	display: none;
	width: 0;
	height: 0;
}



.flag-option {
	display: flex !important;
	align-items: center !important;
	gap: 0 !important;
	padding: 8px !important;
	width: auto !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.flag-option:last-child { border-bottom: none !important; }
.flag-option:hover { background: rgba(255, 255, 255, 0.06) !important; }

.flag-option img { width: 24px !important; height: 18px !important; border-radius: 4px !important; object-fit: cover !important; border: 1px solid rgba(255,255,255,0.15) !important; flex-shrink: 0 !important; }
.current-flag img { width: 28px !important; height: 21px !important; border-radius: 4px !important; object-fit: cover !important; border: 1px solid rgba(255,255,255,0.15) !important; }

.flag-name { display: none !important; }

.flag-language-switcher:hover .flag-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}



/* 响应式设计 */
@media (max-width: 768px) {
    .flag-dropdown {
        right: -50px;
        min-width: 200px;
    }
    
    .flag-name {
        font-size: 0.85rem;
    }
}

.flag-name {
    display: none !important;
}

.flag-option:first-child {
	margin-top: 0 !important;
}

/* 保持国旗下拉在点击展开时可见 */
.flag-dropdown.open {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
	pointer-events: auto !important;
}

/* 404错误页面样式 */
.error-page {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.error-page .hero-glass {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.error-page h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #ff6b6b;
}

.error-page p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: #ffffff;
}

.error-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.btn-primary, .btn-secondary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.error-help {
    text-align: left;
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.error-help h3 {
    margin-bottom: 1rem;
    color: #ffffff;
}

.error-help ul {
    list-style: none;
    padding: 0;
}

.error-help li {
    margin-bottom: 0.5rem;
}

.error-help a {
    color: #4CAF50;
    text-decoration: none;
    transition: color 0.3s ease;
}

.error-help a:hover {
    color: #45a049;
    text-decoration: underline;
}

/* 网站地图页面样式 */
.sitemap-page {
    padding: 2rem;
}

.sitemap-page .hero-glass {
    max-width: 1200px;
    margin: 0 auto;
}

.sitemap-page h1 {
    text-align: center;
    margin-bottom: 1rem;
    color: #4CAF50;
}

.sitemap-page p {
    text-align: center;
    margin-bottom: 2rem;
    color: #ffffff;
}

.sitemap-section {
    margin-bottom: 3rem;
}

.sitemap-section h2 {
    color: #4CAF50;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid rgba(76, 175, 80, 0.3);
    padding-bottom: 0.5rem;
}

.language-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.language-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.language-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.language-card h3 {
    color: #4CAF50;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.language-card ul {
    list-style: none;
    padding: 0;
}

.language-card li {
    margin-bottom: 0.5rem;
}

.language-card a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
    padding: 0.25rem 0;
}

.language-card a:hover {
    color: #4CAF50;
    text-decoration: underline;
}

.sitemap-section ul {
    list-style: none;
    padding: 0;
}

.sitemap-section li {
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.25rem;
}

.sitemap-section a {
    color: #4CAF50;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.sitemap-section a:hover {
    color: #45a049;
    text-decoration: underline;
}