/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f5f7fa 0%, #e8ecf1 100%);
  padding: 0;
  margin: 0;
  /* 页面整体底部预留安全区域，避免内容被遮挡 */
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

/* 自定义导航栏容器 */
.custom-nav {
  width: 100%;
  background: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  box-shadow: 0 1rpx 0 rgba(0,0,0,0.05);
}

/* 标题栏区域 */
.title-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}

.nav-title {
  font-size: 17px;
  font-weight: bold;
  color: #000;
}



/* 水位状态颜色 */
.water-level-1 {
  color: #07c160;
  font-weight: 500;
}

.water-level-0 {
  color: #ee0a24;
  font-weight: 500;
}

/* 空值样式 */
.empty-value {
  color: #a8b2b8 !important;
}

.scrollarea {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  /* 滚动区域底部预留更多空间，避免内容贴底 */
  padding-bottom: 20rpx;
  box-sizing: border-box;
  /* 为自定义导航栏预留顶部空间 */
  padding-top: var(--navBarHeight);
}

.container {
  padding: 0 24rpx;
  background: transparent;
  min-height: 100%; /* 替换100vh，避免高度溢出 */
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  /* 新增：容器上下留白，优化整体呼吸感 */
  padding-top: 16rpx;
  padding-bottom: 40rpx;
}

/* 区域样式 - 统一间距（微调间距，更协调） */
.section {
  margin-bottom: 40rpx; /* 原36rpx，微调增加呼吸感 */
  padding: 0 16rpx;
  width: 100%;
  box-sizing: border-box;
}

.section-header {
  display: flex;
  align-items: center;
  padding: 24rpx 0 18rpx; /* 原28rpx 0 20rpx，微调更紧凑 */
  margin-bottom: 12rpx; /* 原8rpx，增加标题与内容间距 */
}

.section-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #2c3e50;
  margin-left: 14rpx;
  letter-spacing: 0.5rpx;
}

.setting-btn {
  margin-left: auto;
  border-radius: 10rpx;
  font-size: 26rpx;
  padding: 0 28rpx;
  height: 60rpx;
  line-height: 60rpx;
  /* 新增：按钮最小宽度，避免文字挤压 */
  min-width: 120rpx;
  text-align: center;
}

/* 数据卡片 - 统一尺寸 */
.cell-title-wrap {
  display: flex;
  align-items: center;
  gap: 18rpx;
  width: 100%;
}

.data-label {
  font-size: 30rpx;
  color: #8a92a0;
  font-weight: 500;
}

.data-value {
  font-size: 36rpx;
  font-weight: 600;
  color: #2c3e50;
  font-feature-settings: "tnum";
  letter-spacing: -0.5rpx;
}

.mode-cell {
  margin-top: 32rpx; /* 原28rpx，微调间距 */
  width: 100%;
}

/* 控制按钮网格 - 优化尺寸和间距（更协调） */
.control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32rpx; /* 原28rpx，增加按钮间距 */
  padding: 24rpx 8rpx 32rpx; /* 原28rpx 8rpx，上下间距微调 */
  width: 100%;
  box-sizing: border-box;
}

.control-grid .control-btn:nth-child(3) {
  grid-column: 1 / -1;
}

.control-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14rpx;
  border-radius: 28rpx;
  padding: 52rpx 24rpx; /* 原56rpx，微调内边距 */
  margin: 0;
  font-size: 30rpx;
  font-weight: 500;
  letter-spacing: 0.5rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 190rpx; /* 原200rpx，微调高度更协调 */
  box-sizing: border-box;
}

.control-btn::after {
  display: none;
}

.control-btn:active {
  transform: scale(0.95);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.control-btn[type="primary"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
}

.control-btn[type="info"] {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: #ffffff;
  box-shadow: 0 8rpx 24rpx rgba(79, 172, 254, 0.3);
}

.refresh-btn {
  background: #ffffff !important;
  color: #2c3e50 !important;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04) !important;
  border: 2rpx solid #e8ecf1;
}

.refresh-btn:active {
  background: #f5f7fa !important;
}

/* 模式切换单元格 */
.mode-switch-cell {
  margin-top: 16rpx; /* 原8rpx，增加与按钮区间距 */
  width: 100%;
}

/* 设置弹窗 - 全屏宽度优化（核心：安全区域适配） */
.settings-popup {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border-radius: 36rpx 36rpx 0 0;
  width: 100%;
  box-sizing: border-box;
  /* 新增：弹窗底部预留安全区域 */
  padding-bottom: env(safe-area-inset-bottom);
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36rpx 32rpx 32rpx; /* 原40rpx 32rpx 36rpx，微调更紧凑 */
  border-bottom: 1rpx solid #f0f2f5;
  width: 100%;
  box-sizing: border-box;
}

.popup-title {
  font-size: 38rpx;
  font-weight: 600;
  color: #2c3e50;
}

.popup-content {
  flex: 1;
  padding: 0 32rpx;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
  /* 新增：内容区上下留白，避免贴边 */
  padding-top: 8rpx;
  padding-bottom: 16rpx;
}

.setting-section {
  padding: 36rpx 0; /* 原40rpx 0，微调间距 */
  width: 100%;
  box-sizing: border-box;
}

.setting-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32rpx; /* 原36rpx，微调间距 */
}

.setting-section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #2c3e50;
}

.setting-value {
  font-size: 34rpx;
  font-weight: 600;
  color: #667eea;
}

.add-time-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  border-radius: 14rpx;
  padding: 0 28rpx;
  height: 68rpx;
  line-height: 68rpx;
  font-size: 26rpx;
  /* 新增：按钮最小宽度，避免文字挤压 */
  min-width: 100rpx;
}

/* 时间列表 */
.empty-tip {
  text-align: center;
  padding: 72rpx 0; /* 原80rpx 0，微调间距 */
  color: #a8b2b8;
  font-size: 30rpx;
}

.time-list {
  display: flex;
  flex-direction: column;
  gap: 28rpx;
  width: 100%;
}

.time-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 32rpx; /* 原36rpx 32rpx，微调内边距 */
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
  border-radius: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
  width: 100%;
  box-sizing: border-box;
}

.time-text {
  font-size: 42rpx;
  font-weight: 600;
  color: #2c3e50;
  font-feature-settings: "tnum";
}

.time-actions {
  display: flex;
  gap: 48rpx; /* 原52rpx，微调图标间距 */
}

/* 滑块标记 */
.slider-marks {
  display: flex;
  justify-content: space-between;
  padding: 28rpx 0 0;
  color: #a8b2b8;
  font-size: 26rpx;
  width: 100%;
}

/* 弹窗底部（核心：安全区域适配） */
.popup-footer {
  padding: 32rpx 32rpx;
  /* 优化：安全区域计算更精准，避免被手机底部遮挡 */
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid #f0f2f5;
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

.save-btn {
  width: 100%;
  border-radius: 20rpx;
  font-size: 34rpx;
  font-weight: 600;
  height: 96rpx; /* 原100rpx，微调高度更协调 */
  line-height: 96rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.save-btn::after {
  display: none;
}

/* 底部留白（核心优化：适配安全区域，确保不被手机底部遮挡） */
.bottom-spacer {
  /* 原120rpx，优化为：基础高度 + 安全区域，适配不同手机 */
  height: calc(120rpx + env(safe-area-inset-bottom));
  /* 新增：确保留白区域可点击，不影响交互 */
  pointer-events: none;
}

/* 优化 van 组件样式 - 统一宽度和内边距 */
::v-deep .van-cell-group {
  border-radius: 28rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  /* 新增：单元格组上下留白，避免贴边 */
  margin-bottom: 8rpx;
}

::v-deep .van-cell {
  padding: 30rpx 36rpx; /* 原32rpx 36rpx，微调内边距 */
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
  font-size: 30rpx;
}

::v-deep .van-cell::after {
  left: 36rpx;
  right: 36rpx;
}

/* 优化 van-switch */
::v-deep .van-switch {
  background-color: #e8ecf1;
  width: 64rpx;
  height: 36rpx;
}

::v-deep .van-switch--on {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 优化 van-notice-bar */
::v-deep .van-notice-bar {
  margin: 20rpx 16rpx 28rpx; /* 原24rpx 16rpx，增加底部间距 */
  border-radius: 20rpx;
  padding: 24rpx 36rpx;
  width: calc(100% - 32rpx);
  font-size: 28rpx;
  box-sizing: border-box;
}

/* 优化 van-stepper */
::v-deep .van-stepper {
  border-radius: 14rpx;
  overflow: hidden;
  width: 100%;
  /* 新增：步进器上下留白 */
  margin: 8rpx 0;
}

::v-deep .van-stepper__minus,
::v-deep .van-stepper__plus {
  background: #f5f7fa;
  border: none;
  color: #2c3e50;
  width: 80rpx;
  height: 80rpx;
  font-size: 32rpx;
}

::v-deep .van-stepper__input {
  background: #ffffff;
  font-weight: 600;
  color: #2c3e50;
  font-size: 32rpx;
  height: 80rpx;
  line-height: 80rpx;
}

/* 优化 van-slider */
::v-deep .van-slider {
  height: 60rpx;
  width: 100%;
}

::v-deep .van-slider__bar {
  height: 8rpx;
  background: #e8ecf1;
}

::v-deep .van-slider__button {
  width: 52rpx;
  height: 52rpx;
  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
}

/* 优化 van-tag */
::v-deep .van-tag {
  font-size: 28rpx;
  padding: 8rpx 20rpx;
  border-radius: 12rpx;
  /* 新增：标签最小宽度，避免文字挤压 */
  min-width: 80rpx;
  text-align: center;
}

::v-deep .van-tag--success {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  border: none;
}

::v-deep .van-tag--primary {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  border: none;
}

/* 优化 van-divider */
::v-deep .van-divider {
  margin: 32rpx 16rpx; /* 原36rpx 16rpx，微调间距 */
  border-color: #e8ecf1;
  width: calc(100% - 32rpx);
}

/* 动画优化 */
.section {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.control-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.control-btn:active::before {
  left: 100%;
}