.dock {
  position: fixed;
  bottom: calc(8rpx + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 80rpx);
  max-width: 600rpx;
  z-index: 100;
}

.dock-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--card-bg, #FFFFFF);
  border-radius: 100rpx;
  padding: 12rpx 0;
  box-shadow:
    0 8rpx 32rpx rgba(0, 0, 0, 0.12),
    0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  transition: background-color 0.3s ease;
}

.dock-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8rpx 0;
  transition: transform 0.2s ease;
}

.dock-item:active {
  transform: scale(0.92);
}

.dock-icon {
  width: 50rpx;
  height: 50rpx;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 5rpx;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.dock-text {
  font-size: 23rpx;
  color: var(--text-secondary, #999);
  line-height: 1;
  transition: color 0.2s ease;
}

.dock-item.active .dock-icon {
  opacity: 1;
}

.dock-item.active .dock-text {
  color: var(--primary, #FF6B35);
  font-weight: 600;
}

/* dark mode */
@media (prefers-color-scheme: dark) {
  .dock-inner {
    background: var(--card-bg, #1C1C1E);
    box-shadow:
      0 8rpx 32rpx rgba(0, 0, 0, 0.5),
      0 2rpx 8rpx rgba(0, 0, 0, 0.3);
  }
}