/* ===== 全局重置 ===== */
html,body{
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  overflow-x: hidden;
}
*, *::before, *::after {
  box-sizing: inherit;
}
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-height: 64px;
  --gold: #E8C06A;
  --gold-light: #F5D98A;
  --gold-dark: #B8903E;
}
html {
  touch-action: manipulation;
}

/* ===== 底部导航栏（3D 透视效果） ===== */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--tabbar-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: linear-gradient(to top, #050819 0%, #0d1130 50%, #151a42 100%);
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
  transform: perspective(800px) rotateX(22deg);
  transform-origin: bottom center;
  box-shadow:
    0 -3px 8px rgba(0,0,0,0.6),
    0 -8px 20px rgba(0,0,0,0.5),
    0 -18px 36px rgba(0,0,0,0.35),
    0 6px 18px rgba(0,0,0,0.6),
    -2px 0 6px rgba(0,0,0,0.3),
    2px 0 6px rgba(0,0,0,0.3);
}
.tabbar::before { display: none; }
.tabbar-top-highlight {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right,
    transparent 0%, rgba(200,210,255,0.25) 15%, rgba(220,225,255,0.5) 50%, rgba(200,210,255,0.25) 85%, transparent 100%);
  pointer-events: none; z-index: 3;
}
.tabbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 10px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 100%);
  pointer-events: none; z-index: 2;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  padding: 6px 0;
  position: relative;
  transition: transform 0.15s;
}
.tab-item:active { transform: scale(0.92); }
.tab-icon { width: 24px; height: 24px; color: rgba(255,255,255,0.45); transition: color 0.2s; }
.tab-label { font-size: 10px; color: rgba(255,255,255,0.4); font-weight: 500; transition: color 0.2s; }
.tab-item.active .tab-icon { color: #C4C8E0; }
.tab-item.active .tab-label { color: #C4C8E0; }
.tab-item.center { transform: translateY(-14px); z-index: 5; position: relative; }
.tab-item.center:active { transform: translateY(-14px) scale(0.95); }
.center-btn {
  width: 62px; height: 62px; border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #c4c8e0 0%, #8e92a8 25%, #5a5f78 55%, #3a3f55 80%, #252a3e 100%);
  display: flex; align-items: center; justify-content: center;
  transform: perspective(400px) rotateX(12deg); transform-origin: center center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35), inset 0 3px 4px rgba(255,255,255,0.45), inset 0 -4px 8px rgba(0,0,0,0.35);
  border: none; position: relative;
}
.center-btn::before { display: none; }
.center-btn::after {
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 22%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.15) 30%, transparent 60%);
  pointer-events: none;
}
.center-icon {
  font-size: 32px; line-height: 1; color: #d8dae8;
  display: inline-flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.tab-item.center .tab-label { margin-top: 6px; color: rgba(255,255,255,0.65); font-weight: 600; }
.tab-item.center .tab-icon { color: #e0e2f0; }

/* ===== Toast 提示 ===== */
.toast {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  max-width: 80%;
  text-align: center;
}
.toast.show { opacity: 1; }

/* ===== 通用工具 ===== */
.text-center { text-align: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }