/* ===== 全局变量与重置 ===== */
:root {
  --primary: #ff4d6d; --primary-light: #ffe6ea;
  --bg: #f8f9fa; --text-dark: #333333; --text-gray: #999999;
  --shadow: 0 6px 20px rgba(255, 77, 109, 0.08);
}

* { 
  margin: 0; padding: 0; box-sizing: border-box; 
  -webkit-tap-highlight-color: transparent; 
}

/* 彻底锁死视口，背景设为透明，让底层画布透出来 */
html, body {
  width: 100%; height: 100%;
  overflow: hidden; 
  background-color: transparent; 
  color: var(--text-dark);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  touch-action: none; 
}

/* ===== 核心修复：底层独立画布 (装载网格和粒子) ===== */
.bg-canvas {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background-color: var(--bg); /* 网页真实底色 */
  z-index: 0; /* 处于最底层 */
  pointer-events: none; 
}

/* 动态流动的网格 */
.bg-canvas::before {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background-image: 
    linear-gradient(rgba(255, 77, 109, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 77, 109, 0.08) 1px, transparent 1px);
  background-size: 15px 15px;
  animation: gridMove 3s linear infinite;
}

@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(15px, 15px); }
}

/* 高斯模糊粒子 */
.blur-particle {
  position: absolute; border-radius: 50%; filter: blur(40px); 
  width: 120px; height: 120px; transition: all 4s ease-in-out; 
}

/* ===== iOS液态玻璃 智能导航栏 ===== */
.tab-bar {
  position: fixed; bottom: 20px; left: 10%; width: 80%; height: 55px;
  border-radius: 20px; background: rgba(255, 255, 255, 0.5); 
  backdrop-filter: blur(25px) saturate(200%); -webkit-backdrop-filter: blur(25px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: flex; z-index: 100; transition: opacity 0.4s ease;
}

.tab-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text-gray); text-decoration: none; font-size: 10px; font-weight: bold; gap: 4px;
  transform: translateY(0); opacity: 1;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
}

.icon-wrap { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.3s; }
.tab-item.active { color: var(--primary); }
.tab-item.active .icon-wrap { background: var(--primary-light); color: var(--primary); transform: translateY(-2px); }
.tab-bar.hidden { opacity: 0; pointer-events: none; }
.tab-bar.hidden .tab-item { transform: translateY(20px); opacity: 0; transition: transform 0.4s ease-in, opacity 0.3s ease; }

/* ===== SPA 页面内部滚动容器 ===== */
.page-view {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 10; /* 确保在画布之上 */
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; 
  padding-bottom: 100px; opacity: 0; pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}
.page-view::-webkit-scrollbar { display: none; }
.page-view.active { opacity: 1; pointer-events: auto; transform: translateX(0) !important; }
#page-home { transform: translateX(-30px); }
#page-profile { transform: translateX(30px); }