/* ============================================================
   心声传话 · 原型公共样式
   8 个页面共享的基线样式（重置 / 光斑 / 容器 / 导航 / TabBar / Toast）
   页面内联 <style> 中的同名规则会自动覆盖本文件（link 在 style 之前）
   ============================================================ */

/* ========== 基础重置 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  background: #FFF7F9;
  overflow-x: hidden;
}

/* ========== 背景光斑 ========== */
.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .45;
  z-index: 0;
  pointer-events: none;
}
.blob-1 { width: 220px; height: 220px; background: #FF8FB1; top: -60px; left: -50px; animation: float1 14s ease-in-out infinite; }
.blob-2 { width: 260px; height: 260px; background: #8FB8FF; bottom: 80px; right: -80px; animation: float2 18s ease-in-out infinite; }
.blob-3 { width: 160px; height: 160px; background: #FFC7DB; top: 40%; left: 60%; animation: float3 16s ease-in-out infinite; }
@keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px, 40px); } }
@keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-40px, -30px); } }
@keyframes float3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-20px, 25px); } }

/* ========== 页面容器 ========== */
.page {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 90px;
  min-height: 100vh;
}

/* ========== 顶部导航 ========== */
.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 44px;
  margin-bottom: 12px;
}
.navbar .back {
  position: absolute;
  left: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  cursor: pointer;
  color: #555;
  transition: transform .15s;
}
.navbar .back:active { transform: scale(.9); }
.navbar h1 { font-size: 17px; font-weight: 600; color: #444; }

/* ========== 底部 TabBar ========== */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,.05);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #AAA;
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
}
.tab-item svg { width: 24px; height: 24px; stroke: #AAA; fill: none; transition: all .2s; }
.tab-item.active { color: #FF8FB1; font-weight: 600; }
.tab-item.active svg {
  stroke: url(#tabGradient);
  filter: drop-shadow(0 2px 4px rgba(255,143,177,.3));
}

/* ========== Toast ========== */
.toast {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.9);
  background: rgba(0,0,0,.75);
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: all .25s;
  max-width: 80%;
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }