.tabbar { font-family: var(--font); position: fixed; left: 0; right: 0; bottom: 0; height: calc(128rpx + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(251, 248, 243, 0.92); backdrop-filter: blur(20px); border-top: 1rpx solid var(--line); display: flex; align-items: flex-start; padding-top: 14rpx; z-index: 100; } .tab, .tab-center { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6rpx; } .tab-ico { font-size: var(--tab-icon-size); color: var(--ink-3); line-height: 1; } .tab.active .tab-ico { color: var(--accent-deep); } .tab-txt { font-size: 21rpx; color: var(--ink-3); } .tab.active .tab-txt { color: var(--accent-deep); } /* 中央凸起 FAB */ .fab { width: 108rpx; height: 108rpx; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; margin-top: -52rpx; border: 8rpx solid var(--bg); box-shadow: 0 8rpx 24rpx rgba(200,126,46,0.35); } .fab-ico { font-size: var(--fab-icon-size); line-height: 1; } .fab-walking { background: var(--success); box-shadow: 0 8rpx 24rpx rgba(107,142,90,0.35); } .fab-paused { background: var(--warn); box-shadow: none; } .center-txt-walking { color: var(--success); } .center-txt-paused { color: var(--warn); } .center-txt-idle { color: var(--ink-2); }