.collection-settings {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 0;

  .page-title {
    background-color: #fff;
    padding: 32rpx;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    text-align: center;
    border-bottom: 1rpx solid #eee;
  }

  .settings-list {
    margin-top: 24rpx;
    background-color: #fff;
    // border-radius: 16rpx;
    // margin: 24rpx 32rpx;
    overflow: hidden;

    .setting-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx 24rpx;
      border-bottom: 1rpx solid #f0f0f0;
      transition: background-color 0.2s;

      &:last-child {
        border-bottom: none;
      }

      &:active {
        background-color: #f8f8f8;
      }

      .setting-left {
        .setting-label {
          font-size: 32rpx;
          color: #333;
          // font-weight: 500;
        }
      }

      .setting-right {
        display: flex;
        align-items: center;
        gap: 16rpx;

        .setting-status {
          font-size: 28rpx;
          color: #999;

          &.status-set {
            color: #52c41a;
          }
        }

        .arrow {
          font-size: 24rpx;
          color: #ccc;
        }
      }
    }
  }

  // 弹窗样式
  .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;

    .modal-header {
      padding: 32rpx;
      border-bottom: 1rpx solid #eee;
      background-color: #fff;
      position: sticky;
      top: 0;
      z-index: 10;

      .modal-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        text-align: center;
      }
    }

    .form-content {
      flex: 1;
      padding: 32rpx;
      overflow-y: auto;

      .form-item {
        margin-bottom: 48rpx;

        .form-label {
          display: block;
          font-size: 28rpx;
          color: #333;
          margin-bottom: 16rpx;
          font-weight: 500;
        }

        .form-input {
          width: 100%;
          // color: #eee;
          // padding: 24rpx 0;
          font-size: 30rpx;
          border: none;
          border-bottom: 2rpx solid #eee;
          background: transparent;
          transition: border-color 0.3s;

          &:focus {
            border-bottom-color: #1890ff;
          }

            &::placeholder {
              color: #e5e5e5;
              font-size: 24rpx;
            }
        }

        .error-text {
          display: block;
          font-size: 24rpx;
          color: #ff4d4f;
          margin-top: 8rpx;
        }

        // 银行选择器样式
        .bank-selector {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 24rpx 0;
          border-bottom: 2rpx solid #eee;
          cursor: pointer;
          transition: border-color 0.3s;

          &:active {
            border-bottom-color: #1890ff;
          }

          .bank-text {
            font-size: 32rpx;
            color: #ccc;
            flex: 1;

            &.bank-selected {
              color: #333;
            }
          }

          .arrow-down {
            font-size: 32rpx;
            color: #ccc;
            // transform: rotate(90deg);
            transition: transform 0.3s;
          }
        }
      }
    }

    .modal-footer {
      padding: 32rpx;
      border-top: 1rpx solid #eee;
      background-color: #fff;
      display: flex;
      gap: 24rpx;

      .footer-btn {
        flex: 1;
        height: 88rpx;
        font-size: 32rpx;
        border-radius: 44rpx;
      }

      .footer-btn-cancel {
        // background-color: #f5f5f5;
        color: #666;
        // border: 1rpx solid #d9d9d9;
      }

      .footer-btn-save {
        background-color: #ffa500;
        color: #fff;
        border: 1rpx solid #ffa500;
      }
    }
  }

  // 银行选择器样式（使用NutUI Picker组件，无需自定义样式）
}

// NutUI 组件样式覆盖
:deep(.nut-popup) {
  .nut-icon {
    font-size: 32rpx;
    color: #666;
  }
}

// 原生input组件样式
.native-input {
  width: 100%;
  height: 88rpx;
  // padding: 0 24rpx;
  font-size: 32rpx;
  color: #333;
  background-color: #f8f8f8;
  border: 2rpx solid #e5e5e5;
  border-radius: 8rpx;
  box-sizing: border-box;

  &::placeholder {
    color: #e5e5e5;
    font-size: 24rpx;
  }

  &:focus {
    border-color: #fa2c19;
    outline: none;
  }
}

:deep(.nut-input) {
  .nut-input-value {
    font-size: 32rpx;
    color: #333;
  }

  .nut-input-placeholder {
    color: #ccc;
  }
}

:deep(.nut-button) {
  &.nut-button--disabled {
    background-color: #f5f5f5 !important;
    color: #ccc !important;
    border-color: #f5f5f5 !important;
  }
}

// 固定返回按钮样式
.fixed-back-btn {
  position: fixed;
  bottom: 60rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 200rpx;
  height: 80rpx;
  background-color: #fb923c;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(251, 146, 60, 0.3);
  z-index: 1000;
  transition: all 0.3s ease;

  &:active {
    transform: translateX(-50%) scale(0.95);
    box-shadow: 0 4rpx 12rpx rgba(251, 146, 60, 0.4);
  }

  .back-text {
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
  }
}